本文介紹了Ajax最基礎的操作和概念，希望能幫助大家初步認識Ajax
1.基本概念
AJAX = Asynchronous JavaScript and XML（異步的JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現有標準的新方法。
AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據并更新部分網頁內容。
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。
功能：向服務器異步發送和接收數據，然后用JavaScript解析。
核心規范：名稱繼承于用來建立和發送請求的JavaScript對象：XMLHttpRequest。
規范的兩個等級：
Level1：基礎級別功能，所有主流瀏覽器都實現了。
Level2：擴展了最初的功能，讓它更容易與form元素協作，并支持一些規范。
</br>
2.創建XMLHttpRequest對象
XMLHttpRequest 是AJAX 的基礎。
所有現代瀏覽器均支持XMLHttpRequest 對象（IE5 和IE6 使用ActiveXObject）。
XMLHttpRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
創建XMLHttpRequest 對象的語法：
variable=new XMLHttpRequest();
老版本的Internet,Explorer （IE5 和IE6）使用 ActiveX 對象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
</br>
3.向服務器發送請求
XMLHttpRequest 對象用于和服務器交換數據。
向服務器發送請求
如需將請求發送到服務器，我們使用XMLHttpRequest 對象的 open() 和
send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
3.1 GET 還是POST？
與POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用POST 請求：
· 無法使用緩存文件（更新服務器上的文件或數據庫）
· 向服務器發送大量數據（POST 沒有數據量限制）
· 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
POST適用于每一個請求都會導致服務器終端發生某種變化的場合。
3.1.1 GET 請求
一個簡單的GET 請求：
實例
xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send();
在上面的例子中，您可能得到的是緩存的結果。
為了避免這種情況，請向URL 添加一個唯一的 ID：
實例
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
如果您希望通過GET 方法發送信息，請向 URL 添加信息：
實例
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
3.1.2 POST 請求
一個簡單POST 請求：
實例
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加HTTP 頭。然后在 send() 方法中規定您希望發送的數據：
實例
xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");
3.1.3 獲取和設置標頭setRequestHeader(header,value)
作用：可以設置發送給服務器的請求標頭Header，和讀取服務器響應中的標頭。
XMLHttpRequest對象中與標頭有關的方法：
setRequestHeader(<header>,<value>)——用指定值設置標頭；
getResponseHeader(<header>)——獲取指定標頭的值;
getAllResponseHeaders()——以單個字符串形式獲取所有標頭；
· header: 規定頭的名稱· value: 規定頭的值
適用的地方：
1.覆蓋請求的HTTP方法 X-HTTP-Method-Override
場景：許多主流的Web技術只支持GET和POST方法，而且不少防火墻只允許GET和POST請求通過。為了讓請求以我們想要的形式處理。
用法：使用X-HTTP-Method-Override標頭，值為想要使用的HTTP方法。
httpRequest.setRequestHeader("X-HTTP-Method-Override","DELETE");
注意：這個方法要在調用open()之后設置，不然會拋出一個錯誤。
2.禁用內容緩存： Cache-Control
場景：一些瀏覽器會緩存通過Ajax請求所獲得的內容，導致腳本的改動不能立即反映到瀏覽器中。
用法：使用Cache-Control標頭，設置值為no-cache
httpRequest.setRequestHeader("Cache-Control","no-cache");
3.2 url - 服務器上的文件
open() 方法的 url 參數是服務器上文件的地址：
xmlhttp.open("GET","ajax_test.html",true);
該文件可以是任何類型的文件，比如.txt 和 .xml，或者服務器腳本文件，比如 .asp 和.php （在傳回響應之前，能夠在服務器上執行任務）。
3.3 異步 -True 或False？
AJAX 指的是異步 JavaScript 和XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 對象如果要用于 AJAX 的話，其open() 方法的 async 參數必須設置為 true：
xmlhttp.open("GET","ajax_test.html",true);
對于web 開發人員來說，發送異步請求是一個巨大的進步。很多在服務器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程序掛起或停止。
通過AJAX，JavaScript 無需等待服務器的響應，而是：
· 在等待服務器響應時執行其他腳本
· 當響應就緒后對響應進行處理
</br>
4. 服務器 響應
4.1 AJAX - onreadystatechange 事件
這里講的就是發生響應的前提條件
當請求被發送到服務器時，我們需要執行一些基于響應的任務。
每當readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。
下面是XMLHttpRequest 對象的三個重要的屬性：
4.1.1 簡單情況
在onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。
當**readyState 等于 4 且狀態為 200 **時，表示響應已就緒：
實例
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
4.1.2 使用回調函數
回調函數是一種以參數形式傳遞給另一個函數的函數。
如果您的網站上存在多個AJAX 任務，那么您應該為創建 XMLHttpRequest 對象編寫一個標準的函數，并為每個AJAX 任務調用該函數。
該函數調用應該包含 URL 以及發生 onreadystatechange 事件 時執行的任務（每次調用可能不盡相同）：
實例
function myFunction() {
loadXMLDoc("/try/ajax/ajax_info.txt", function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
var xmlhttp;
function loadXMLDoc(url,cfunc){
if(window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 代碼
xmlhttp=new XMLHttpRequest();
}else{// IE6, IE5 代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} //創建對象
xmlhttp.onreadystatechange=cfunc;
//用cfunc調用響應函數
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()//響應執行時的操作
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4&& xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
4.2 服務器響應對象
如需獲得來自服務器的響應，請使用XMLHttpRequest 對象的 **responseText 或responseXML **屬性。
responseText：獲得字符串形式的響應數據。
responseXML：獲得 XML 形式的響應數據。
4.2.1 responseText 屬性
如果來自服務器的響應并非XML，請使用 responseText 屬性。
responseText 屬性返回字符串形式的響應，因此您可以這樣使用：
實例
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4.2.2 responseXML 屬性
如果來自服務器的響應是XML，而且需要作為 XML 對象進行解析，請使用responseXML 屬性：
實例
請求 cd_catalog.xml 文件，并解析響應：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
</br>
5.綜合實例
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
//創建對象
------------------------------------------------------
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 代碼
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//用cfunc調用響應函數
------------------------------------------------------
xmlhttp.onreadystatechange=cfunc;
// 向服務器發送請求
------------------------------------------------------
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
//服務器響應函數
------------------------------------------------------
function myFunction()
{
//傳入URL和響應后執行方法
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
//響應條件
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//獲得字符串形式的響應數據
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文本內容</h2></div>
<button type="button" onclick="myFunction()">修改內容</button>
</body>
</html>
