Ajax概要：

Ajax不是個全新的技術，它是多種技術合并在一起產生的，包括XHTML，CSS，JavaScript，XmlHttpRequest，XML，JSON，DOM等

優點：（這也解釋了為何我們需要Ajax技術）

傳統頁面被點擊將與服務器通信后將刷新整個頁面。用Ajax只需刷新局部，而且如果數據在本地，根本不必和服務器通信。

缺點：
Ajax整合了大量技術，因此可能會有瀏覽器兼容性問題，如果該瀏覽器不支持某項技術，就可能導致運行失敗，因此一定要多瀏覽器測試。

步驟：

用傳統JavaScript方式開發個使用Ajax技術的web頁面的話可細分為以下5個步驟：

Step1：編寫HTML和CSS來布局頁面

Step2：編寫一個函數初始化頁面

Step3：編寫一個函數創建請求對象

Step4：從服務器得到數據

Step5：在頁面上更新顯示

現在很多庫（如jQuery，Backbone）都提供了便利的ajax函數供使用，但究其本質就是將上述步驟3進行封裝，以簡化代碼開發

?

Step1詳解：（編寫HTML和CSS來布局頁面）

（該步驟需要有HTML和CSS知識儲備，非本文詳解內容）

用HTML和CSS先編寫個靜態頁面，頁面內有個用戶名控件：

我們希望在輸入完用戶名后，Textbox失去焦點后，就自動將用戶名發送到服務器端去驗證。

如果是驗證結果失敗（如該用戶名已被注冊）則Textbox右側顯示個叉圖標。如果驗證結果成功，Textbox右側顯示個勾圖標。

?

Step2詳解：（編寫一個函數初始化頁面）

HTML里加載js文件（如my_validation.js）

js文件里需要使BOM的window對象在加載頁面時對頁面先初始化（類似jQuery的$(document).ready(function(){...}）

?

[javascript]?view plaincopy

window.onload?=?initPage;<pre?name="code"?class="javascript">??

function?initPage()?{??

????document.getElementById("username").onblur?=?checkUsername;????//用戶名失去焦點時觸發回調函數??

}??

??

function?checkUsername()?{????//檢查用戶名的回調函數暫時TBD??

????alert("Username?lose?focus");??

}??

?

輸入好用戶名后，離開Textbox將彈出警告框

?

Step3詳解：（編寫一個函數創建請求對象）

?

[javascript]?view plaincopy

function?createRequest()?{??

????try?{??

????????request?=?new?XMLHttpRequest();??

????}?catch?(tryMS)?{??

????????try?{?????????????

????????????request?=?new?ActiveXObject("Msxml2.XMLHTTP");????

????????}?catch?(otherMS)?{???

????????????try?{??

????????????????request?=?new?ActiveXObject("Microsoft.XMLHTTP");??

????????????}?catch?(failed)?{??

????????????????request?=?null;??

????????????}??

????????}??

????}?????

????return?request;??

}??

從函數中也可以看出，IE和其他瀏覽器對請求對象的實現有所不同。甚至低版本IE和IE7以上版本的請求對象的實現亦不同。因此要對IE和非IE區別實現才能全瀏覽器適用。

?

更多請參照w3schools：http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

有了請求對象之后就可以完成步驟2里的檢查用戶名的回調函數了：

?

[javascript]?view plaincopy

function?checkUsername()?{??

????request?=?createRequest();????//new一個請求對象??

????if?(request?==?null)??

????????alert("Unable?to?create?request");??

????else?{??

????????var?username?=?escape(document.getElementById("username").value);????//獲取頁面上用戶輸入的用戶名??

????????var?url=?"checkName.php?username="?+?username;????//將用戶名作為URL的一部分（因用Get而非Post方式）傳給服務器端驗證腳本??

????????request.onreadystatechange?=?showUsernameStatus;??//注冊回調函數，服務器端驗證完畢后會調用該函數??

????????request.open("GET",?url,?true);????//用Get而非Post方式發送請求給服務器，true表示異步??

????????request.send(null);????????????????//不需要額外的參數，如用Post方式需要傳遞參數??

????}??

}??

??

function?showUsernameStatus()?{????//服務器端驗證完畢后調用該回調函數，暫時TBD??

????alert("Call?Web?Server?success");??

}??

?

服務器端新建驗證用戶名的PHP腳本checkName.php，如該用戶名已注冊可返回denied，未注冊可返回okay。PHP非本文內容不詳解。

?

Step4詳解：（從服務器得到數據）

如果你順利做到Step3，會發現用戶名Textbox失去焦點后，彈了5次”Call Web Server success“警告框。因為服務器收到請求對象后會將請求對象的readyState屬性從0~4依次返回，共返回5次。請求對象的各屬性詳解：

請求對象的各屬性請參照：http://www.w3schools.com/dom/dom_http.asp （XMLHttpRequest Object Properties）

readyState屬性：0表示連接尚未初始化，1表示連接初始化了，2表示請求正在處理，3表示得到服務器響應，4表示服務器處理完請求。

state屬性：服務器返回的一個HTTP狀態碼，如request.status == 200表示成功，404表示沒找到

responseXML屬性：服務器返回的XML格式的信息，如果返回的非XML格式的信息該值為空

statusText屬性：如有問題，可從這個屬性得到問題的描述

responseText屬性：服務器返回的文本信息，如果返回的非文本格式信息該值為空

onreadystatechange屬性：回調函數

[javascript]?view plaincopy

function?showUsernameStatus()?{????//Step3里創建的回調函數??

????if?(request.readyState?==?4?&&?request.status?==?200)?{????//請求處理成功處理完畢??

????????if?(request.responseText?==?"okay")?{????//Step3里的PHP里驗證成功將返回字符串okay??

????????????alert("username?OK");??

????????}?else?{??

????????????alert("username?has?been?registed");??

????????}??

????}??

}??

?

Step5詳解：（在頁面上更新顯示）

將Step4里的回調函數根據業務需要補充完整：

[javascript]?view plaincopy

function?showUsernameStatus()?{??

????if?(request.readyState?==?4?&&?request.status?==?200)?{??

????????if?(request.responseText?==?"okay")?{??

????????????document.getElementById("username").className?=?"approved";??

????????????document.getElementById("register").disabled?=?false;??

????????}?else?{??

????????????document.getElementById("username").className?=?"denied";??

????????????document.getElementById("username").focus();??

????????????document.getElementById("username").select();??

????????????document.getElementById("register").disabled?=?true;??

????????}??

????}??

}??

如果服務器端PHP返回okay，則將用戶名Textbox的CSS式樣更新為approved。CSS式樣中會在Textbox右側顯示勾圖片：

如果服務器端PHP返回denied，則將用戶名Textbox的CSS式樣更新為denied。CSS式樣中會在Textbox右側顯示叉圖片：

?

總結：

?

傳統頁面只能和服務器同步交互。即發出請求后，在得到服務器響應前頁面將呈現“僵死”狀態，用戶體驗很糟糕。得到服務器響應后，需要刷新全頁面，速度也比較慢。

而Ajax技術使得頁面能夠和服務器異步交互。即發出請求后，在得到服務器響應前頁面仍能被用戶正常使用。得到服務器響應后，也只需要刷新局部頁面即可。數據碎片化，速度快。

另外jQuery庫中除了提供ajax方法外，還提供get，getJSON，getScript，post，load幾個快捷方式，它們最終都將調用ajax方法。

轉載于:https://www.cnblogs.com/zs6666/p/6064392.html

總結

以上是生活随笔為你收集整理的Ajax概要：的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。