ajax学习笔记

最新推荐文章于 2024-11-04 16:24:50 发布

Pop_Rain

最新推荐文章于 2024-11-04 16:24:50 发布

阅读量417

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Pop_Rain/article/details/104919949

版权

前端专栏收录该内容

26 篇文章

订阅专栏

这篇博客详细介绍了Ajax的基础知识，包括Ajax简介、工作流程、XMLHttpRequest对象的使用，以及如何通过jQuery库实现Ajax请求。此外，还探讨了Ajax与JSON数据交互的方式，并给出了在flask框架下进行前后端Json数据交互的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

title: ajax学习笔记
date: 2018-03-21 16:49:52
updated: 2020-03-09 15:30:22
categories: 前端
tags:
- 前端

学习ajax是研二做项目所需

学习资料来源：慕课网的ajax全接触视频教程

Ajax简介

Ajax即异步JavaScript和XML，是一种创建交互式网页的技术，可以不重新加载整个网页的情况下更新部分网页。目前jQuery库提供多个与AJAX相关的方法。通过 jQuery AJAX方法，能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON，同时能够把这些外部数据直接载入网页被选元素中。

作为web开发人员广泛采用的JavaScript封装库之一的jQuery库，它可以极大地简化我们的JavaScript编程，缓解浏览器之间不兼容的影响，要知道在不同浏览器中进行web网页的兼容性测试也是一个不小的工作量。我们可以通过一个简单的例子发现jQuery库的优势所在：

$("p.neat").addClass("ohmy").show("slow");

通过以上简短的代码，开发者可以遍历“neat”类中所有的<p>元素，然后向其增加“ohmy”类，同时以动画效果缓缓显示每一个段落。开发者无需检查客户端浏览器类型，无需编写循环代码，无需编写复杂的动画函数，仅仅通过一行代码就能实现上述效果。jQuery的口号“最少的代码做最多的事情”果真名副其实，它把JavaScript带到了一个更高的层次。

ajax大概流程

运用html和css来实现页面，表达信息
运用XMLHttpRequest和web服务器进行数据的异步交换
运用JavaScript操作DOM，实现动态局部刷新

通过XMLHttpRequest对象发送请求

1.open(method, url, async)

method：发送请求方法 get/post
	
url：请求方地址
	
async：发送异步/同步请求，默认为true异步

2.send(string)

向服务器发送请求，string是发送传递参数，get方法参数在url中可以string为空，而post方法则需要有string参数了

e.g.

request.open("GET", "get.php", true);
request.setRequestHeader("Content-type", "apllication/x-www-form-urlencoded");
request.send("name=王二狗&sex=男");

通过XMLHttpRequest对象取得相应

请看一个较完整的XMLHttpRequest发送请求加取得响应的过程

var request = new XMLHttpRequest();
request.open("GET", "get.php", true);
request.send();
request.onreadystatechange = function()
{
	if(request.readyState===4 && request.status===200) //服务器响应完成且请求成功
	{
		//做一些事情 request.responseText
	}
}

用jQuery实现Ajax

通常不会手写js实现原生的Ajax，使用第三方js库jQuery实现Ajax，以下是一个实现LDAP网关登录的ajax显示demo

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
	
    <!--meta http-equiv="Content-Type" content="text/html; charset=utf-8"-->
    <meta http-equiv="Content-Type" content="application/json; charset=utf-8">
	
    <title>Demo</title>
    <style>
        body,h1,input,label,button,p {
            font-size: 30px;
            line-height: 2;
            
        }
    </style>
	
    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
    <script>
        $(document).ready(function(){
            $("#login").click(function(){
                $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/SecondClass/ldap/login",
                    contentType : "application/json;charset=UTF-8",
                    dataType: "json",
                    data:
                        JSON.stringify({
                            "userId": $("#schoolNumber").val(),
                            "password": $("#password").val()
                        }),
                    success: function(data) {
                            $("#loginResult").html(data.msg);
	
                    },
                    error: function(jqXHR) {
                        alert("发生错误：" + jqXHR.status);
                    }
                });
            });
        });
    </script>
</head>
	
<body>
<h1>网关登录</h1>
<label>请输入学号: </label>
<input type="text" id="schoolNumber"/><br>
<label>请输入密码: </label>
<input type="text" id="password"/><br>
<button id="login">登录</button>
<p id="loginResult">sadasd</p>
	
</body>
</html>

Ajax交互json数据

下面介绍前端jQuery.ajax()请求JSON数据的方法，代码如下：

function useTestFun() {
    $.ajax({
        url: "/Usedefine",//获取数据的URL
        data:JSON.stringify({
            'wJsona':"kkk",        
            'wjsonb':12,
            'wjsonc':80,
        }),
        type: "POST",//HTTP请求方法
        dataType:'JSON',//获取数据执行方式
        success:function(data){
            if(data.status == 'True'){//传入为JSON对象格式
                alert('连接成功');
            }
            else{ 
                $("#labletip").show();
            }
        },
        error:function(err){
            alert('连接失败');
        }
    });
}

在数据传输过程中，JSON是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以JSON对象和JSON字符串之间的相互转换是关键，可以使用JSON.stringify()将JSON对象转化为JSON字符串，使用JSON.parse()将JSON字符串转换为JSON对象。

JSON字符串:  var str1 = '{ "name": "cxh", "sex": "man" }'; 
JSON对象:  var obj = { "name": "cxh", "sex": "man" };
var obj = str1.parseJSON(); //由JSON字符串转换为JSON对象
var obj = JSON.parse(str1); //由JSON字符串转换为JSON对象
var str2 = obj.toJSONString(); //将JSON对象转化为JSON字符
var str2 = JSON.stringify(obj); //将JSON对象转化为JSON字符

flask框架下Ajax前后端Json数据交互方式示例

1.后端—init.py 构建flask web服务

from flask import Flask, render_template, json, request
	
#创建应用
app = Flask(__name__)
	
#建立路由，通过路由可以执行其覆盖的方法，可以多个路由指向同一个方法。
@app.route('/')
def index():
    return render_template('route.html', start="北京邮电大学", end="故宫博物院")

#通过ajax获取前端返回的json数据

@app.route('/test_post',methods=['POST'])
def test_post():
    #获取POST数据
    data = json.loads(request.get_data())
    place = data["place"]
    print(place)
    return "11231"
	
if __name__ == '__main__':
    app.run(debug=True)

2.前端—flask框架下的前端页面（由于项目要调用地图api，以下html是百度地图api给出的页面，其它不用看，直接看ajax写法即可）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
	
        #l-map {
            height: 300px;
            width: 100%;
        }
	
        #r-result {
            width: 100%;
            font-size: 14px;
            line-height: 20px;
        }
    </style>
    <script src="/static/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=gYiUfUgXTB51nrXkyjCaGqZgvwZfvjDx"></script>
    <title>获取公交换乘的数据接口</title>
</head>
<body>
<div id="l-map"></div>
<div id="r-result"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 10);
    map.enableScrollWheelZoom();
	
	var transit = new BMap.TransitRoute(map, {renderOptions: {map: map},onSearchComplete: function(result) {
            if (transit.getStatus() == BMAP_STATUS_SUCCESS) {
                var firstPlan = result.getPlan(0);
                // 绘制公交线路
                for (i = 0; i < firstPlan.getNumLines(); i++) {
                    var line = firstPlan.getLine(i);
                    map.addOverlay(new BMap.Polyline(line.getPath()));
                }
                // 输出方案信息
                var data_str = (1) + ". " + firstPlan.getDescription(false);
                document.getElementById("r-result").innerHTML = data_str;
                
				//以下是ajax写法
                var data_json = JSON.stringify({
                    "place": data_str
                });
	
                $.ajax({
                    url: "/test_post", //获取数据的url
                    type: "post", //http请求方法
                    data: data_json,
                    dataType: "JSON",
                    success: function(data_json){
                        alert("获取json成功");
                    },
                    error: function(data_json) {
                        alert("失败！");
                    }
                });
            }
        }
    });
    transit.search({{start|tojson}}, {{end|tojson}}); //模板的变量如果在js中，必须使用js的tojson：避免为了防止js注入，把""等特殊字符进行转义
</script>