第一百二十八节，JavaScript，Ajax

JavaScript，Ajax

 

学习要点：

1.XMLHttpRequest

2.GET与POST

3.封装Ajax

 

2005年Jesse James Garrett发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫：Ajax，是Asynchronous JavaScript + XML的简写。这种技术可以想服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。

 

一．XMLHttpRequest对象

Ajax技术核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其余浏览器提供商后来都提供了相同的实现。在XHR出现以前，Ajax式的通讯必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。

XHR的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。可以以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的状况下，更新服务器最新的数据。

虽然Ajax中的x表明的是XML，但Ajax通讯和数据格式无关，也就是说这种技术不必定使用XML。

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象，在这些浏览器中建立XHR对象能够直接实例化XMLHttpRequest便可。

XMLHttpRequest()建立xhr对象

var xhr = new XMLHttpRequest();   //建立xhr对象
alert(xhr);    //打印对象

若是是IE6及如下，那么咱们必须还须要使用ActiveX对象经过MSXML库来实现。在低版本IE浏览器可能会遇到三种不一样版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。咱们能够编写一个函数。

兼容IE低版本建立xhr对象

var xhr = new createXHR(); //执行兼容IE低版本建立xhr对象函数
alert(xhr); //打印xhr对象


//兼容IE低版本建立xhr对象,函数
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest建立xhr对象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr对象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判断IE低版本的3种模式是否支持
        var versions = [  //数组，3种模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循环3种模式
            try {
                return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
            } catch (e) {
                //跳过
            }
        }
    } else {  //若是上面两种都不能建立xhr对象
        //建立错误对象，抛出错误
        throw new Error('您的浏览器不支持XHR对象！');
    }
}

 

建立了XHR对象，在使用XHR对象时，先必须调用open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的URL和表示是否异步。

open()方法，准备发送http请求，3个参数，参数1请求类型get或post，参数2请求的url能够是动态的也能够是静态的（如：demo.php，demo.html）,参数3表示是否异步/false同步/true异步
使用方式：
XHR对象.open('get','demo.php',false)

var xhr = new createXHR(); //执行兼容IE低版本建立xhr对象函数
//open()方法，准备发送http请求，3个参数，参数1请求类型get或post，参数2请求的url能够是动态的也能够是静态的（如：demo.php，demo.html）,参数3表示是否异步/false同步/true异步
xhr.open('get','demo.html',false);  //准备发送


//兼容IE低版本建立xhr对象,函数
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest建立xhr对象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr对象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判断IE低版本的3种模式是否支持
        var versions = [  //数组，3种模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循环3种模式
            try {
                return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
            } catch (e) {
                //跳过
            }
        }
    } else {  //若是上面两种都不能建立xhr对象
        //建立错误对象，抛出错误
        throw new Error('您的浏览器不支持XHR对象！');
    }
}

open()方法并不会真正发送请求，而只是启动一个请求以备发送。经过send()方法进行发送请求，send()方法接受一个参数，做为请求主体发送的数据。若是不须要则，必须填null。执行send()方法以后，请求就会发送到服务器上。

send()方法方法，发送http请求，1个参数，请求主体发送的数据,若是不须要则，必须填null
使用方式：
XHR对象.send(null)

var xhr = new createXHR(); //执行兼容IE低版本建立xhr对象函数
//open()方法，准备发送http请求，3个参数，参数1请求类型get或post，参数2请求的url能够是动态的也能够是静态的（如：demo.php，demo.html）,参数3表示是否异步/false同步/true异步
xhr.open('get','demo.py',false);  //准备发送
//send()方法方法，发送http请求，1个参数，请求主体发送的数据,若是不须要则，必须填null
xhr.send(null); //发送请求


//兼容IE低版本建立xhr对象,函数
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest建立xhr对象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr对象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判断IE低版本的3种模式是否支持
        var versions = [  //数组，3种模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循环3种模式
            try {
                return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
            } catch (e) {
                //跳过
            }
        }
    } else {  //若是上面两种都不能建立xhr对象
        //建立错误对象，抛出错误
        throw new Error('您的浏览器不支持XHR对象！');
    }
}

 

当send()方法请求发送到服务器端，收到响应后，响应的数据会自动填充XHR对象的属性。那么一共有四个属性：

 

属性名	说明
responseText	做为响应主体被返回的文本
responseXML	若是响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML DOM文档
status	响应的HTTP状态
statusText	HTTP状态的说明

接受响应以后，第一步检查status属性，以肯定响应已经成功返回。通常以HTTP状态代码为200做为成功的标志。除了成功的状态代码，还有一些别的：

HTTP状态码	状态字符串	说明
200	OK	服务器成功返回了页面
400	Bad Request	语法错误致使服务器不识别
401	Unauthorized	请求须要用户认证
404	Not found	指定的URL在服务器上找不到
500	Internal Server Error	服务器遇到意外错误，没法完成请求
503	ServiceUnavailable	因为服务器过载或维护致使没法完成请求

responseText属性，做为响应主体被返回的文本

var xhr = new createXHR(); //执行兼容IE低版本建立xhr对象函数
//open()方法，准备发送http请求，3个参数，参数1请求类型get或post，参数2请求的url能够是动态的也能够是静态的（如：demo.php，demo.html）,参数3表示是否异步/false同步/true异步
xhr.open('get','demo.html',false);  //准备发送
//send()方法方法，发送http请求，1个参数，请求主体发送的数据,若是不须要则，必须填null
xhr.send(null); //发送请求
//responseText属性，做为响应主体被返回的文本
alert(xhr.responseText);


//兼容IE低版本建立xhr对象,函数
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest建立xhr对象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr对象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判断IE低版本的3种模式是否支持
        var versions = [  //数组，3种模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循环3种模式
            try {
                return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
            } catch (e) {
                //跳过
            }
        }
    } else {  //若是上面两种都不能建立xhr对象
        //建立错误对象，抛出错误
        throw new Error('您的浏览器不支持XHR对象！');
    }
}

其余属性见上表，同理

 

动态获取请求数据，结合点击事件

addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面时激发函数
    var xhr = new createXHR();  //执行兼容IE低版本建立xhr对象函数
    xhr.open('get', 'demo.html', false);    //设置了同步，准备请求
    xhr.send(null);  //发送请求
    if (xhr.status == 200) {                    //若是返回成功了，判断状态码是否等于200
        alert(xhr.responseText);                //调出服务器返回的数据
    } else {
        alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
    }
});



//兼容IE低版本建立xhr对象,函数
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest建立xhr对象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr对象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判断IE低版本的3种模式是否支持
        var versions = [  //数组，3种模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循环3种模式
            try {
                return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
            } catch (e) {
                //跳过
            }
        }
    } else {  //若是上面两种都不能建立xhr对象
        //建立错误对象，抛出错误
        throw new Error('您的浏览器不支持XHR对象！');
    }
}

//跨浏览器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
    //判断浏览器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判断若是浏览器是IE9如下，就用IE的方法attachEvent添加事件
        //将事件名称和事件函数传入建立对象
        obj.attachEvent('on' + type, fn);
    }
}

 

open()方法异步调用【经常使用】

同步调用当然简单，但使用异步调用才是咱们真正经常使用的手段。使用异步调用的时候，须要触发readystatechange事件，而后检测readyState属性便可。这个属性有五个值：

readyState属性

值	状态	说明
0	未初始化	还没有调用open()方法
1	启动	已经调用open()方法，但还没有调用send()方法
2	发送	已经调用send()方法，但还没有接受响应
3	接受	已经接受到部分响应数据
4	完成	已经接受到所有响应数据，并且可使用

异步调用

//注意：引入了开源库json2，若是浏览器版本过低不支持JSON对象，经过一个开源库json2.js来模拟执行，若是支持JSON对象就用JSON对象

addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
    var xhr = new createXHR();  //执行建立XHR对象函数，建立XHR对象
    xhr.open('get', 'demo.html', true); //open()方法异步调用,准备请求
    xhr.send(null);  //发送请求
    xhr.onreadystatechange = function () {  //当请求时执行函数
        if (xhr.readyState == 4) {  //判断已经接受到所有响应数据，并且可使用
            if (xhr.status == 200) {  //判断状态码为200
                alert(xhr.responseText); //获取请求页面内容
            } else {
                //不然打印错误
                alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
            }
        }
    };
});


//兼容IE低版本建立xhr对象,函数
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest建立xhr对象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr对象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判断IE低版本的3种模式是否支持
        var versions = [  //数组，3种模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循环3种模式
            try {
                return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
            } catch (e) {
                //跳过
            }
        }
    } else {  //若是上面两种都不能建立xhr对象
        //建立错误对象，抛出错误
        throw new Error('您的浏览器不支持XHR对象！');
    }
}

//跨浏览器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
    //判断浏览器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判断若是浏览器是IE9如下，就用IE的方法attachEvent添加事件
        //将事件名称和事件函数传入建立对象
        obj.attachEvent('on' + type, fn);
    }
}

PS：使用abort()方法能够取消异步请求，放在send()方法以前会报错。放在responseText以前会获得一个空值。

 

注意若是请求的url是动态页面，获取页面数据时，不是实时的解决方式

xhr.open('get', 'demo.php?rand=' + Math.random(), true);

 

二．GET与POST

在提供服务器请求的过程当中，有两种方式，分别是：GET和POST。在Ajax使用的过程当中，GET的使用频率要比POST高。

在web程序上，GET通常是URL提交请求，好比：demo.php?name=lee&age=100
POST通常是表单提交，好比：<form method="post">...

在了解这两种请求方式前，咱们先了解一下HTTP头部信息，包含服务器返回的响应头信息和客户端发送出去的请求头信息。咱们能够获取响应头信息或者设置请求头信息。咱们能够在Firefox浏览器的firebug查看这些信息。

两种头信息

响应头信息：服务器返回的信息，客户端能够获取，但不能够设置
请求头信息：客户端发送的信息，客户端能够设置，但不能够获取

获取响应头信息

getAllResponseHeaders()方法，获取整个响应头信息
使用方式
xhr对象.getAllResponseHeaders()

//注意：引入了开源库json2，若是浏览器版本过低不支持JSON对象，经过一个开源库json2.js来模拟执行，若是支持JSON对象就用JSON对象

addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
    var xhr = new createXHR();  //执行建立XHR对象函数，建立XHR对象
    xhr.open('get', 'demo.html', true); //open()方法异步调用,准备请求
    xhr.send(null);  //发送请求
    xhr.onreadystatechange = function () {  //当请求时执行函数
        if (xhr.readyState == 4) {  //判断已经接受到所有响应数据，并且可使用
            if (xhr.status == 200) {  //判断状态码为200
                
                alert(xhr.getAllResponseHeaders()); //getAllResponseHeaders()方法，获取整个响应头信息
                
            } else {
                //不然打印错误
                alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
            }
        }
    };
});


//兼容IE低版本建立xhr对象,函数
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest建立xhr对象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr对象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判断IE低版本的3种模式是否支持
        var versions = [  //数组，3种模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循环3种模式
            try {
                return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
            } catch (e) {
                //跳过
            }
        }
    } else {  //若是上面两种都不能建立xhr对象
        //建立错误对象，抛出错误
        throw new Error('您的浏览器不支持XHR对象！');
    }
}

//跨浏览器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
    //判断浏览器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判断若是浏览器是IE9如下，就用IE的方法attachEvent添加事件
        //将事件名称和事件函数传入建立对象
        obj.attachEvent('on' + type, fn);
    }
}

 

getResponseHeader()方法，获取单个响应头信息,参数是要获取头信息的名称
使用方式
xhr对象.getResponseHeader('要获取头信息的名称')

//注意：引入了开源库json2，若是浏览器版本过低不支持JSON对象，经过一个开源库json2.js来模拟执行，若是支持JSON对象就用JSON对象

addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
    var xhr = new createXHR();  //执行建立XHR对象函数，建立XHR对象
    xhr.open('get', 'demo.html', true); //open()方法异步调用,准备请求
    xhr.send(null);  //发送请求
    xhr.onreadystatechange = function () {  //当请求时执行函数
        if (xhr.readyState == 4) {  //判断已经接受到所有响应数据，并且可使用
            if (xhr.status == 200) {  //判断状态码为200

                alert(xhr.getResponseHeader('Content-Type')); //getResponseHeader()方法，获取单个响应头信息,参数是要获取头信息的名称

            } else {
                //不然打印错误
                alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
            }
        }
    };
});


//兼容IE低版本建立xhr对象,函数
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest建立xhr对象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr对象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判断IE低版本的3种模式是否支持
        var versions = [  //数组，3种模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循环3种模式
            try {
                return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
            } catch (e) {
                //跳过
            }
        }
    } else {  //若是上面两种都不能建立xhr对象
        //建立错误对象，抛出错误
        throw new Error('您的浏览器不支持XHR对象！');
    }
}

//跨浏览器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
    //判断浏览器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判断若是浏览器是IE9如下，就用IE的方法attachEvent添加事件
        //将事件名称和事件函数传入建立对象
        obj.attachEvent('on' + type, fn);
    }
}

 

设置单个请求头信息

setRequestHeader()方法，设置单个请求头信息,两个参数，要设置的头信息名称和值
使用方式
xhr对象.setRequestHeader('头信息名称','值')

注意：放在open方法以后，send方法以前

//注意：引入了开源库json2，若是浏览器版本过低不支持JSON对象，经过一个开源库json2.js来模拟执行，若是支持JSON对象就用JSON对象

addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
    var xhr = new createXHR();  //执行建立XHR对象函数，建立XHR对象
    xhr.open('get', 'demo.html', true); //open()方法异步调用,准备请求

    //setRequestHeader()方法，设置单个请求头信息,两个参数，要设置的头信息名称和值
    xhr.setRequestHeader('MyHeader', 'Lee');        //放在open方法以后，send方法以前
    
    xhr.send(null);  //发送请求
    xhr.onreadystatechange = function () {  //当请求时执行函数
        if (xhr.readyState == 4) {  //判断已经接受到所有响应数据，并且可使用
            if (xhr.status == 200) {  //判断状态码为200
                //alert(xhr.getAllResponseHeaders()); //获取整个响应头信息
            } else {
                //不然打印错误
                alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
            }
        }
    };
});


//兼容IE低版本建立xhr对象,函数
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest建立xhr对象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr对象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判断IE低版本的3种模式是否支持
        var versions = [  //数组，3种模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循环3种模式
            try {
                return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
            } catch (e) {
                //跳过
            }
        }
    } else {  //若是上面两种都不能建立xhr对象
        //建立错误对象，抛出错误
        throw new Error('您的浏览器不支持XHR对象！');
    }
}

//跨浏览器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
    //判断浏览器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判断若是浏览器是IE9如下，就用IE的方法attachEvent添加事件
        //将事件名称和事件函数传入建立对象
        obj.attachEvent('on' + type, fn);
    }
}

PS：咱们只能够获取服务器返回回来响应头信息，没法获取向服务器提交的请求头信息，天然自定义的请求头，在JavaScript端是没法获取到的。

 

 

GET请求

GET请求是最多见的请求类型，最经常使用于向服务器查询某些信息。必要时，能够将查询字符串参数追加到URL的末尾，以便提交给服务器。

xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);

经过URL的末尾提交数据，能够经过动态页面获取提交的数据

 

经过URL后的问号给服务器传递键值对数据，服务器接收到返回响应数据。特殊字符传参产生的问题可使用encodeURIComponent()进行编码处理，中文字符的返回及传参，能够将页面保存和设置为utf-8格式便可。

var url = 'demo.php?rand=' + Math.random();
url = addURLParam(url,'name','lguix');
url = addURLParam(url,'aeg',100);

//一个通用的URL提交函数
function addURLParam(url, name, value) {
    url += (url.indexOf('?') == -1 ? '?' : '&');            //判断的url是否有已有参数
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
    alert(url);
    return url;
}

PS：当没有encodeURIComponent()方法时，在一些特殊字符好比“&”，会出现错误致使没法获取。

 

POST请求

POST请求能够包含很是多的数据，咱们在使用表单提交的时候，不少就是使用的POST传输方式。

//注意：引入了开源库json2，若是浏览器版本过低不支持JSON对象，经过一个开源库json2.js来模拟执行，若是支持JSON对象就用JSON对象

addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
    var xhr = new createXHR();  //执行建立XHR对象函数，建立XHR对象
    xhr.open('post', 'demo.php', true); //open()方法异步调用,准备请求

而发送POST请求的数据，不会跟在URL的尾巴上，而是经过send()方法向服务器提交数据。

//注意：引入了开源库json2，若是浏览器版本过低不支持JSON对象，经过一个开源库json2.js来模拟执行，若是支持JSON对象就用JSON对象

addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
    var xhr = new createXHR();  //执行建立XHR对象函数，建立XHR对象
    xhr.open('post', 'demo.php', true); //open()方法异步调用,准备请求
    xhr.send('name=Lee&age=100'); //发送

通常来讲，向服务器发送POST请求因为解析机制的缘由，须要进行特别的处理。由于POST请求和Web表单提交是不一样的，须要使用XHR来模仿表单提交。

修改响应头信息来模拟

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

PS：从性能上来说POST请求比GET请求消耗更多一些，用相同数据比较，GET最多比POST快两倍。

 

上一节课的JSON也可使用Ajax来回调访问。

var url = 'demo.json?rand=' + Math.random();
var box = JSON.parse(xhr.responseText);

 

三．封装Ajax

由于Ajax使用起来比较麻烦，主要就是参数问题，好比到底使用GET仍是POST；究竟是使用同步仍是异步等等，咱们须要封装一个Ajax函数，来方便咱们调用。

 

//注意：引入了开源库json2，若是浏览器版本过低不支持JSON对象，经过一个开源库json2.js来模拟执行，若是支持JSON对象就用JSON对象

//封装ajax
function ajax(obj) {  //接收数据对象
    var xhr = new createXHR();  //执行建立xhr对象函数
    //数据对象里的url加上?rand=，在加上Math.random()
    obj.url = obj.url + '?rand=' + Math.random();
    //数据对象里的data键和值对象，执行名值对编码函数
    obj.data = params(obj.data); //接收名值对编码后而且格式化分隔符后的数组
    //判断发送方式是不是get，url里的？索引位置是不是负一。若是不是执行后面
    if (obj.method === 'get') obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
    //判断发送模式若是是异步
    if (obj.async === true) {
        //添加一个加载事件
        xhr.onreadystatechange = function () {
            //判断已经接受到所有响应数据，并且可使用
            if (xhr.readyState == 4) callback(); //执行callback()函数
        };
    }
    xhr.open(obj.method, obj.url, obj.async);
    if (obj.method === 'post') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(obj.data);
    } else {
        xhr.send(null);
    }
    if (obj.async === false) {
        callback();
    }
    function callback() { //callback()函数
        if (xhr.status == 200) {  //判断状态码若是是200
            //将获取到的页面内容，传入回调函数
            obj.success(xhr.responseText);            //回调
        } else {
            alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
        }
    }
}

//调用ajax
addEvent(document, 'click', function () {        //IE6须要重写addEvent
    ajax({  //数据对象
        method: 'get',     //执行ajax封装函数，将一个对象传入封装函数
        url: 'demo.html',   //请求url
        data: {
            'name': 'Lee',  //url键值
            'age': 100     //url键值
        },
        success: function (text) {  //接收回调函数
            alert(text);  //打印回调返回的内容
        },
        async: true  //true异步调用
    });
});

//名值对编码
function params(data) {  //接收数据对象里的data键和值对象
    var arr = []; //建立数组
    for (var i in data) { //循环数据对象里的data键和值对象
        //将每次循环的对象名称 = 加上 对应名称的值，添加到arr数组
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');  //将数组格式化分隔符后返回
}


//兼容IE低版本建立xhr对象,函数
function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest建立xhr对象是否支持，
        return new XMLHttpRequest();  //若是支持，建立xhr对象返回
    } else if (typeof ActiveXObject != 'undefined') { //若是不支持，判断IE低版本的3种模式是否支持
        var versions = [  //数组，3种模式
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i++) {   //循环3种模式
            try {
                return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
            } catch (e) {
                //跳过
            }
        }
    } else {  //若是上面两种都不能建立xhr对象
        //建立错误对象，抛出错误
        throw new Error('您的浏览器不支持XHR对象！');
    }
}

//跨浏览器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
    //判断浏览器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判断若是浏览器是IE9如下，就用IE的方法attachEvent添加事件
        //将事件名称和事件函数传入建立对象
        obj.attachEvent('on' + type, fn);
    }
}

PS：封装Ajax并非一开始就造成以上的形态，须要通过屡次变化而成。