JavaScript之Ajax

Ajax（Asynchronous JavaScript and XML ）：这种技术能够向服务器端放送额外的数据而无需刷新整个页面，提高用户的体验

一、XMLHttpRequest

Ajax技术的核心，微软首次提出的概念,xhr提供了向服务器放送请求和解析服务器响应的接口，所以可以异步方式从服务器获得更多信息，而不需要刷新整个页面，就可以更新页面上的数据。

//高版本的浏览器如IE7+都支持原生的javascript XMLHttpRequest对象
//低版本IE6-通过ActiveX对象通过MSXML库来实现

function createXHR(){

  if (typeof XMLHttpRequest != 'undefined'){
    return new XMLHttpRequest();             
  } else if (typeof ActiveXObject != 'undefined'){
    var versions = [
                             "MSXML2.XMLHttp.6.0",
                             "MSXML2.XMLHttp.3.0",
                             "MSXML2.XMLHttp"
                            ];
    for(var i = 0; i < versions.length; i++){
        try{
               return new ActiveXObject(versions[i]);
        } catch(e){
          //do not deal with it
         }
    }
  } else {
    throw new Error("您的浏览器不支持XHR对象");
  }  
}    
    

创建完xhr对象之后，首先调用的是open方法，它接收3个参数，第一个是请求方式（get、post），第二个是路径url，第三个参数表上是否同步false表示同步，ture是异步。而open方法并不是真正的发送而是为请求作准备，通过send()方法进去进行发送请求，send接收一个参数，作为请求主体进行发送数据，如果没有数据则设置为null

xhr.send(null)//发送请求

请求发送完之后，xhr会自动接收服务器响应的数据，而且响应的数据会自动填充到xhr属性中去，xhr一共有4个属性

　　responseText：作为响应主体被返回的内容

　　responseXML

　　status：响应http状态

　　statusText：http状态的说明

//设置同步Ajax请求

var xhr = new createXHR();//获得xhr对象

xhr.open("get", url, "false");//false ：同步
xhr.send(null);
if (xhr.status === 200){
  alert(xhr.responseText);
} else {
}

//异步
var xhr = new createXHR();

xhr.open("get", url， true);//true：异步

xhr.onreadystatechange = functiono(){
  if (xhr.state === 4){
    if (xhr.statue === 200){
      alert(xhr.responseText);
    }
  }
}

xhr.send(null);