Ajax复习笔记(一)

　　悦老大说：不要以为会用$.ajax()就觉得自己了解ajax了。今天也空，正好把ajax的相关知识再复习一遍，顺便做个记录。

一、什么是AJAX

　　所谓的ajax，是Asynchronous Javascript XML的简写；简单来说就是js异步请求数据。ajax的技术核心是XMLHttpRequest对象，也是就XHR。

二、关于XMLHttpRequest对象

　　1、在浏览器中创建XHR对象，需要通过 var xhr = new XMLHttpRequest() ；

　　2、XHR最早由IE实现，但IE6并不支持原生的XHR对象，但IE6可以使用ActiveXObject实现。

　　3、兼容IE6的XHR创建方法：

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

三、XHR的用法

　　1、xhr.open():

　　　　在使用xhr时，要调用的第一个方法就是open()，它接受3个参数：请求类型、请求地址、是否异步；

　　　　例：xhr.open( 'get' , 'a.php' , false ) ;

　　　　　　true：表示异步，即请求后不等服务器返回数据就立即执行下面的代码；

　　　　　　false：表示同步，即等服务器返回数据后再执行下面的代码。

　　　　open()方法并不会真正发送请求，只是启动一个请求以备发送。

　　2、xhr.send()：

　　　　send()方法接收一个参数，即 需要发送的数据；

　　　　如果不需要发送数据，则最好传入null，部分浏览器需要传。

　　　　调用send()方法后，请求会被分派到服务器。接下来就是等着服务器反回响应数据。

　　3、服务器响应数据：

　　　　服务器响应的数据，会保存在xhr的属性中：

　　　　　　1、responseText：作为响应文体被返回的文本；

　　　　　　2、responseXML：如果响应的内容类型是"text/xml"或者"application/xml"，响应数据会在这里。

　　　　　　3、status：响应的HTTP状态。

　　　　　　4、statusText：HTTP状态的说明。

　　4、分析服务器的响应数据：

　　　　在接收到响应后，第一步就是检查status属性，以确定响应是否成功返回。

　　　　status值为200表示数据请求成功。304表示请求的资源没有修改，可直接使用缓存的数据，也表示响应是成功的。

　　　　响应成功后，responseText的数据就已经就绪，如果内容类型正确，responseXML也可以访问了。

　　　　以下代码检测数据是否成功：　　　　

if ( ( xhr.status >=200 && xhr.status <= 300 ) || xhr.status ==304 ){
    //请求成功
} else {
    //请求不成功
}

四、XHR的状态变化

　　xhr的状态变化表现在xhr的readyState属性。该属性表示请求/响应过程的当前活动阶段。

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

　　　　1：启动。开始调用open()方法。

　　　　2：发送。开始调用send()方法。

　　　　3：接收。开始接收数据。

　　　　4：完成。已经接收到全部数据。

　　每次readyState值发生变化时，都会触发readystatechange事件。

　　当readyState值为4时，表示请求完成。

　　onreadystatechange事件必须在open()前进行绑定，才能确保跨浏览器的兼容性。

五、稍微完整点的AJAX请求示例

　　

var xhr = null ;
if( window.XMLHttpRequest ){   
     xhr = new XMLHttpRequest() ; 
}else{        
     xhr = new ActiveXObject( "Microsoft.XMLHTTP" ) ;
}
xhr.open("get","./php/get.php?user="+userName.value , true );
xhr.onreadystatechange = function(){
    if( xhr.readyState ===4 ){
          if( (xhr.status >= 200 && xhr.status <=300) || xhr.status == 304 ){
               oMsg.innerHTML = xhr.responseText ;
          }else{
               console.log( xhr.statusText , xhr.status );
          }      
    }

}
xhr.send( null ) ;