Ajax概要:
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?
輸入好用戶名后,離開Textbox將彈出警告框
?
Step3詳解:(編寫一個(gè)函數(shù)創(chuàng)建請(qǐng)求對(duì)象)
?
[javascript]?view plaincopy?
更多請(qǐng)參照w3schools:http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
有了請(qǐng)求對(duì)象之后就可以完成步驟2里的檢查用戶名的回調(diào)函數(shù)了:
?
[javascript]?view plaincopy?
服務(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?
Step5詳解:(在頁面上更新顯示)
將Step4里的回調(diào)函數(shù)根據(jù)業(yè)務(wù)需要補(bǔ)充完整:
[javascript]?view plaincopy如果服務(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é)
- 上一篇: strcpy与strcat函数原型
- 下一篇: collections系列