javascript基础：Ajax

一、Ajax介绍

Ajax,是AsynchronousJavaScript + XML的简写。这种技术能够让服务器请求额外的数据而无须卸载页面(即刷新),会带来更好的用户体验。 

Ajax技术核心是XMLHttpRequest对象(简称XHR)。

这是由微软首先引入的一个特性 ,其他浏览器提供商后来都提供了相同的实现 。在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架。XHR的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息 ,这就意味着,用户只要触发某一事件 ,在不刷新网页的情况下,更新服务器最新的数据。

虽然Ajax中的x代表的是XML,但Ajax通信和数据格式无关,也就是说这种技术不一定使用XML。 

二、创建 XMLHttpRequest对象

由于W3C与IE创建XMLHttpRequest的对象的方式不同，写一个兼容方法

function createXHR (){
    //IE7+、Firefox、Opera、Chrome 和 Safari 都支持原生的 XHR 对象,
    // 在这些浏览器中创建 XHR 对象可以直接实例化 XMLHttpRequest 即可。
    if (typeof XMLHttpRequest != 'undefined') {
        return new XMLHttpRequest();
    }
    else if (typeof ActiveXObject != 'undefined') {
        //如果是 IE6 及以下,那么我们必须还需要使用 ActiveX 对象通过 MSXML 库来实现。
        //在低版IE 浏览器可能会遇到三种不同版的XHR对象,即 MSXML2.XMLHttp、 MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0
        var versions = [
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < versions.length; i ++) {
            //如果不支持某个版本的话直接返回就会报错阻塞程序，所以这里采用抛错机制防止程序阻塞
            try {
                return new ActiveXObject(version[i]);
            }
            catch (e) { //跳过
            }
        }
    }
    else {
        throw new Error('您的浏览器不支持 XHR 对象!');
    }
}

三、发送请求

1、同步请求

//创建一个XMLHttpRequest对象
var xhr =  createXHR();
//在使用 XHR 对象时,先必须调用 open()方法
// 它接受三个参数:要发送的请求类型(get、 post)、请求的 URL 和表示是否异步。
//open()方法并不会真正发送请求,而只是启动一个请求以备发送。
xhr.open('get', 'url', false);
//通过 send()方法进行 发送请求
// send()方法接受一个参数,作为请求主体发送的数据。
// 如果不需要则,必须填 null。 执行 send()方法之后,请求就会发送到服务器上。
xhr.send(null); //发送请求

2、异步请求

//创建一个XMLHttpRequest对象
var xhr = createXHR();
//使用异步调用的时候, 会触发 readystatechange 事件
//状态改变就会调用该方法
xhr.onreadystatechange = function () {
    //在此根据readyState的不同进行不同的操作
    /*
    xhr.readyState == 0;未初始化 尚未调用 open()方法
    xhr.readyState == 1;启动    已经调用 open()方法,但尚 调用 send()方法
    xhr.readyState == 2;发送    已经调用 send()方法,但尚 接受响应
    xhr.readyState == 3;接受    已经接受到部分响应数据
    xhr.readyState == 4;完成    表示已经接受到全部响应数据,而且可以使用
    */
};
xhr.open('get', 'demo.php?rand=' + Math.random(), true);
xhr.send(null);

说明：

当请求发送到服务器端,收到响应后,响应的数据会自动填充XHR对象的属性。那么一共有四个属性: 

/*
 xhr.responseText ;作为响应主体被返回的文
 xhr.responseXML;如果响应主体内容类型是"text/xml"或"application/xml", 则返回包含响应数据的 XML DOM 文档
 xhr.status;响应的HTTP状态
 xhr.statusText;HTTP 状态的说明
 */
//如果返回成功了
if (xhr.status == 200) {
    //调出服务器返回的数据
    alert(xhr.responseText);
} 
else {
    alert('数据返回失败!状态代码:' + xhr.status + '状态信息:' + xhr.statusText); 
}

xhr.onreadystatechange = function () {
    if (xhr.status == 200) {//服务器的响应状态
        if (xhr.readyState == 4) {//异步请求的状态
            alert(xhr.responseText);
        }
    }
    else {
        alert('状态代码:' + xhr.status + '状态信息:'
            + xhr.statusText);
    }
};

3、get请求与post请求

//GET 请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查 询字符串参数追加到 URL 的 尾,以便提交给服务器。
xhr.open('get', 'url?rand=' + Math.random() + '&name=Koo', true);

//POST 请求的数据,不会跟在 URL 的尾巴上,而是通过 send()方法向服务器提 交数据。
xhr.open('post', 'url', true);
xhr.send('name=Lee&age=100');

//通过编码解决url中的特殊字符和中文问题
function addURLParam(url, name, value) {
    url += (url.indexOf('?') == -1 ? '?' : '&');
    //判断的 url 是否有已有参数
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value); alert(url);
    return url;
}

4、获取响应头信息和设置请求头信息

//使用 getResponseHeader()获取单个响应头信息
alert(xhr.getResponseHeader('Content-Type'));
//使用 getAllResponseHeaders()获取整个响应头信息
alert(xhr.getAllResponseHeaders());
//使用 setRequestHeader()设置单个请求头信息
xhr.setRequestHeader('MyHeader', 'Lee'); //放在 open 方法之后,send 方法之前

四、封装 Ajax

因为 Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用 GET 还是 POST;到底是使用同步还是异步等等,我们需要封装一个 Ajax 函数,来方便我们调用。

function ajax(obj) {
    var xhr = createXHR();
    obj.url = obj.url + '?rand=' + Math.random();
    obj.data = params(obj.data);
    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();
        };
    }
    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 () {
        if (xhr.status == 200) {
            obj.success(xhr.responseText); //回调
        }
        else {
            alert('数据返回失败!状态代码:' + xhr.status + ',状态信息:' + xhr.statusText);
        }
    }
}

function params(data) {
    var arr = [];
    for (var i = 0;i < data.length; i++) {
        arr.push(encodeURIComponent(data[i]) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');
}

//调用
ajax({
    method : 'get', 
    url : 'demo.php', 
    data : {
        'name' : 'Lee',
        'age' : 100 
    },
    success : function (text) { 
        alert(text);
    },
    async : true 
});