AJAX

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。

AJAX 最大的優勢是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。

AJAX 不須要任何瀏覽器插件，但須要用戶容許JavaScript在瀏覽器上執行。

AJAX 應用

• 運用XHTML+CSS來表達資訊；

• 運用JavaScript操做DOM（Document Object Model）來執行動態效果；
• 運用XML和XSLT操做資料;
• 運用XMLHttpRequest或新的Fetch API與網頁服務器進行異步資料交換；
• 注意：AJAX與Flash、Silverlight和Java Applet等RIA技術是有區分的。

AJAX 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。

什麼是 AJAX ？

AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用於建立快速動態網頁的技術。

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。

有不少使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。

AJAX是基於現有的Internet標準

AJAX是基於現有的Internet標準，而且聯合使用它們：

• XMLHttpRequest 對象 (異步的與服務器交換數據)
• JavaScript/DOM (信息顯示/交互)
• CSS (給數據定義樣式)
• XML (做爲轉換數據的格式)

AJAX應用程序與瀏覽器和平臺無關的！

AJAX - 建立 XMLHttpRequest 對象

XMLHttpRequest 是 AJAX 的基礎。

XMLHttpRequest 對象

全部現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

建立 XMLHttpRequest 對象

全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

建立 XMLHttpRequest 對象的語法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

爲了應對全部的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。若是支持，則建立 XMLHttpRequest 對象。若是不支持，則建立 ActiveXObject ：

AJAX - 向服務器發送請求請求

XMLHttpRequest 對象用於和服務器交換數據。

向服務器發送請求

如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

open(method,url,async)

規定請求的類型、URL 以及是否異步處理請求。

• method：請求的類型；GET 或 POST
• url：文件在服務器上的位置
• async：true（異步）或 false（同步）、

send(string)

將請求發送到服務器。

string：僅用於 POST 請求

GET 仍是 POST？

與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

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

POST 請求

若是須要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定您但願發送的數據：

setRequestHeader( header,value)

向請求添加 HTTP 頭。

• header: 規定頭的名稱
• value: 規定頭的值

url - 服務器上的文件

open() 方法的 url 參數是服務器上文件的地址：

該文件能夠是任何類型的文件，好比 .txt 和 .xml，或者服務器腳本文件，好比 .asp 和 .php （在傳回響應以前，可以在服務器上執行任務）。

異步 - True 或 False？

AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 對象若是要用於 AJAX 的話，其 open() 方法的 async 參數必須設置爲 true：

對於 web 開發人員來講，發送異步請求是一個巨大的進步。不少在服務器執行的任務都至關費時。AJAX 出現以前，這可能會引發應用程序掛起或中止。

經過 AJAX，JavaScript 無需等待服務器的響應，而是：

• 在等待服務器響應時執行其餘腳本
• 當響應就緒後對響應進行處理

Async=true

當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數：

Async = false

如需使用 async=false，請將 open() 方法中的第三個參數改成 false：

請記住，JavaScript 會等到服務器響應就緒才繼續執行。若是服務器繁忙或緩慢，應用程序會掛起或中止。

注意：當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面便可：

AJAX - 服務器 響應

服務器響應

如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

responseText:　　得到字符串形式的響應數據。

responseXML:　　得到 XML 形式的響應數據。

responseText 屬性

若是來自服務器的響應並不是 XML，請使用 responseText 屬性。

responseText 屬性返回字符串形式的響應，所以您能夠這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 屬性

若是來自服務器的響應是 XML，並且須要做爲 XML 對象進行解析，請使用 responseXML 屬性：

AJAX - onreadystatechange 事件

onreadystatechange 事件

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

onreadystatechange：　　存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

readyState：　　存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

• 0: 請求未初始化
• 1: 服務器鏈接已創建
• 2: 請求已接收
• 3: 請求處理中
• 4: 請求已完成，且響應已就緒

status：200: "OK"

404: 未找到頁面

在 onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

注意： onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-一、1-二、2-三、3-4，對應着 readyState 的每一個變化。

使用回調函數

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

若是您的網站上存在多個 AJAX 任務，那麼您應該爲建立 XMLHttpRequest 對象編寫一個標準的函數，併爲每一個 AJAX 任務調用該函數。

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

AJAX Database

AJAX 可用來與數據庫進行動態通訊。