Ajax如何實現網頁異步更新

小編給大家分享一下Ajax如何實現網頁異步更新，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

1：ajax的概念

全稱：Asynchronous Javascript And Xml

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

2：ajax的優勢

無刷新更新數據。

異步與服務器通信。

基于標準被廣泛支持。

前端與后端分離。

節省帶寬。

3：編寫步驟

1.創建XMLHttpRequest對象。

所有現代瀏覽器(IE7+，chrome，firefox，opera，safari)均內建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的連接，指定發送方式、URL以及權限等。

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

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

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

url：請求地址。

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

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

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

注：

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

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

3.發送指令。

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

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

xhr.send(body);

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

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

5.客戶端接收。

6.釋放XMLHttpRequest對象。

4：回調函數

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

xhr.onreadystatechange = function(){}

readyState屬性：返回請求的當前狀態。

狀態：

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

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

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

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

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

status屬性：返回當前請求的狀態碼。

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

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

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

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

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

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

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

5：JS解析JSON

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

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

ES5新增的兩個方法：

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

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

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

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

6：局部數據刷新

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

7：事件委托的應用

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

8：前后端分離

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

前后端分離靠ajax來實現數據的交互。（函數分裝實現具體的分離，demo中給出）

看完了這篇文章，相信你對Ajax如何實現網頁異步更新有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！