Ajax步驟及原理

一、什麼是ajax

ajax是一種異步javaScript和xml。

是一種快速創建動態網頁的技術。

可以通過和服務器進行少量的數據交換使網頁進行異步更新，意味着可以不使網頁重載的情況下進行數據的更新。

如果不用ajax那麼數據更新需要刷新整個網頁。

二、ajax的原理

ajax簡單來說就是通過XmlHttpRequest對象來向服務器發送異步請求，從服務器獲得數據，然後用javascript來操作DOM而更新界面。這其中最關鍵的一步就是從服務器獲得請求數據。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所瞭解。

XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript可以及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。

XMLHttpRequest的簡單的步驟：

1) 創建一個XMLHttpRequest對象
2) 調用該對象的open方法，其中參數包括：get/post、設定參數如url、是否異步
3) 如果是get請求，設置回調函數onreadystatechange = callback
4) Send

var xmlHttp = new XMLHttpRequest();
   xmlHttp.open('get','demo_get.html','true');//調用open()方法並採用異步方式
   xmlHttp.send(); //使用open()方法將請求發送出去
   xmlHttp.onreadystatechange()=>{ //回調函數
        if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
         document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //獲得數據

        }
}

   爲什麼使用 Async=true ？

  我們的實例在 open() 的第三個參數中使用了 “true”。該參數規定請求是否異步處理。True 表示腳本會在 send() 方法之後繼續執行，而不等待來自服務器的響應。

   在某些頁面中可能會發出多個請求，甚至是有組織有計劃有隊形大規模的高強度的request，而後一個是會覆蓋前一個的，這個時候當然要指定同步方式。
  onreadystatechange事件使代碼複雜化了。但是這是在沒有得到服務器響應的情況下，防止代碼停止的最安全的方法。
  通過把該參數設置爲 “false”，可以省去額外的 onreadystatechange 代碼。如果在請求失敗時是否執行其餘的代碼無關緊要，那麼可以使用這個參數。

它返回的是一個純文本流，當然，這個文本流可以是XML格式，可以是Html，可以是Javascript代碼，也可以只是一個字符串。這時候，XMLHttpRequest向服務器端請求這個頁面，服務器端將文本的結果寫入頁面，這和普通的web開發流程是一樣的，不同的是，客戶端在異步獲取這個結果後，不是直接顯示在頁面，而是先由javascript來處理，然後再顯示在頁面。至於現在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它數據類型，只是將這個過程封裝了的結果，本質上他們並沒有什麼太大的區別。