初识ajax

以前在学校总是会听到阿贾克斯的大名，但是作为一只小白，我根本不知到这是啥，近期，学到了ajax，发现它真是太强大了。

现在，来梳理一下。

ajax的工作流程：
1.创建ajax对象，对于IE5、6，IE提供ActiveXObject来创建ajax对象，IE7及以上和其它浏览器则使用XMLHttpRequest来创建ajax对象。具体使用方法：

var xhr = null;if(window.XMLHttpRequest){    xhr = new XMLHttpRequest();}else{    xhr = new ActiveXObject('Microsoft.XMLHTTP');}

2.与服务器建立连接

使用open方法，该方法有三个重要参数，第一个参数为请求方式（请求方式一般有get和post两种）例子使用get方式；第二个参数为请求的地址（注意：必须为同域下的文件，因为ajax不支持跨域访问，而且必须通过建立服务器的方式访问，否则访问不成功），例子使用同级目录下的a.txt文件；第三个参数表示是否使用异步的方式，一般为true，可以不写，因为默认就是true，例子不写。

xhr.open('get', 'a.txt');

3.发送请求

使用send方法，该方法是否有参数和open方法的第一个参数（请求方式有关），如果请求方式为get，那么可以不传参数，也可以传null；如果请求方式为post，那么参数为传递的数据（数据类型一般为：JSON格式），并且要声明头部信息：
xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);。
例子传递null。

xhr.send(null);

4.判断状态是否有改变，利用onreadystatechange事件
该事件里有几个比较重要的状态，

rendyState –>
0 （ 未初始化） 还没有调用open()方法
1 （ 载入） 已调用send()方法， 正在发送请求
2 （ 载入完成） send()方法完成， 已收到全部响应内容
3 （ 解析） 正在解析响应内容
4 （ 完成） 响应内容解析完成， 可以在客户端调用了

我们一般会用到4这个状态，它表示服务器已经响应，咱可以在客户端使用，这个状态之后，我们还要判断服务器是否响应成功（是否有内容返回），利用status的值是否是200来判断。

完整判断过程：

xhr.onreadstatechange = function(){    if(xhr.readyState==4 && xhr.status==200){        dosomethings...;    }};

ajax完整代码：

/** * ajax异步请求方法 * @param {String}   method：请求方式，有get和post两种 * @param {String}      url：要请求的地址 * @param {JSON}       data：请求的数据（null或者JSON格式） * @param {Function}     fn：回调函数 */function ajax(method, url, data, fn){    // 1. 创建ajax对象    var xhr = null;    if(window.XMLHttpRequest){          // IE7及以上高版本IE和其它浏览器使用        xhr = new XMLHttpRequest();    }else{                              // IE5、IE6使用            xhr = new ActiveXObject('Microsoft.XMLHTTP');    }    // 2.与服务器建立连接    xhr.open(method, url);    // 判断是否是post方式请求    if(method.toLowerCase() == 'post'){        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')    }    // 3.发送数据    xhr.send(data);    // 4.判断状态是否改变（监听状态是否改变的函数）    xhr.onreadystatechange = function(){        if(xhr.readyState==4 && xhr.status==200){            var txt = xhr.responseText; // 获得服务器返回的内容（纯文本格式）            if(fn){                         // 判断是否有传入回调函数                fn(txt);                    // 若有回调函数，将服务器返回的内容作为回调函数的参数传过去            }        }    };}