這篇文章主要講解了“Ajax實現網頁異步更新的方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Ajax實現網頁異步更新的方法”吧！

網站建設哪家好，找創(chuàng)新互聯公司！專注于網頁設計、網站建設、微信開發(fā)、重慶小程序開發(fā)、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯還提供了漣源免費建站歡迎大家使用！

1：ajax的概念

全稱：AsynchronousJavascriptAndXml

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

2：ajax的優(yōu)勢

無刷新更新數據。

異步與服務器通信。

基于標準被廣泛支持。

前端與后端分離。

節(jié)省帶寬。

3：編寫步驟

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

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

functiongetAjax(){

varxmlhttp=null;

if(window.ActiveXObject){

xmlhttp=newActiveXObject(’Microsoft.XMLHTTP’);

}elseif(window.XMLHttpRequest){

xmlhttp=newXMLHttpRequest();

}

returnxmlhttp;

}

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

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

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

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

url：請求地址。

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

user：如果服務器需要驗證，此處指定用戶名，如果未指定，當服務器需要驗證時，會彈出驗證窗口。（少用僅了解）

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

注：

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

注：數據應使用encocdeURIComponent()函數進行編碼。

3.發(fā)送指令。

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

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

xhr.send(body);

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

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

5.客戶端接收。

6.釋放XMLHttpRequest對象。

4：回調函數

通過onreadystatechange屬性指定readystate屬性改變時的事件處理回調函數。

xhr.onreadystatechange=function(){}

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

狀態(tài)：

0：對象已建立，尚未初始化（未調用open方法）。

1：對象已建立，尚未調用send方法。

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

3：開始接收數據，因為響應以及HTTP頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤。

4：數據接收完畢，此時可以通過responseBody和responseText獲取完整的響應數據。

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

200OK：請求文檔已經找到，并正確返回。

304NotModified：擁有一個本地的緩存副本，服務器端內容與此相同。

403Forbidden：請求者對所請求的文檔不具有相應的權限。

404NotFound：請求的文檔沒找到。

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

responseXML屬性：將響應信息格式化為XMLDocument對象返回。

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

5：JS解析JSON

JSON簡介：（js文章中有提到）

定義：JavascriptObjectNotation，一種輕量級的基于文本的數據交換格式，易于人閱讀和編寫，也能提高網絡傳輸速率。

ES5新增的兩個方法：

JSON.parse：將JSON字符串數據轉換為JSON對象。

JSON.stringify：將JSON對象轉換為JSON字符串。

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

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

6：局部數據刷新

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

7：事件委托的應用

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

8：前后端分離

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

前后端分離靠ajax來實現數據的交互。

感謝各位的閱讀，以上就是“Ajax實現網頁異步更新的方法”的內容了，經過本文的學習后，相信大家對Ajax實現網頁異步更新的方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

文章題目：Ajax實現網頁異步更新的方法
本文路徑：http://chinadenli.net/article26/gehcjg.html

成都網站建設公司_創(chuàng)新互聯，為您提供手機網站建設、關鍵詞優(yōu)化、品牌網站設計、微信小程序、品牌網站制作、全網營銷推廣

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯