一.什么是 AJAX ？
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用于創建快速動態網頁的技術。
通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖等等。
一. AJAX - 創建 XMLHttpRequest 對象
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。
創建 XMLHttpRequest 對象的語法：
XMLHTTP = new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
XMLHTTP = 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");
}
二. AJAX - 向服務器發送請求
讀取test1.txt文本
xmlhttp.open("GET","test1.html",true);
xmlhttp.send();
方法 描述
open(method,url,async) 規定請求的類型、URL 以及是否異步處理請求。
- method：請求的類型；GET 或 POST
- url：文件在服務器上的位置
- async：true（異步）或 false（同步）
send(string) 將請求發送到服務器。
string：僅用于 POST 請求
-
GET 請求
- 一個簡單的 GET 請求：
xmlhttp.open("GET","test1.html",true);
xmlhttp.send();
- 在上面的例子中，您可能得到的是緩存的結果.比如讀取文件test1.txt一次后,再次點擊按鈕不讀取.
- 為了避免這種情況，請向 URL 添加一個唯一的 ID：或者在后面添加用個變動的字符.
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
- POST 請求
- 一個簡單 POST 請求：
xmlhttp.open("POST","test1.html",true);
xmlhttp.send();
- 如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規定您希望發送的數據：
xmlhttp.open("POST","test1.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
- 方法描述
- setRequestHeader(header,value) 向請求添加 HTTP 頭。
- header: 規定頭的名稱
- value: 規定頭的值
異步 - True 或 False？
- AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
- XMLHttpRequest 對象如果要用于 AJAX 的話，其 open() 方法的 async 參數必須設置為 true：
xmlhttp.open("GET","test1.html",true);
通過 AJAX，JavaScript 無需等待服務器的響應，而是：
在等待服務器響應時執行其他腳本
當響應就緒后對響應進行處理Async = true
當使用 async=true 時，請規定在響應處于 onreadystatechange 事件中的就緒狀態時執行的函數：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.html",true);
xmlhttp.send();
三. AJAX - 服務器響應
- 接收傳送過來的數據,用對應語言的from 或get方法.
- 輸出文本在客戶端用
- 如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
- responseText 屬性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
四. AJAX - onreadystatechange 事件
通過事件來觸發判斷是否接收成功.和接收數據.改變前臺內容.當請求被發送到服務器時，我們需要執行一些基于響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。下面是 XMLHttpRequest 對象的三個重要的屬性：
-
下面是 XMLHttpRequest 對象的三個重要的屬性：
- onreadystatechange 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
- readyState 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化- 1: 服務器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應已就緒
- status 200: "OK" 表示連接正常
- 404: 未找到頁面
再最后使用 Callback 函數,在接受數據成功之后做某件事，失敗后又是做什么事
