Ajax怎么完成頁面異步更新

1：ajax的概念

全稱：Asynchronous Javascript And Xml

AJAX不是一種新的編程語言，而是一種用于創(chuàng)建更快更好以及交互性更強(qiáng)的WEB應(yīng)用程序技術(shù)，該技術(shù)在98年前后得到了應(yīng)用。通過AJAX，你的JS可以通過JS的XMLHttpRequest對(duì)象在頁面不重載的情況下與服務(wù)器直接進(jìn)行通信。這樣可以在服務(wù)器請(qǐng)求到想要的數(shù)據(jù)，而不是整個(gè)頁面。AJAX的核心就是JS的XMLHttpRequest對(duì)象。xhr對(duì)象是在IE5中首次引入，它是一種支持異步請(qǐng)求的對(duì)象。

2：ajax的優(yōu)勢(shì)

無刷新更新數(shù)據(jù)。

異步與服務(wù)器通信。

基于標(biāo)準(zhǔn)被廣泛支持。

前端與后端分離。

節(jié)省帶寬。

3：編寫步驟

1.創(chuàng)建XMLHttpRequest對(duì)象。

所有現(xiàn)代瀏覽器(IE7+，chrome，firefox，opera，safari)均內(nèi)建XMLHttpRequest對(duì)象。但是IE5、6使用ActiveXObject對(duì)象。

function getAjax() {
var  xmlhttp = null;
if(window.ActiveXObject){
         xmlhttp = new ActiveXObject(’Microsoft.XMLHTTP’);
} else if(window.XMLHttpRequest){
         xmlhttp = new XMLHttpRequest();
}
return  xmlhttp;
}

2.打開與Server的連接，指定發(fā)送方式、URL以及權(quán)限等。

open方法：創(chuàng)建新的HTTP請(qǐng)求，并指定此請(qǐng)求的方法，URL以及驗(yàn)證信息。

xhr.open(type, url, async, user, password);

type：HTTP請(qǐng)求方式，GET、POST等。大小寫不敏感。

url：請(qǐng)求地址。

async：布爾型，請(qǐng)求是否為異步方式。默認(rèn)為true。如果為真，當(dāng)狀態(tài)改變時(shí)會(huì)調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。（可選）

user：如果服務(wù)器需要驗(yàn)證，此處指定用戶名，如果未指定，當(dāng)服務(wù)器需要驗(yàn)證時(shí)，會(huì)彈出驗(yàn)證窗口。（少用僅了解）

password：驗(yàn)證信息中的密碼部分，如果用戶名為空，則此值將會(huì)被忽略。（少用僅了解）

注：

在AJAX中，其實(shí)我們就是來模擬正常的表單提交數(shù)據(jù)。正常的表單在POST數(shù)據(jù)時(shí)，會(huì)發(fā)送Content-Type字段，所以我們?cè)贏JAX中就要指定該字段值為application/x-www-form-urlencoded。并且對(duì)字段名稱和值進(jìn)行編碼處理在發(fā)送。使用setRequestHeader：?jiǎn)为?dú)指定請(qǐng)求的某個(gè)HTTP頭。

注：數(shù)據(jù)應(yīng)使用encocdeURIComponent()函數(shù)進(jìn)行編碼。

3.發(fā)送指令。

send()：發(fā)送請(qǐng)求到HTTP服務(wù)器并接收回應(yīng)。

此方法的同步或異步方式取決于open方法中的async參數(shù)，如果async為true，此方法將立即返回，如果為false，此方法將會(huì)等待請(qǐng)求完成或者超時(shí)時(shí)才會(huì)返回。

xhr.send(body);

body：通過此請(qǐng)求發(fā)送的數(shù)據(jù)。GET請(qǐng)求設(shè)置為null即可。

4.等待并接收服務(wù)器返回的處理結(jié)果。

5.客戶端接收。

6.釋放XMLHttpRequest對(duì)象。

4：回調(diào)函數(shù)

通過onreadystatechange屬性指定readystate屬性改變時(shí)的事件處理回調(diào)函數(shù)。

xhr.onreadystatechange = function(){}

readyState屬性：返回請(qǐng)求的當(dāng)前狀態(tài)。

狀態(tài)：

0：對(duì)象已建立，尚未初始化（未調(diào)用open方法）。

1：對(duì)象已建立，尚未調(diào)用send方法。

2：send方法已調(diào)用。但是當(dāng)前的狀態(tài)以及HTTP狀態(tài)未知。

3：開始接收數(shù)據(jù)，因?yàn)轫憫?yīng)以及HTTP頭不全，這時(shí)通過responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤。

4：數(shù)據(jù)接收完畢，此時(shí)可以通過responseBody和responseText獲取完整的響應(yīng)數(shù)據(jù)。

status屬性：返回當(dāng)前請(qǐng)求的狀態(tài)碼。

200 OK：請(qǐng)求文檔已經(jīng)找到，并正確返回。

304 Not Modified：擁有一個(gè)本地的緩存副本，服務(wù)器端內(nèi)容與此相同。

403 Forbidden：請(qǐng)求者對(duì)所請(qǐng)求的文檔不具有相應(yīng)的權(quán)限。

404 Not Found：請(qǐng)求的文檔沒找到。

statusText屬性：返回當(dāng)前請(qǐng)求的響應(yīng)行信息。

responseXML屬性：將響應(yīng)信息格式化為XML Document對(duì)象返回。

responseText屬性：將響應(yīng)信息作為字符串返回。

5：JS解析JSON

JSON簡(jiǎn)介：（js文章中有提到）

定義：Javascript Object Notation，一種輕量級(jí)的基于文本的數(shù)據(jù)交換格式，易于人閱讀和編寫，也能提高網(wǎng)絡(luò)傳輸速率。

ES5新增的兩個(gè)方法：

JSON.parse：將JSON字符串?dāng)?shù)據(jù)轉(zhuǎn)換為JSON對(duì)象。

JSON.stringify：將JSON對(duì)象轉(zhuǎn)換為JSON字符串。

注：1、瀏覽器支持：IE8+。

　　2、JSON格式的字符串里面的key或者字符串型的value都必須用雙引號(hào)包裹。

6：局部數(shù)據(jù)刷新

操作相應(yīng)的DOM節(jié)點(diǎn)（例如評(píng)論列表的分頁效果）

7：事件委托的應(yīng)用

事件委托：利用冒泡機(jī)制，將子元素事件委托給父元素執(zhí)行（例如某些新聞網(wǎng)站有去除部分用戶不喜好的新聞）

8：前后端分離

后臺(tái)只管數(shù)據(jù)輸出和業(yè)務(wù)邏輯處理，前端負(fù)責(zé)交互邏輯和界面展示。簡(jiǎn)單的說：前端靜態(tài)頁面中沒有有后臺(tái)程序代碼，后臺(tái)輸出不帶有HTML標(biāo)簽的數(shù)據(jù)。

前后端分離靠ajax來實(shí)現(xiàn)數(shù)據(jù)的交互。（函數(shù)分裝實(shí)現(xiàn)具體的分離，demo中給出）

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

如何解決layer.photos()異步修改圖片地址后顯示異常的問題

以上就是Ajax怎樣實(shí)現(xiàn)網(wǎng)頁異步更新的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！