AJAX入门——工作原理
理解同步交互和異步交互
舉個(gè)例子:普通B/S模式(同步) ? ? ? AJAX技術(shù)(異步)
? ? ? ?* ?同步:
? ? ? 提交請(qǐng)求->等待服務(wù)器處理->處理完畢返回 ?這個(gè)期間客戶(hù)端瀏覽器不能干任何事。
? ? ? ?發(fā)送方發(fā)出數(shù)據(jù)后,等接收方發(fā)回響應(yīng)以后才發(fā)下一個(gè)數(shù)據(jù)包的通訊方式。 ?
? ? ? ?你現(xiàn)在傳輸,我要親眼看你傳輸完成,才去做別的事 。
? ? ? ?* ?異步:?
? ? ? 請(qǐng)求通過(guò)事件觸發(fā)->服務(wù)器處理(這時(shí)瀏覽器仍然可以作其他事情)->處理完畢。
? ? ? ?發(fā)送方發(fā)出數(shù)據(jù)后,不等接收方發(fā)回響應(yīng),接著發(fā)送下個(gè)數(shù)據(jù)包的通訊方式 。
? ? ? ?你傳輸吧,我去做我的事了,傳輸完了告訴我一聲 。 ?
?
?
什么是Ajax?
? ? ? ?Ajax被認(rèn)為是(Asynchronous JavaScript and XML的縮寫(xiě))。現(xiàn)在,允許瀏覽器與服務(wù)器通信而無(wú)須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做Ajax.
? ? ? ?Ajax并非一種新的技術(shù),而是幾種原有技術(shù)的結(jié)合體。它由下列技術(shù)組合而成:?
1.使用CSS和XHTML來(lái)表示。?
2. 使用DOM模型來(lái)交互和動(dòng)態(tài)顯示。?
3.使用XMLHttpRequest來(lái)和服務(wù)器進(jìn)行異步通信。?
4.使用javascript來(lái)綁定和調(diào)用。
?
Ajax的工作原理
? ? ? ?AJAX采用異步交互過(guò)程。AJAX在用戶(hù)與服務(wù)器之間引入一個(gè)中間媒介,從而消除了網(wǎng)絡(luò)交互過(guò)程中的處理—等待—處理—等待缺點(diǎn)。
? ? ? ?用戶(hù)的瀏覽器在執(zhí)行任務(wù)時(shí)即裝載了AJAX引擎。AJAX引擎用JavaScript語(yǔ)言編寫(xiě),通常藏在一個(gè)隱藏的框架中。它負(fù)責(zé)編譯用戶(hù)界面及與服務(wù)器之間的交互。
? ? ? ?AJAX引擎允許用戶(hù)與應(yīng)用軟件之間的交互過(guò)程異步進(jìn)行,獨(dú)立于用戶(hù)與網(wǎng)絡(luò)服務(wù)器間的交流。現(xiàn)在,可以用Javascript調(diào)用AJAX引擎來(lái)代替產(chǎn)生一個(gè)HTTP的用戶(hù)動(dòng)作,內(nèi)存中的數(shù)據(jù)編輯、頁(yè)面導(dǎo)航、數(shù)據(jù)校驗(yàn)這些不需要重新載入整個(gè)頁(yè)面的需求可以交給AJAX來(lái)執(zhí)行。?
? ? ? ?AJAX的原理簡(jiǎn)單來(lái)說(shuō)通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求,從服務(wù)器獲得數(shù)據(jù),然后用javascript來(lái)操作DOM而更新頁(yè)面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)。
?
了解XMLHttpRequest
? XMLHttpRequest是ajax的核心機(jī)制,它是在IE5中首先引入的,是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)單的說(shuō),也就是javascript可以及時(shí)向服務(wù)器提出請(qǐng)求和處理響應(yīng),而不阻塞用戶(hù)。達(dá)到無(wú)刷新的效果。
XMLHttpRequest屬性有:
?
| 屬性 | 描述 |
| onreadystatechange? | 每次狀態(tài)改變所觸發(fā)事件的事件處理程序。 |
| responseText ? ? ? ? | 從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式。 |
| responseXML ? ? ? | 從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對(duì)象。 |
| status ? ? ? ? ? ? ? ? ? ? ? | 從服務(wù)器返回的數(shù)字代碼,比如常見(jiàn)的404(未找到)和200(已就緒) |
| status Text? | 伴隨狀態(tài)碼的字符串信息 |
| readyState ? ? ? ? ? ? ? | 對(duì)象狀態(tài)值,存有服務(wù)器響應(yīng)的狀態(tài)信息。 每當(dāng) readyState 改變時(shí),onreadystatechange 函數(shù)就會(huì)被執(zhí)行。 |
?readyState 屬性可能的值:
| ? ? 0 | ? 請(qǐng)求未初始化(在調(diào)用 open() 之前) |
| ? ? 1 | ? 請(qǐng)求已提出(調(diào)用 send() 之前) |
| ? ? 2 | ? 請(qǐng)求已發(fā)送(這里通常可以從響應(yīng)得到內(nèi)容頭部) |
| ? ? 3 | ? 請(qǐng)求處理中(響應(yīng)中通常有部分?jǐn)?shù)據(jù)可用,但是服務(wù)器還沒(méi)有完成響應(yīng)) |
| ? ? 4 | ? 請(qǐng)求已完成,此時(shí)可以通過(guò)通過(guò)responseXml和responseText獲取完整的回應(yīng)數(shù)據(jù)。? |
但是,由于各瀏覽器之間存在差異,所以創(chuàng)建一個(gè)XMLHttpRequest對(duì)象可能需要不同的方法。這個(gè)差異主要體現(xiàn)在IE和其它瀏覽器之間。下面是一個(gè)比較標(biāo)準(zhǔn)的創(chuàng)建XMLHttpRequest對(duì)象的方法。
?
/** 創(chuàng)建XMLHttpRequest對(duì)象* */function ajaxFunction(){var xmlHttp;try { // Firefox, Opera 8.0+, SafarixmlHttp = new XMLHttpRequest();} catch (e) { // Internet Explorertry {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {alert("您的瀏覽器不支持AJAX!");return false;}}}return xmlHttp;}?
?
?
AJAX(客戶(hù)端)開(kāi)發(fā)步驟:
1.創(chuàng)建XMLHttpRequest對(duì)象
var xmlHttp = ajaxFunction();2.接受服務(wù)器端的響應(yīng)
/* readyState 屬性存有服務(wù)器響應(yīng)的狀態(tài)信息。每當(dāng) readyState 改變時(shí),onreadystatechange 函數(shù)就會(huì)被執(zhí)行。*/ xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState==4){var data=xmlHttp.responseText;alert("xmlHttp.responseText:"+data);} }3.打開(kāi)和服務(wù)器的連接
/** bstrMethod: http方法,例如:POST、GET、PUT及PROPFIND。大小寫(xiě)不敏感。 * bstrUrl: 請(qǐng)求的URL地址,可以為絕對(duì)地址也可以為相對(duì)地址。 * varAsync [可選]:布爾型,指定此請(qǐng)求是否為異步方式,默認(rèn)為true。如果為真,當(dāng)狀態(tài)改變時(shí)會(huì)調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。 * bstrUser [可選]:如果服務(wù)器需要驗(yàn)證,此處指定用戶(hù)名,如果未指定,當(dāng)服務(wù)器需要驗(yàn)證時(shí),會(huì)彈出驗(yàn)證窗口。 * bstrPassword [可選]:驗(yàn)證信息中的密碼部分,如果用戶(hù)名為空,則此值將被忽略。 */ xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword); //POST方式向服務(wù)器發(fā)送AJAX請(qǐng)求時(shí)要通過(guò)設(shè)置請(qǐng)求頭來(lái)指定為application/x-www-form-urlencoded編碼類(lèi)型, 代碼如下: xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");4.發(fā)送請(qǐng)求到http服務(wù)器
/* varBody:欲通過(guò)此請(qǐng)求發(fā)送的數(shù)據(jù)。 */ xmlHttp.send(varBody);?
個(gè)人博客:學(xué)習(xí)園
原文地址:http://www.xuexiyuan.cn/article/detail/192.html
?
?
?
?
?
?
?
?
?
?
總結(jié)
以上是生活随笔為你收集整理的AJAX入门——工作原理的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: JavaScript省市二级联动
- 下一篇: NYOJ 24 素数距离问题