Ajax的原理

       Ajax全稱爲：Asynchronous JavaScript + XML

       Ajax技術的核心是XMLHttpRequest對象（簡稱XHR），XHR爲向服務器發送請求和解析服務器相應提供了流暢的接口，能以異步方式從服務器取得更多信息，意味着用戶單擊後，能夠沒必要刷新頁面也能取得新的數據，也就是說，可使用XHR對象取得新數據，而後再經過DOM將新數據插入到頁面中。另外，雖然名字中包含了XML的成分，但Ajax同窗與數據格式無關，這種技術就是無需刷新頁面便可從服務器取得數據，但也不必定是XML數據

Ajax是由下列幾種技術組合而成：

一、運用HTML和CSS來實現頁面，表達信息

二、使用XMLHttpRequest和Web服務器進行數據的異步通訊

三、運用JavaScript操做DOM實現動態局部刷新

Ajax的原理

簡單來講就是經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據

XMLHttpRequest對象

XmlHttpRequest是ajax的核心機制，IE5是第一款引入XHR對象的瀏覽器，在IE5中，XHR對象是經過MSXHML庫中的一個ActiveX對象實現的

建立一個XMLHttpRequest對象：

var xhr = new XMLHttpRequest();複製代碼

對象屬性：

（1）onreadystatechange          每次狀態改變所觸發事件的事件處理程序。

（2）responseText                      從服務器進程返回數據的字符串形式。

（3）responseXML                     從服務器進程返回的DOM兼容的文檔數據對象。

（4）status                                  從服務器返回的數字代碼，好比常見的404和200

（5）status Text                          伴隨狀態碼的字符串信息

（6）getAllResponseHeader()    獲取全部的相應報頭

（7）getResponseHeader()        查詢響應中的某個字段的值

（8）readyState                           對象狀態值

         0 (未初始化) 對象已創建，可是還沒有初始化（還沒有調用open方法）

         1 (初始化) 對象已創建，還沒有調用send方法

         2 (發送數據) send方法已調用，可是當前的狀態及http頭未知

         3 (數據傳送中) 已接收部分數據，由於響應及http頭不全，這時經過responseBody和                  responseText獲取部分數據會出現錯誤，

          4 (完成) 數據接收完畢,此時能夠經過經過responseXml和responseText獲取完整的迴應數據

工做流程

一、向服務器發送請求

xhr.open("GET",url,true);
xhr.send();複製代碼

open( method, url, async ) 函數支持三個參數

method：   請求方式，GET或POST

url：            請求的url

async：       true（異步）/false（同步），默認值爲true

send( string ) 函數的參數只有請求方式爲post時用到，即咱們的請求參數

二、監聽請求狀態並處理返回值

xhr.onreadystatechange = function (){
  if(xhr.readyState == "4" && xhr.status == "200") {
    //請求成功
    var data = xhr.responseText;
  }else {
    //異常捕獲
    console.log(xhr.status);
  }
}複製代碼

以上即爲ajax的原理及原生基礎實現