原生Ajax實現異步交互

 

1. 實現Ajax主要依靠XMLHttpRequest對象，因此首先要建立XMLHttpRequest對象
   

   function getXhr(){
      var xhr = null;
      if(window.XMLHttpRequest){
   //高版本瀏覽器
           xhr = new XMLHttpRequest;
      }else{
   //IE低版本瀏覽器
          xhr = new ActiveXObject("Microsoft.XMLHttp");
      }
      return xhr;
   }
   var xhr = getXhr();

2. 使用open方法與服務器創建鏈接
   

   open(method, url, async);
   xhr.open('post', 'data_montor.php', true);
   xhr.open('get', 'data_montor.php?user = name', true);
   //method 表示get/post
   //url 表示請求的地址
   //async 表示同步仍是異步，async = true 異步（默認）
   //若將async設置爲false，官方認爲XMLHttpRequest就是實現異步交互的會進行警告
   //若是是get方法請求參數應跟在url以後，而不是經過send發送

3. 客戶端向服務器發送請求
   

   send(請求參數)方法
   //請求參數的格式   key = value
   xhr.send('user = xinyue')
   //注意：若是使用get方法，send不能向服務器發送請求數據，可是也不能忽略
   //須要寫成 send(NULL); 而後請求數據應放在open方法中的Url以後
   //（詳見上一步）

4. 客戶端接受服務器端的響應：使用onreadyStatechange 時間監聽服務器的通訊狀態

   xhr . onreadystatechange  = function(){
       if(xhr.readyState == 4){
           if(xhr. status == 200){
               var data = xhr.responseText;
   //HTML格式使用responseText接收服務器端的相應數據，解析過程比較複雜（拆串），拆串拼串極易出錯
               console.log(data);
           }
      }
   }

   readyState 得服務器端當前通訊狀態 ： 
           0 服務器端還沒有初始化
           1 正在發送請求
           2  請求完成
           3  請求成功，客戶端正在接收服務器端的數據
           4  響應完成
   status :  1XX 信息類
                 2XX 成功
                 3XX 重定向
                 4XX 客戶端錯誤
                 5XX 服務器端錯誤