Ajax概要：

Ajax不是個(gè)全新的技術(shù)，它是多種技術(shù)合并在一起產(chǎn)生的，包括XHTML，CSS，JavaScript，XmlHttpRequest，XML，JSON，DOM等

優(yōu)點(diǎn)：（這也解釋了為何我們需要Ajax技術(shù)）

傳統(tǒng)頁面被點(diǎn)擊將與服務(wù)器通信后將刷新整個(gè)頁面。用Ajax只需刷新局部，而且如果數(shù)據(jù)在本地，根本不必和服務(wù)器通信。

缺點(diǎn)：
Ajax整合了大量技術(shù)，因此可能會(huì)有瀏覽器兼容性問題，如果該瀏覽器不支持某項(xiàng)技術(shù)，就可能導(dǎo)致運(yùn)行失敗，因此一定要多瀏覽器測(cè)試。

步驟：

用傳統(tǒng)JavaScript方式開發(fā)個(gè)使用Ajax技術(shù)的web頁面的話可細(xì)分為以下5個(gè)步驟：

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

Step2：編寫一個(gè)函數(shù)初始化頁面

Step3：編寫一個(gè)函數(shù)創(chuàng)建請(qǐng)求對(duì)象

Step4：從服務(wù)器得到數(shù)據(jù)

Step5：在頁面上更新顯示

現(xiàn)在很多庫（如jQuery，Backbone）都提供了便利的ajax函數(shù)供使用，但究其本質(zhì)就是將上述步驟3進(jìn)行封裝，以簡(jiǎn)化代碼開發(fā)

?

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

（該步驟需要有HTML和CSS知識(shí)儲(chǔ)備，非本文詳解內(nèi)容）

用HTML和CSS先編寫個(gè)靜態(tài)頁面，頁面內(nèi)有個(gè)用戶名控件：

我們希望在輸入完用戶名后，Textbox失去焦點(diǎn)后，就自動(dòng)將用戶名發(fā)送到服務(wù)器端去驗(yàn)證。

如果是驗(yàn)證結(jié)果失敗（如該用戶名已被注冊(cè)）則Textbox右側(cè)顯示個(gè)叉圖標(biāo)。如果驗(yàn)證結(jié)果成功，Textbox右側(cè)顯示個(gè)勾圖標(biāo)。

?

Step2詳解：（編寫一個(gè)函數(shù)初始化頁面）

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

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

?

[javascript]?view plaincopy

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

function?initPage()?{??

????document.getElementById("username").onblur?=?checkUsername;????//用戶名失去焦點(diǎn)時(shí)觸發(fā)回調(diào)函數(shù)??

}??

??

function?checkUsername()?{????//檢查用戶名的回調(diào)函數(shù)暫時(shí)TBD??

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

}??

?

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

?

Step3詳解：（編寫一個(gè)函數(shù)創(chuàng)建請(qǐng)求對(duì)象）

?

[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;??

}??

從函數(shù)中也可以看出，IE和其他瀏覽器對(duì)請(qǐng)求對(duì)象的實(shí)現(xiàn)有所不同。甚至低版本IE和IE7以上版本的請(qǐng)求對(duì)象的實(shí)現(xiàn)亦不同。因此要對(duì)IE和非IE區(qū)別實(shí)現(xiàn)才能全瀏覽器適用。

?

更多請(qǐng)參照w3schools：http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

有了請(qǐng)求對(duì)象之后就可以完成步驟2里的檢查用戶名的回調(diào)函數(shù)了：

?

[javascript]?view plaincopy

function?checkUsername()?{??

????request?=?createRequest();????//new一個(gè)請(qǐng)求對(duì)象??

????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方式）傳給服務(wù)器端驗(yàn)證腳本??

????????request.onreadystatechange?=?showUsernameStatus;??//注冊(cè)回調(diào)函數(shù)，服務(wù)器端驗(yàn)證完畢后會(huì)調(diào)用該函數(shù)??

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

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

????}??

}??

??

function?showUsernameStatus()?{????//服務(wù)器端驗(yàn)證完畢后調(diào)用該回調(diào)函數(shù)，暫時(shí)TBD??

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

}??

?

服務(wù)器端新建驗(yàn)證用戶名的PHP腳本checkName.php，如該用戶名已注冊(cè)可返回denied，未注冊(cè)可返回okay。PHP非本文內(nèi)容不詳解。

?

Step4詳解：（從服務(wù)器得到數(shù)據(jù)）

如果你順利做到Step3，會(huì)發(fā)現(xiàn)用戶名Textbox失去焦點(diǎn)后，彈了5次”Call Web Server success“警告框。因?yàn)榉?wù)器收到請(qǐng)求對(duì)象后會(huì)將請(qǐng)求對(duì)象的readyState屬性從0~4依次返回，共返回5次。請(qǐng)求對(duì)象的各屬性詳解：

請(qǐng)求對(duì)象的各屬性請(qǐng)參照：http://www.w3schools.com/dom/dom_http.asp （XMLHttpRequest Object Properties）

readyState屬性：0表示連接尚未初始化，1表示連接初始化了，2表示請(qǐng)求正在處理，3表示得到服務(wù)器響應(yīng)，4表示服務(wù)器處理完請(qǐng)求。

state屬性：服務(wù)器返回的一個(gè)HTTP狀態(tài)碼，如request.status == 200表示成功，404表示沒找到

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

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

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

onreadystatechange屬性：回調(diào)函數(shù)

[javascript]?view plaincopy

function?showUsernameStatus()?{????//Step3里創(chuàng)建的回調(diào)函數(shù)??

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

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

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

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

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

????????}??

????}??

}??

?

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

將Step4里的回調(diào)函數(shù)根據(jù)業(yè)務(wù)需要補(bǔ)充完整：

[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;??

????????}??

????}??

}??

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

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

?

總結(jié)：

?

傳統(tǒng)頁面只能和服務(wù)器同步交互。即發(fā)出請(qǐng)求后，在得到服務(wù)器響應(yīng)前頁面將呈現(xiàn)“僵死”狀態(tài)，用戶體驗(yàn)很糟糕。得到服務(wù)器響應(yīng)后，需要刷新全頁面，速度也比較慢。

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/zs6666/p/6064392.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。