AJAX 從零學起

AJAX 簡介

 AJAX 指非同步 JavaScript 及 XML（Asynchronous JavaScript And XML）。
 AJAX 是一種在 2005 年由 Google 推廣開來的編程模式。
 AJAX 不是一種新的程式設計語言，而是一種使用現有標準的新方法。
 通過 AJAX，你可以建立更好、更快以及更友好的 WEB 應用程式。
 AJAX 基於 JavaScript 和 HTTP 要求（HTTP requests）
 什麼是 AJAX ？
 AJAX = 非同步 JavaScript 和 XML。
 AJAX 是一種用於建立快速動態網頁的技術。
 通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
 

 AJAX - 建立 XMLHttpRequest 對象

 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 ：
 var xmlhttp;
 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   

 向伺服器發送請求

 如需將請求發送到伺服器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
 xmlhttp.open("GET","test1.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 更穩定也更可靠。
 
 

 AJAX - 伺服器響應

 如需獲得來自伺服器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
 responseText：獲得字串形式的響應資料。
 responseXML：獲得 XML 形式的響應資料。
 
 

 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 時，表示響應已就緒。
 
 使用 Callback 函數
 callback 函數是一種以參數形式傳遞給另一個函數的函數。
 如果您的網站上存在多個 AJAX 任務，那麼您應該為建立 XMLHttpRequest 對象編寫一個標準的函數，並為每個 AJAX 任務調用該函數。
 該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）。