明輝手游網(wǎng)中心:是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺!

Ajax如何完成頁面異步更新

[摘要]這次給大家?guī)鞟jax怎樣實現(xiàn)網(wǎng)頁異步更新,Ajax實現(xiàn)網(wǎng)頁異步更新的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。1:ajax的概念全稱:Asynchronous Javascript And XmlAJAX不是一種新的編程語言,而是一種用于創(chuàng)建更快更好以及交互性更強的WEB應用程序技術(shù),該技...
這次給大家?guī)鞟jax怎樣實現(xiàn)網(wǎng)頁異步更新,Ajax實現(xiàn)網(wǎng)頁異步更新的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。

1:ajax的概念

全稱:Asynchronous Javascript And Xml

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

2:ajax的優(yōu)勢

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

異步與服務器通信。

基于標準被廣泛支持。

前端與后端分離。

節(jié)省帶寬。

3:編寫步驟

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

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

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請求,并指定此請求的方法,URL以及驗證信息。

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

type:HTTP請求方式,GET、POST等。大小寫不敏感。

url:請求地址。

async:布爾型,請求是否為異步方式。默認為true。如果為真,當狀態(tài)改變時會調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。(可選)

user:如果服務器需要驗證,此處指定用戶名,如果未指定,當服務器需要驗證時,會彈出驗證窗口。(少用僅了解)

password:驗證信息中的密碼部分,如果用戶名為空,則此值將會被忽略。(少用僅了解)

注:

在AJAX中,其實我們就是來模擬正常的表單提交數(shù)據(jù)。正常的表單在POST數(shù)據(jù)時,會發(fā)送Content-Type字段,所以我們在AJAX中就要指定該字段值為application/x-www-form-urlencoded。并且對字段名稱和值進行編碼處理在發(fā)送。使用setRequestHeader:單獨指定請求的某個HTTP頭。

注:數(shù)據(jù)應使用encocdeURIComponent()函數(shù)進行編碼。

3.發(fā)送指令。

send():發(fā)送請求到HTTP服務器并接收回應。

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

xhr.send(body);

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

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

5.客戶端接收。

6.釋放XMLHttpRequest對象。

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

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

xhr.onreadystatechange = function(){}

readyState屬性:返回請求的當前狀態(tài)。

狀態(tài):

0:對象已建立,尚未初始化(未調(diào)用open方法)。

1:對象已建立,尚未調(diào)用send方法。

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

3:開始接收數(shù)據(jù),因為響應以及HTTP頭不全,這時通過responseBody和responseText獲取部分數(shù)據(jù)會出現(xiàn)錯誤。

4:數(shù)據(jù)接收完畢,此時可以通過responseBody和responseText獲取完整的響應數(shù)據(jù)。

status屬性:返回當前請求的狀態(tài)碼。

200 OK:請求文檔已經(jīng)找到,并正確返回。

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

403 Forbidden:請求者對所請求的文檔不具有相應的權(quán)限。

404 Not Found:請求的文檔沒找到。

statusText屬性:返回當前請求的響應行信息。

responseXML屬性:將響應信息格式化為XML Document對象返回。

responseText屬性:將響應信息作為字符串返回。

5:JS解析JSON

JSON簡介:(js文章中有提到)

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

ES5新增的兩個方法:

JSON.parse:將JSON字符串數(shù)據(jù)轉(zhuǎn)換為JSON對象。

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

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

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

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

操作相應的DOM節(jié)點(例如評論列表的分頁效果)

7:事件委托的應用

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

8:前后端分離

后臺只管數(shù)據(jù)輸出和業(yè)務邏輯處理,前端負責交互邏輯和界面展示。簡單的說:前端靜態(tài)頁面中沒有有后臺程序代碼,后臺輸出不帶有HTML標簽的數(shù)據(jù)。

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

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

相關(guān)閱讀:

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

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


網(wǎng)站建設是一個廣義的術(shù)語,涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。