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 });