AJAX 上

学习要点
1 XMLHttpRequest
2 GET与POST
3 封装Ajax

Ajax技术核心是XMLHttpRequest，简称为XHR。
XHR的出现，意味着，用户只要触发某事件，在不刷新网页的情况 下，更新服务器最新的数据。
虽然Ajax中的X代表的是XML，但Ajax通信和数据格式无关，也就是说这种技术 不一定使用XML.

var xhr= new XMLHttpRequest();
alert(xhr);    //XMLHttpRequest

//服务端测试
如果是IE6及以下，那我们必须还需要使用ActiveX库来实现。在低版本IE浏览器可能会遇到三种不同版本的XHR对象 ，即MSXML2.XMLHttp MSXML2.XMLHttp.3.0 MSXML2.XMLHttp6.0 . 我们可以写一个函数。

function createXHR(){
    if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();
    }else if (type of ActiveXObject !='undefined'){   //IE6
        var versions=[
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for(var i =0; version.length;i++){
            try{
                return new ActiveXObject(version[i])
            }catch(e){
                //跳过
            }            
        }
    }else{
        throw new Error('您的系统或浏览器不支持XML对象');
    }
}

var xhr=createXHR();
alert(xhr); 

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

xhr.open('get','demo.php',false); //对于demo.php的get请求，false同步

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

addEvent(document,'click',function(){
    var xhr=createXHR();
    xhr.open('get','demo.php',false); 
    xhr.send(null);
    alert(xhr.responseText); 
});

PS:demo.php的代码如下
//一个时间

//PS:通过点击事件，不断的向服务器发送请求，然后服务器会时时的返回最新的数据。就是AJAX的功能。IE浏览器第一次会向服务器端请求，获取最新数据，而第二次它就默认获取的缓存数据，导致数据不是最新的。怎么处理缓存，可以使用JS随机字符串

addEvent(document,'click',function(){
    var xhr=createXHR();
    xhr.open('get','demo.php?rand='+Math.random,false); 
    xhr.send(null);
    alert(xhr.responseText); 
});

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

responseText, responseXML,status,statusText

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

addEvent(document,'click',function(){
    var xhr=createXHR();
    xhr.open('get','demo.php?rand='+Math.random,false); 
    xhr.send(null);
    if(xhr.status == 200){
        alert(xhr.responseText);
    }else{
        alert{'获取数据错误！ 错误代码：'+xhr.status + '错误信息'+xhr.statusText};
    }
 
});

我们判断HTTP状态值即可，不建议使用HTTP状态说明 ，因为跨浏览器的时候 ，可能会不太一致。