浅谈Ajax请求技术攻略

什么是Ajax请求技术？

Ajax是“Asynchronous Javascript And Xml”的缩写，即异步JavaScript和XML。它使得在页面无需刷新的情况下，与服务器进行数据交互成为可能。正式的定义是：通过JavaScript的XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。Ajax的出现无疑给Web开发带来了一种新的方式和思路。

Ajax请求的基本流程

Ajax请求基本流程如下：

创建XMLHttpRequest对象
发送请求
服务器处理请求
服务器给客户端返回数据
客户端解析数据
对解析后的数据进行操作（如更新页面）

Ajax请求示例1：使用jQuery框架发起Ajax请求

以使用jQuery框架发起Ajax请求为例子，代码如下：

$.ajax({
    url: '/example/ajax/test.html', //请求的url地址
    dataType: "json",   //返回格式为json
    async: true,//请求是否异步，默认为异步，这也是ajax重要特性
    data: { name: "accuphase", age: 23 }, //参数值
    type: "GET", //请求方式
    beforeSend: function() {
        //请求前的处理
    },
    success: function(req) {
        //请求成功时处理
    },
    complete: function() {
        //请求完成的处理
    },
    error: function() {
        //请求出错处理
    }
});

在这段代码中，我们使用了jQuery的ajax方法，并通过传递不同的参数实现了对不同API接口的请求。具体来说：

ajax()：为jQuery的ajax方法，该方法负责发起Http请求。
url: '/example/ajax/test.html'：为请求的url地址，如果请求本站资源可以省略域名。
dataType: "json"：为数据类型。可选值有：xml、html、text、json、jsonp、script。
async: true：请求是否异步，默认为异步。异步的优点在于，页面不用等待该请求的结果，而是可以继续执行其他操作。
data: { name: "accuphase", age: 23 }：为请求参数值对象。像这种非Get请求，参数值需要序列化为字符串。
type: "GET "：请求方式。常用的有：Get、Post、Put、Delete等。
beforeSend: function() {}：请求前的处理工作。这里可以配置loading等相关功能。
success: function(req) {}：请求成功时的处理。req为返回的数据。
complete: function() {}：请求完成后的处理。
error: function() {}：请求失败的处理。

Ajax请求示例2：自主实现Ajax请求

以自主实现Ajax请求为例子，代码如下：

function ajax(method, url, datas, callback) {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else { // 兼容性处理
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xhr.open(method, url, true);

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText);
        }
    }

    if (method == 'POST') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(datas);
    } else {
        xhr.send(); // GET请求无需传参
    }
}

这份代码实现了一个自主发起Ajax请求的函数，该函数需要传入请求方式（GET/POST）、后台处理接口、请求参数、请求成功的回调函数等相关参数，通过XmlHttpRequest对象发起Http请求，最终返回请求的结果。具体来说：

var xhr = null：创建一个XmlHttpRequest对象实例。
if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject('Microsoft.XMLHTTP');}：判断浏览器是否支持XmlHttpRequest对象，获取该对象实例。
xhr.open(method, url, true)：该方法指定Http请求的方式、请求的地址和是否异步实时请求的参数。
xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){callback(xhr.responseText);}}：绑定状态改变的监控事件，监控Http响应的返回结果，对返回数据进行回调处理。
if (method == 'POST') {xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send(datas);}：目前大部分请求都是 POST 和 GET 请求。更改 POST 请求的 content-type = 'application/x-www-form-urlencoded'。并设置请求参数。
else {xhr.send();}：当 GET 请求时，send()不需要传任何数据。