浅谈ajax请求技术

浅谈Ajax请求技术攻略

什么是Ajax请求技术？

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

Ajax请求的基本流程

Ajax请求基本流程如下：

1. 创建XMLHttpRequest对象

2. 发送请求

3. 服务器处理请求

4. 服务器给客户端返回数据

5. 客户端解析数据

6. 对解析后的数据进行操作（如更新页面）

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()不需要传任何数据。

总结

Ajax请求技术易于学习，灵活高效，并且不需要插件的支持，因此受到了广泛的关注和应用。Ajax无疑是现代Web开发最具有活力和追求的Web新变革。无论是在性能上，还是在用户体验上，都具有非常明显的优势，希望以后的你也能在应用中加以运用。