Ajax怎麼實現網頁非同步更新

這次帶給大家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中給出）

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

如何解決layer.photos()非同步修改圖片位址後顯示異常的問題

##

以上是Ajax怎麼實現網頁非同步更新的詳細內容。更多資訊請關注PHP中文網其他相關文章！