ajax基础

ajax 的全称是AsynchronousJavaScript and XML，其中，Asynchronous 是异步的意思，
它有别于传统web开发中采用的同步的方式。

同步和异步

异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，
它传输的时候要求接受方和发送方的时钟是保持一致的。

举个例子来说同步和异步，
同步就好像我们买楼一次性支付，而异步就是买楼分期付款。
所以当我们把这种生活中的概念化解释转移到理解Ajax异步上来就发现，
它是通过这样一种异步的方式来让用户更加收益，也就是说可以让用户的有更好的体验性。其实这也是Ajax的意义所在。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，
然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制，是一种支持异步请求的技术。
简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。
达到无刷新的效果。

XMLHttpRequest的常见属性

readystatechange时间用来检测每次状态变化后readystate的值。

readystate属性表示请求/响应过程的当前活动阶段 该属性可取的值如下

0：未初始化。尚未调用open()方法

1：启动。已经调用open()方法，但尚未接受响应

2：发送。已经调用send()方法

3：接收。已经接收到部分响应数据

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了

status:响应的http状态
statusText:HTTP状态的说明
responseText：作为响应主体被返回的文本

ajax的常见写法

创建xhr对象

function createXHR(){
    if(typeof XMLHttpRequest!="undefined"){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject!="undefined"){
        //ie7之前
        if(typeof arguments.callee.activeXString!="string"){
            var versions=[
                "MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"
            ],
            i,len;
            for ( i = 0,len=versions.length; i < len; i++) {
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString=versions[i];
                    break;
                }catch(ex){
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("no XHR Object available");
    }
}

利用ajax发送get请求

var ajaxGet=function(url,callback){
    var xhr=createXHR();
    xhr.onreadystatechange=function(){
        if (xhr.readyState==4) {
            if (xhr.status>=200&&xhr.status<300||xhr.status==304) {
                callback(JSON.parse(responseText));
            }else{
                alert("request was unsuccessful:"+xhr.status);
            }
        }
    }
    xhr.open('get',url,true);
    xhr.send(null);
}