初学JQuery（3）：jquery-ajax

简介

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着必须编写额外的代码对浏览器进行测试。因此jQuery团队为我们将原生ajax进行了封装，现在我们只需要一行简单的代码，就可以实现 AJAX 功能。

1、低级别接口

1.1 $.ajax(url,其他键值对)

$.ajax()不仅能实现与$ .load()，$ .get()，$.post()同样的功能，而且还可以设定beforeSend（提交前回调函数）、error（请求失败后处理）、success（请求成功后处理）、complete（请求完成后处理）回调函数，通过设定这些回调函数，可以给用户更多的Ajax提示信息，另外，还有一些参数可以设置Ajax请求的超时时间或者页面的"最后更改"状态。

语法格式如下：

$.ajax({
	url:'请求地址'，
	method:'请求方式'，
	data:{参数), // 通常写成键值对形式
	success:function(res){} //请求成功的回调函数
	error:function(err){} //请求失败的回调函数
	...还有其他键值对...
})

例如：发送一个请求，该请求请求方式为post，携带参数类型为json字符串。

var obj={name:'zs',age:12}
$.ajax({
  url:'请求地址',
  method:'post',
  data:{user:JSON.stringify(obj)},
  success:function(res){}, //请求成功后做些什么
  error:function(error){} //请求失败后做些什么
})

通常对jquery-ajax的封装也是基于这个低级接口，这个接口的配置项键值对简单总结了下，列在下面

name	描述
async	布尔值。是否异步处理，默认true、异步
beforeSend(xhr)	发送请求前运行的函数
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
error(xhr,status,error)	如果请求失败要运行的函数。
success(result,status,xhr)	当请求成功时运行的函数
url	规定发送请求的 URL。默认是当前页面
type/method	规定请求的类型（GET 或 POST）
timeout	设置本地的请求超时时间（以毫秒计）。
data	规定要发送到服务器的数据
dataType	希望服务器响应的数据类型。
contentType	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
context	为所有 AJAX 相关的回调函数规定 “this” 值。
traditional	布尔值，规定是否使用参数序列化的传统样式。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。

1.2 $.ajaxSetup()设置全局 AJAX 默认选项

该方法设置全局 AJAX 默认选项
语法：jQuery.ajaxSetup(name:value, name:value, ...)
项目中一般用于设置通用请求信息，例如携带的token。
例如：

$.ajaxSetup({
  url: "/xmlhttp/", //设置AJAX请求默认地址为"/xmlhttp/"
  global: false, //设置禁止触发全局AJAX事件
  type: "POST", //用post请求替代原先请求方式
  success:function(result){$("div").html(result)} //设置全局默认的success函数
});
$.ajax({ data: myData });
//携带的token
$.ajaxSetup({headers:{Authorization:"xx"}})

通过ajaxSetup()设置网全局AJAX默认选项后，其他的AJAX请求可不再设置相同的选项。

2、速写接口

速写接口使用起来相对简单一些，可以理解为速写接口是对低级别接口的封装，在jQuery中，$ .ajax()方法属于最底层的方法，第2层是load()，$ .get()，和$ .post()，第3层是$ .getJSON()方法。

2.1 get()接口

通过远程 HTTP GET 请求载入信息
格式：$.get({url,[data],[successCallback],[dataType]})
参数：

• url:发送请求地址。
• data:待发送 Key/value 参数。
• callback:发送成功时回调函数。
• datatype:返回内容格式，xml, html, script, json, text,jsonp
  例如：
  1、请求 test.php 网

$.get("test.php");

2、请求 test.php 网页，并传送2个参数，忽略返回值。

$.get("test.php", { name: "John", time: "2pm" } );

3、请求 test.php网页，通过回调函数显示返回值(HTML 或 XML，取决于返回值)

$.get("test.php", function(data){
       alert("Data Loaded: " + data);
});

4、请求 test.cgi 网页，添加一组请求参数，并设置回调函数，有返回值(HTML 或 XML，取决于返回值)

$.get("test.cgi", { name: "John", time: "2pm" },function(data){
    alert("Data Loaded: " + data);
});

2.2 post()接口

通过远程 HTTP POST 请求载入信息，
格式：$.post(url,[data],[successCallback],[dataType])

• url:发送请求地址。
• data:待发送 Key/value 参数。
• callback:发送成功时回调函数，失败也会有个回调函数
• datatype:返回内容格式，xml, html, script, json, text, jsonp

例如：
1、请求 test.php 网页，忽略返回值：

$.post("test.php");

2、请求 test.php 页面，并一起发送一些额外的数据（同时仍然忽略返回值）：

$.post("test.php", { name: "John", time: "2pm" } );

3、向服务器传递参数数据数组（同时仍然忽略返回值）：

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

4、使用 ajax 请求发送表单数据：

$.post("test.php", $("#testform").serialize());

5、输出来自请求页面 test.php 的结果（HTML 或 XML，取决于所返回的内容）：

$.post("test.php", function(data){
     alert("Data Loaded: " + data);
});

6、向页面 test.php 发送数据，并输出结果（HTML 或 XML，取决于所返回的内容）：

$.post("test.php", { name: "John", time: "2pm" },function(data){
     alert("Data Loaded: " + data);
});

7、获得 test.php 页面的内容，并存储为 XML对象，并通过 process() 这个 JavaScript 函数进行处理：

$.post("test.php", { name: "John", time: "2pm" },function(data){
      process(data);
}, "xml");

8、获得 test.php 页面返回的 json 格式的内容

$.post("test.php", { "func": "getNameAndTime" },function(data){
    alert(data.name); // John
    console.log(data.time); //  2pm
}, "json");       

2.3 load()接口

jQuery load() 方法是简单但强大的 AJAX 方法；load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：

$(selector).load(URL,data,callback);

• 必需的URL参数规定您希望加载的 URL。
• 可选的data参数规定与请求一同发送的查询字符串键/值对集合。
• 可选的callback参数是 load() 方法完成后所执行的函数名称。

例如：将文件demo_test.txt的内容加载到指定的div元素中：

$("#div1").load("demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数，例如，将"demo_test.txt"这个文件中 id=“p1” 的元素的内容，加载到指定的 <div>元素中：

$("#div1").load("demo_test.txt #p1");

此外，，回调函数可以设置不同的参数：

• responseTxt- 包含调用成功时的结果内容
• statusTxt- 包含调用的状态
• xhr- 包含 XMLHttpRequest 对象
  例如：

$("button").click(function(){
 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

load()方法也可以被全局对象调用，也可以被$直接调用，表示重新加载当前整个页面的数据。

load()
或者
$.load()

2.4 getJSON()接口

通过 HTTP GET 请求载入 JSON 数据。
语法：$.getJSON(url,[data],[callback])

• url:发送请求地址。
• data:待发送 Key/value 参数。
• callback:载入成功时回调函数。

3、全局ajax事件处理函数

全局ajax事件处理函数
ajaxComplete()
ajaxError()
ajaxSend()
ajaxStart()
ajaxStop()
ajaxSuccess()

jQuery提供的一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。这些都是全局函数，因此无论创建他们的代码位于何处，只要有Ajax请求时，就会触发他们。使用这些方法的每一步是获取一个页面元素的引用。

如果想使某个ajax不受全局方法的影响，那么可以在$.ajax(options)方法中，将参数中的global设置为false,如：

$.ajax({
	url:"test.html",
	global:false
});

3.1.ajaxStart()

AJAX 请求开始时执行函数。Ajax 事件。Jquery中当一个Ajax请求启动时，并且没有其他未完成的Ajax请求时，将调用ajaxStart()方法。
示例：
AJAX 请求开始时显示信息。

$("#loading").ajaxStart(function(){
   $(this).show();
});

3.2.ajaxStop()

AJAX 请求结束时执行函数。Ajax 事件。ajaxStop()方法则是在所有Ajax请求都完成时调用。
示例：
AJAX 请求结束后隐藏信息

$("#loading").ajaxStop(function(){
   $(this).hide();
});

应用：在开发的过程当中，一般会用它们来做页面等待进度图片的显示，即所有用ajax加载又不能很快加载完成的（有时页面很慢半天没显示），那么将自动调用ajaxStart显示一个等待的图片出来，等页面所有内容ajax加载完成，自动调用ajaxStop再关闭该层。

3.3 ajaxSend()

AJAX 请求发送前执行函数。XMLHttpRequest 对象和设置作为参数传递给回调函数。
示例：
AJAX 请求发送前显示信息

$("#msg").ajaxSend(function(evt, request, settings){
   $(this).append("<li>开始请求: " + settings.url + "</li>");
 });

3.4.ajaxSuccess()

AJAX 请求成功时执行函数。XMLHttpRequest 对象和设置作为参数传递给回调函数。
示例：
当 AJAX 请求成功后显示消息

$("#msg").ajaxSuccess(function(evt, request, settings){
   $(this).append("<li>请求成功!</li>");
 }); 

3.5.ajaxError()

AJAX 请求发生错误时执行函数。XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。
示例：
AJAX 请求失败时显示信息

$("#msg").ajaxError(function(event,request, settings){
     $(this).append("<li>出错页面:" + settings.url + "</li>");
});

3.6.ajaxComplete()

AJAX 请求完成时执行函数。XMLHttpRequest 对象和设置作为参数传递给回调函数。
示例：
AJAX 请求完成时执行函数

$("#msg").ajaxComplete(function(event,request, settings){
   $(this).append("<li>请求完成.</li>");
 });

3.7.ajax的状态描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
</head>
<body>
    <ul>
        <li>2</li>
        <li>3</li>
    </ul>
    <div></div>
    <script>
        $(document).ajaxComplete(function (d) {
            console.log('ajax请求完毕complete',d);
        })
        $(document).ajaxError(function (d) {
            console.log('ajax请求出错error',d);
        })
        $(document).ajaxSend(function (d) {
            console.log('ajax请求发送send',d);
        })
        $(document).ajaxStart(function (d) {
            console.log('ajax请求开始start',d);
        })
        $(document).ajaxStop(function (d) {
            console.log('ajax请求停止stop',d);
        })
        $(document).ajaxSuccess(function (d) {
            console.log('ajax请求成功success',d);
        })
        var baseURL="http://127.0.0.1:7788";
        $.ajax(baseURL+"/xxx",{
            success:function(data){console.log("1success",data)},
            error:function(data){console.log("1error",data)},
            complete:function(data){console.log("1complete",data)},
        });
        $.getJSON(baseURL+"/baseUser/findAll",
            function(data){console.log("2匿名",data)
        }).done(function(data){console.log("2done",data)
        }).fail(function(data){console.log("2fail",data)
        }).always(function(data){console.log("2always",data)
        });
        var pages = ["2.html","01-ajax的基本使用.html div"]//可以使用到1.html中的变量
        $("ul li").click(function(e){
            var index = $("ul li").index(this);
            $("div").load(pages[index])
        });       
/*
预期结果：
        ajax请求开始start
        ajax请求发送send
        ajax请求发送send
        2匿名
        2done
        2always
        ajax请求成功success
        ajax请求完毕complete
        1error
        ajax请求出错error
        1complete
        ajax请求完毕complete
        ajax请求停止stop
点击事件发生后：
        ajax请求开始start
        ajax请求发送send
        ajax请求成功success
        ajax请求完毕complete
        ajax请求停止stop
*/       
    </script>
</body>
</html>

4、自定义封装ajax接口

var myAjax = {
	get(url, success, error) {
	    $.ajax({
	      url: baseURL + url,
	      method: 'get',
	      headers: {
	        'Authorization': sessionStorage.getItem('token')
	      },
	      success,
	      error
	    });
	}
	post(url, params, success, error) {
	    $.ajax({
	      url: baseURL + url,
	      method: 'post',
	      data: qs.stringify(params),
	      headers: {
	        'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
	        'Authorization': sessionStorage.getItem('token')
	      },
	      success,
	      error
    });
  }
}

myAjax对象中有重新封装好的两个方法，
在封装好的get(){}方法中，该封装方法的请求方式是get请求，并且定义好了文件头部headers，还定义了两个回调函数，成功回调和失败回调。
在封装好的post(){}方法中，该封装方法的请求方式是post请求，并且可以将传进来的参数通过qs.stringify(params)方法转换为url格式，此外还定义好了文件头部headers，还定义了两个回调函数，成功回调和失败回调。
调用接口的方式如下

myAjax.post(url,params,success,error);