浅析ajax

1.什么是Ajax

Ajax：是Asynchronous Javascript And XML的简写，即异步JavaScript和XML
用途：动态刷新局部数据，无需卸载整个页面，从而带来更好的用户体验
Ajax核心：XMLHttpRequest对象(简称XHR)

2.如何建立XHR对象

如下是一个跨浏览器建立XHR对象的函数:

function createXHR() {  
        if (typeof XMLHttpRequest !== "undefined") {  
            return new XMLHttpRequest();
        }else if{
            if (typeof ActiveXString != "undefined") {  
                    var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp" ];  
                    for ( var i = 0, len = versions.length; i < len; i++) {  
                        try {  
                            var xhr = new ActiveXObject(versions[i]);  
                            arguments.callee.activeXString = versions[i];  
                            break;  
                        } catch (error) {  
                            // ...  
                        }  
                    }  
                }
                return new ActiveXObject(arguments.callee.activeXString);
        }else {
            throw new Error("No XHR object avaliable.");
        }
    }

XMLHttpRequest这个对象的属性：

• responseText 做为响应主体返回的文本。

• responseXML 若是响应的内容类型是"text/xml"或"application/xml"，这个属性将保存包含着响应数据的xml DOM文档。

• status 响应的http状态

• statusText http状态的说明

当XHR对象把一个HTTP请求发送到服务器的过程当中会经历几个状态，直到请求被处理，而后才接收一个回应。readyState是XHR请求的状态属性，它自己有5个属性值：

• 0（未初始化）尚未调用open()方法

• 1（启动）已调用send()方法，正在发送请求

• 2(发送)send()方法完成，已收到所有响应内容

• 3(接收)已经接收到部分响应内容

• 4（完成）响应内容解析完成，能够再客户端使用了

3.实现Ajax的步骤

A.建立一个XHR对象

var xhr= createXHR();

B.设置响应HTTP请求状态变化的函数

xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){
            xxx.innerHTML = xhr.responseText;//刷新了xxx中的数据
        } else {
            alert("Request was failed:"+xhr.status);
        }
    }
};

C.建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及表示是否异步发送请求的布尔值

xhr.open("get","getAjaxData.php",true);//true表示异步发送请求

D.设置自定义请求头部(可选)

xhr.setRequestHeader("myHeader","myValue");//jsonp跨域请求时会用到自定义的头部

E.发送http请求

xhr.send(null);//做为请求主体发送的数据，无数据必须传入null，post请求时常常会发送数据

完整代码以下：

var xhr= createXHR();
xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){
            xxx.innerHTML = xhr.responseText;
        } else {
            alert("Request was failed:"+xhr.status);
        }
    }
};
xhr.open("get","getAjaxData.php",true);
xhr.setRequestHeader("myHeader","myValue");
xhr.send(null);