Ajax(1) —— Ajax基礎

   Ajax(1) —— Ajax基礎

Ajax即Asynchronous JavaScript and XML，是異步的JavaScript與XML。Ajax提供了基于伺服器交換資料并實作局部更新網頁的技術，在不重新加載整個網頁的情況下，可以接受來自伺服器請求到的資料，提高了浏覽頁面的效率和使用者體驗。

XMLHttpRequest是Ajax的對象，所有現代浏覽器（IE7+、Firefox、Chrome、Safari、Opera）均支援XMLHttpRequest對象，而低版本的IE（IE5和IE6）使用ActiveXObject對象。XMLHttpRequest用于在背景與伺服器交換資料。即可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

為了相容所有浏覽器的情況，包括低版本的IE，建立Ajax對象可以使用如下代碼：

XMLHttpRequest對象用于和伺服器交換資料，将請求發送到伺服器，主要使用open()和send()方法

open：建立一個新的http請求，并指定此請求的方法、URL以及驗證資訊

文法：

示例代碼：

send：發送請求到http伺服器并接收回應：

varBody：僅用于POST請求。

對比一下簡單的GET方法發送資訊與POST方法發送資訊：

如果需要像 HTML 表單form中那樣 POST 資料，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的資料：

GET和POST使用場景：

GET相對于POST傳遞資料更簡單快捷，在不涉及資訊安全的場景下可以使用；

然而，在如下情況下，請使用POST請求傳遞資料：

無法使用緩存檔案（更新伺服器上的檔案或資料庫）

向伺服器發送大量資料（POST 沒有資料量限制）

發送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)，在這個方法中，當Async為true時，表示執行Ajax後端請求時是使用異步請求的方式，這裡需要在響應處使用onreadystatechange事件進行監聽Ajax的狀态：

其中Async參數為可選布爾型，指定此請求是否為異步方式，預設為true。如果為true，當狀态改變時會調用onreadystatechange屬性指定的回調函數。

如果需要擷取來自伺服器的響應，需要調用XMLHttpRequest對象的responseText或者responseXML屬性。

屬性

描述

responseText

獲得字元串形式的響應資料

responseXML

獲得XML形式的響應資料

responseText屬性：

将響應資訊作為字元串傳回，是以你可以這樣使用：

responseXML屬性：

如果來自伺服器的響應是XML，而且需要作為XML對象進行解析，請使用responseXML屬性，比如請求books.xml檔案，并解析響應：

callback函數是一種以參數形式傳遞給另一個函數的函數。

在執行多個Ajax調用任務時，可以在XMLHttpRequest對象中建立一個标準的執行流程函數，每次Ajax請求都調用這個函數執行open、send一套流程。

該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：