Ajax 介绍、JQuery中的Ajax常规使用

Ajax 介绍

MDN给出的一个解释。

Asynchronous(异步)JavaScript + XML,而不是技术本身,是2005年由Jesse James
Garrett的术语,描述了一个“新”的方法一起使用的现有技术,包括HTML或XHTML、层叠样式表,JavaScript,文档对象模型,XML、XSLT,最重要的是XMLHttpRequest对象。
当这些技术在Ajax模型中结合使用时，web应用程序能够快速、增量地更新用户界面，而无需重新加载整个浏览器页面。这使得应用程序对用户操作的响应更快、更灵敏。
虽然X在Ajax中代表XML，但是JSON比XML使用得更多，因为它有许多优点，比如更轻，是JavaScript的一部分。JSON和XML都用于打包Ajax模型中的信息。

XMLHttpRequest

XMLHttpRequest (XHR)是一个用于创建AJAX请求的JavaScript API。它的方法提供了在浏览器和服务器之间发送网络请求的能力。
使用XMLHttpRequest 来进行Ajax 请求。以下是代码实现。

<script>
	  // 构建xhr对象.此时状态为0
   var xhr = new XMLHttpRequest();
   //与服务器建立连接。此时状态为1,如果是get 方式请求的参数写在地址上，参数之间使用"&"符号隔开，请求体为null。post请求时候,数据参数写在请求体中。
   xhr.open("GET", "http://localhost:8080/Ajax/get?id=1&name=lisir");
      // 发送数据。
   xhr.send(null); 
   
 			{  // Post请求的写法。	post请求发送两次。依次是先发送响应头，再发送响应体。
 			// xhr.open("POST", "http://localhost:8080/Ajax/get");
   			   // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  post请求加上请求头类型。
   			  //xhr.send("id=1&name=lisir")  post请求写法。}
 
   // 设置返回数据类型。可以设置,可以不设置。
   xhr.responseType="json"; 
   // 启用监听状态改变事件处理函数。
   xhr.onreadystatechange = function () {
       if (this.readyState === 2) {
           // 2表示接收到响应头。
           console.log(xhr.getAllResponseHeaders());    //打印所有的响应头信息。
       }
       if (this.readyState === 4) {
           //3 就表示正在接受响应体。4表示响应体接收完毕。
           console.log(xhr.response);      //打印响应信息。
       }
   };
    // H5提供了onload方法。这个等同于xhr对象状态为4,客户端完全接收完服务器发送的响应信息。
    xhr.onload=function () {

    };
    </script>

JQuery中AJAX请求

JQuery库中对XMLHttpRequest 这个对象的AJAX请求过程进行了封装。使得用户使用起来更加方便。
JQuery中AJAX提供了一个底层接口$.ajax(url,options).当url是一个对象的时候。
ajax: function( url, options ) 会把url这个对象赋值给 options参数。

	// If url is an object, simulate pre-1.5 signature
	if ( typeof url === "object" ) {
		options = url;
		url = undefined;
	}

于是就有了通常的$.ajax使用方式 $.ajax({object});
Demo:

    $.ajax({
            url: "http://localhost:8080/Ajax/get", //访问的地址。
            type: "get",            // 请求的方法类型
            data: {                          // 客户端发送的数据。
                id: 1, name: "lisir", MaxAge: 1000
            },
            // dataType: "application/json", 这个数据类型 是服务端发给我们的数据类型。
            // contentType: "application/json", 这个类型是请求端发送给服务端的数据类型。不设置自动会处理。
            beforeSend: function (xhr) {
                //在所有的xhr对象进行open和send 操作之前。
                console.log("before", xhr);
            },
            success: function (res) {
                //请求成功之后。
                console.log(res);
            },
            error: function (xhr) {
                //请求失败。
                console.log("error", xhr);
            },
            complete: function (xhr) {
                // 无论请求成功还是失败,只要请求完成后就会执行。
                console.log("complete", xhr);
            }
        }
    );
  

由于get和post方法在实际工作中应用频繁于是就有了进一步的封装。【对$.ajax的封装】

$.get 和 $.post 方法。

function( url, data, callback, type ) 这里的type是响应体的类型。

Demo:

$.get("http://localhost:8080/Ajax/get", {id: 1, name: "lisir"}, function (res) {
	//请求成功后执行的回调函数。res代表响应的数据
}
," application/javascript ")   //设置响应体类型为js文件。

$.post("http://localhost:8080/Ajax/get", {id: 1, name: "lisir"}, function (res) {
	//请求成功后执行的回调函数。res代表响应的数据
}
," application/javascript ")   //设置响应体类型为js文件。

常见的还有$.getJSON(url, data, callback); //用于获取json数据。

$.getScript(url, callback); // 用于获取js文件。
JQuery源码如下：

getJSON: function( url, data, callback ) {
	return jQuery.get( url, data, callback, "json" );
},

getScript: function( url, callback ) {
	return jQuery.get( url, undefined, callback, "script" );
}

这两个方法就是在 $.get方法上进行的封装。[本质就是调用 $.get方法]

JQuery全局事件处理器。

这些方法用于注册事件处理器，用来处理页面上的任何 Ajax 请求，当某些事件触发后，这些事件处理器被调用。如何 jQuery.ajaxSetup() 中的 global 属性被设置为 true （这也是默认设置），那么，每个 Ajax 请求都会触发全局事件。注意：全局事件绝对不会被跨域（cross-domain）脚本或 JSONP 请求触发，和 global 属性的设置毫无关系。
针对每个Ajax请求而言。只要有Ajax发送请求、请求失败/成功、请求完成的时候都会触发相对应的函数。
$(document).ajaxSend(function() {})
$(document).ajaxError(function() {}) / $(document).ajaxSuccess(function() {})
$(document).ajaxComplete(function() {})
$(document)
.ajaxStart(function () {}) //针对是整个所有的ajax请求。所有ajax请求开始之前执行。
.ajaxStop(function () {}) //在所有ajax请求完成后才执行。