前端Ajax操作总结

发表于 | 更新于: | 分类于 | 阅读次数:

2017-09-21更新

Jquery实现Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//测试Jquery的Ajax请求
var testAjax = $('#test-ajax');
testAjax.click(function (event) {
    $.ajax({
        method: 'POST',
        url: '/about',
        cache: false,
        success: function (res) {
            alert('使用jquery发送ajax请求成功，返回为：' + res);
        },
        error: function (res) {
            alert('ajax出错');
        }
    });
});

原生Javascript实现Ajax

xhr对象创建

首先检测原生XHR对象是否存在，如果存在则返回它的新实例。如果原生对象不存在，则检测ActiveX对象。如果这两种对象都不存在，就抛出一个错误。

1
2
//IE5、IE6使用ActiveXObject建立xhr对象
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function createXHR(){
    if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();
    }else if(typeof argument.callee.activeXString != 'string'){
        var versions = ['MXSML2.XMLHTTP','MXSML2.XMLHttp.3.0','MXSML2.XMLHttp.6.0'];
        var i len;
        for(i = 0;len=versions.length;i<len;i++){
            try{
                new ActiveXObject(versions[i]);
                argument.callee.activeXString = versions[i];
            }catch{
                <!-- 跳过 -->
            }
        }
        return new ActiveXObject(argument.callee.activeXString);
    }else{
        throw new Error("没有XHR对象存在");
    }
}

xhr用法

先上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(this.readyState == 4){
        if((this.status >= 200 && this.status < 300) || this.status == 304){
            //处理response
        }else{
            //处理error
        }

    }
}
xhr.open('get','/xhr',true);
xhr.send();

发送数据

在使用XHR对象时，要调用的第一个方法是open()，open(get/post,url,false/true)
它接受3个参数：

  1. 请求类型:最常用的就是get和post
  2. 请求路径：就是要请求的操作的文件的url
  3. 是否异步发送的布尔值

xhr.open('get','/xhr',true);,url相对于执行代码的当前页面（当然也可以使用绝对路径）,调用open()方法并不会真正发送请求，而只是启动一个请求以备发送

要发送特定的请求,必须调用send()方法: xhr.send();，send()方法接收一个参数，即要作为请求主体发送的数据。

异步处理

发送异步请求，才能让JavaScript 继续执行而不必等待响应。此时，可以检测 XHR 对象的 readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

  • 0：未初始化。尚未调用open()方法。
  • 1：启动。已经调用open()方法，但尚未调用send()方法。
  • 2：发送。已经调用send()方法，但尚未接收到响应。
  • 3：接收。已经接收到部分响应数据。
  • 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常我们只对readyState值为4的阶段感兴趣，因为这时所有数据都已经就绪。但必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

在接收到响应之前还可以调用abort()方法来取消异步请求,xhr.abort();

响应处理

在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性如下：
responseText：作为响应主体被返回的文本。
responseXML：如果响应的内容类型是”text/xml”或”application/xml”，这个属性中将保存包含着响应数据的XML DOM文档。
status：响应的HTTP状态。
statusText：HTTP状态的说明

XMLHttpRequest 2级

XMLHttpRequest2级使用方法，无需检查readyState状态

1
2
3
4
5
6
7
8
9
10
11
//XMLHttpRequest2级使用方法 无需检查readyState状态
var xhr = new XMLHttpRequest();
xhr.onload = function(){
    if((this.status >= 200 && this.status < 300) || this.status == 304>){
        //处理response
    }else{
        //处理error
    }
}
xhr.open('get','/xhr',true);
xhr.send();