ajax工作原理

什麽是ajax？

　　ajax 的全稱是Asynchronous JavaScript and XML，其中，Asynchronous 是異步的意思。從全稱中就可以看出AJAX = 異步 JavaScript 和 XML。

　　 AJAX 是一種用於創建快速動態網頁的技術。通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

　　使用 AJAX 的應用程序案例比如有：新浪微博、Google 地圖、開心網，123rf網站等等

aja

　　1.CSS和XHTML (給數據定義樣式)。

　　2. DOM（信息交互和動態顯示）。

　　3.XMLHttpRequest（和服務器進行異步通信）。

　　4.avascript（綁定和調用）。

ajax原理和XmlHttpRequest對象

　　Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。XmlHttpRequest就是javascript可以及時向服務器提出請求和處理響應，從而不阻塞用戶。達到無刷新的效果。

　　XMLHttpRequest的屬性：

　　　　> onreadystatechange：每次狀態改變所觸發事件的事件處理程序；

　　　　> responseText：從服務器進程返回數據的字符串形式；

　　　　> responseXML：從服務器進程返回的DOM兼容的文檔數據對象；

　　　　> status：從服務器返回的數字代碼（狀態碼），比如常見的404（未找到）和200（成功）；

　　　　> status Text ：伴隨狀態碼的字符串信息；

　　　　> readyState： 對象狀態值：

　　　　　　0 (未初始化) 對象已建立，但尚未初始化，尚未調用open方法；

　　　　　　1 (初始化) 對象已建立，鏈接讀取中，但尚未調用send方法；

　　　　　　2 (發送數據) 請求已接收讀取，send方法已調用，但是當前的狀態及http頭未知；

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

　　　　　　4 (完成) 數據接收完畢,此時可以通過通過responseXml和responseText獲取完整的回應數據。

　　由於各瀏覽器之間存在差異，這個差異主要體現在IE和其它瀏覽器之間，所以創建一個XMLHttpRequest對象可能需要不同的方法。下面是我創建XMLHttpRequest對象的方法。

//獲取顯示文本的對象
var msg = document.getElementById("msg");
function checkUserFn(){
　　//獲取要傳送的對象的值
　　var username = document.getElementById("username").value

　　// 1 創建xhr對象(XMLHttpRequest)
　　var xhr = null;//創建xhr，初值為空

　　//非IE瀏覽器創建XmlHttpRequest對象
　　if(window.XMLHttpRequest){
　　　　xhr = new XMLHttpRequest();
　　}
　　//IE瀏覽器創建XmlHttpRequest對象
　　if(window.ActiveXObject){
　　　　xhr = new ActiveXObject("Microsoft.XMLHTTP");
　　}

　　//2 打開ajax鏈接通道，配置參數（請求方式，請求地址url，同步or異步）。
　　xhr.open("POST",url,true)；

　　 xhr.onreadystatechange = function () {
　　　　　if (xhr.readyState == 4) {

　　　　　　msg.innerHTML = "數據正在加載...";

　　　　　　　if (xhr.status == 200) {
　　　　　　　　　　document.write(xhr.responseText);
　　　　　　　}
　　　　　}
　　　}

　　　//3 發送請求

   xhr.send();

} 

　　其中要註意的是

　　　　a、向服務器提交數據的類型；

　　　　b、post和get請求的url地址和傳遞的參數寫法不一樣；

　　 c、傳輸方式，false為同步，true為異步。默認為true；

　　為了增強自己對ajax的理解，寫了這篇博文，把我理解的知識也分享給大家，剛開始寫，有很多不足，歡迎來吐槽，指出不足，想要更詳細了解，可以去http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html，很感謝這篇博文博主的詳解。

【知了堂學習筆記】ajax工作原理