本文介紹了Ajax最基礎(chǔ)的操作和概念鹏溯，希望能幫助大家初步認(rèn)識(shí)Ajax
1.基本概念
AJAX = Asynchronous JavaScript and XML（異步的JavaScript 和 XML）。
AJAX 不是新的編程語(yǔ)言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法举庶。
AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁(yè)面的情況下地技，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容摄职。
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行倍试。
功能：向服務(wù)器異步發(fā)送和接收數(shù)據(jù)，然后用JavaScript解析蛋哭。
核心規(guī)范：名稱繼承于用來(lái)建立和發(fā)送請(qǐng)求的JavaScript對(duì)象：XMLHttpRequest县习。
規(guī)范的兩個(gè)等級(jí)：
Level1：基礎(chǔ)級(jí)別功能，所有主流瀏覽器都實(shí)現(xiàn)了谆趾。
Level2：擴(kuò)展了最初的功能躁愿，讓它更容易與form元素協(xié)作，并支持一些規(guī)范沪蓬。
</br>
2.創(chuàng)建XMLHttpRequest對(duì)象
XMLHttpRequest 是AJAX 的基礎(chǔ)彤钟。
所有現(xiàn)代瀏覽器均支持XMLHttpRequest 對(duì)象（IE5 和IE6 使用ActiveXObject）。
XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)跷叉。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下逸雹，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新营搅。
創(chuàng)建XMLHttpRequest 對(duì)象的語(yǔ)法：
variable=new XMLHttpRequest();
老版本的Internet,Explorer （IE5 和IE6）使用 ActiveX 對(duì)象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
</br>
3.向服務(wù)器發(fā)送請(qǐng)求
XMLHttpRequest 對(duì)象用于和服務(wù)器交換數(shù)據(jù)。
向服務(wù)器發(fā)送請(qǐng)求
如需將請(qǐng)求發(fā)送到服務(wù)器梆砸，我們使用XMLHttpRequest 對(duì)象的 open() 和
send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
3.1 GET 還是POST转质？
與POST 相比，GET 更簡(jiǎn)單也更快帖世，并且在大部分情況下都能用休蟹。
然而，在以下情況中狮暑，請(qǐng)使用POST 請(qǐng)求：
· 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
· 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
· 發(fā)送包含未知字符的用戶輸入時(shí)鸡挠，POST 比 GET 更穩(wěn)定也更可靠
POST適用于每一個(gè)請(qǐng)求都會(huì)導(dǎo)致服務(wù)器終端發(fā)生某種變化的場(chǎng)合。
3.1.1 GET 請(qǐng)求
一個(gè)簡(jiǎn)單的GET 請(qǐng)求：
實(shí)例
xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send();
在上面的例子中搬男，您可能得到的是緩存的結(jié)果拣展。
為了避免這種情況，請(qǐng)向URL 添加一個(gè)唯一的 ID：
實(shí)例
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
如果您希望通過GET 方法發(fā)送信息缔逛，請(qǐng)向 URL 添加信息：
實(shí)例
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
3.1.2 POST 請(qǐng)求
一個(gè)簡(jiǎn)單POST 請(qǐng)求：
實(shí)例
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像HTML 表單那樣 POST 數(shù)據(jù)备埃，請(qǐng)使用 setRequestHeader() 來(lái)添加HTTP 頭。然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：
實(shí)例
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 獲取和設(shè)置標(biāo)頭setRequestHeader(header,value)
作用：可以設(shè)置發(fā)送給服務(wù)器的請(qǐng)求標(biāo)頭Header褐奴，和讀取服務(wù)器響應(yīng)中的標(biāo)頭按脚。
XMLHttpRequest對(duì)象中與標(biāo)頭有關(guān)的方法：
setRequestHeader(<header>,<value>)——用指定值設(shè)置標(biāo)頭；
getResponseHeader(<header>)——獲取指定標(biāo)頭的值;
getAllResponseHeaders()——以單個(gè)字符串形式獲取所有標(biāo)頭敦冬；
· header: 規(guī)定頭的名稱· value: 規(guī)定頭的值
適用的地方：
1.覆蓋請(qǐng)求的HTTP方法 X-HTTP-Method-Override
場(chǎng)景：許多主流的Web技術(shù)只支持GET和POST方法辅搬，而且不少防火墻只允許GET和POST請(qǐng)求通過。為了讓請(qǐng)求以我們想要的形式處理脖旱。
用法：使用X-HTTP-Method-Override標(biāo)頭堪遂，值為想要使用的HTTP方法。
httpRequest.setRequestHeader("X-HTTP-Method-Override","DELETE");
注意：這個(gè)方法要在調(diào)用open()之后設(shè)置萌庆，不然會(huì)拋出一個(gè)錯(cuò)誤溶褪。
2.禁用內(nèi)容緩存： Cache-Control
場(chǎng)景：一些瀏覽器會(huì)緩存通過Ajax請(qǐng)求所獲得的內(nèi)容，導(dǎo)致腳本的改動(dòng)不能立即反映到瀏覽器中践险。
用法：使用Cache-Control標(biāo)頭猿妈，設(shè)置值為no-cache
httpRequest.setRequestHeader("Cache-Control","no-cache");
3.2 url - 服務(wù)器上的文件
open() 方法的 url 參數(shù)是服務(wù)器上文件的地址：
xmlhttp.open("GET","ajax_test.html",true);
該文件可以是任何類型的文件，比如.txt 和 .xml巍虫，或者服務(wù)器腳本文件彭则，比如 .asp 和.php （在傳回響應(yīng)之前，能夠在服務(wù)器上執(zhí)行任務(wù)）占遥。
3.3 異步 -True 或False俯抖？
AJAX 指的是異步 JavaScript 和XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 對(duì)象如果要用于 AJAX 的話筷频，其open() 方法的 async 參數(shù)必須設(shè)置為 true：
xmlhttp.open("GET","ajax_test.html",true);
對(duì)于web 開發(fā)人員來(lái)說(shuō)蚌成，發(fā)送異步請(qǐng)求是一個(gè)巨大的進(jìn)步前痘。很多在服務(wù)器執(zhí)行的任務(wù)都相當(dāng)費(fèi)時(shí)。AJAX 出現(xiàn)之前担忧，這可能會(huì)引起應(yīng)用程序掛起或停止芹缔。
通過AJAX，JavaScript 無(wú)需等待服務(wù)器的響應(yīng)瓶盛，而是：
· 在等待服務(wù)器響應(yīng)時(shí)執(zhí)行其他腳本
· 當(dāng)響應(yīng)就緒后對(duì)響應(yīng)進(jìn)行處理
</br>
4. 服務(wù)器 響應(yīng)
4.1 AJAX - onreadystatechange 事件
這里講的就是發(fā)生響應(yīng)的前提條件
當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)最欠，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
每當(dāng)readyState 改變時(shí)惩猫，就會(huì)觸發(fā) onreadystatechange 事件芝硬。
readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。
下面是XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：
4.1.1 簡(jiǎn)單情況
在onreadystatechange 事件中轧房，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)拌阴。
當(dāng)**readyState 等于 4 且狀態(tài)為 200 **時(shí)，表示響應(yīng)已就緒：
實(shí)例
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
4.1.2 使用回調(diào)函數(shù)
回調(diào)函數(shù)是一種以參數(shù)形式傳遞給另一個(gè)函數(shù)的函數(shù)奶镶。
如果您的網(wǎng)站上存在多個(gè)AJAX 任務(wù)迟赃，那么您應(yīng)該為創(chuàng)建 XMLHttpRequest 對(duì)象編寫一個(gè)標(biāo)準(zhǔn)的函數(shù)，并為每個(gè)AJAX 任務(wù)調(diào)用該函數(shù)厂镇。
該函數(shù)調(diào)用應(yīng)該包含 URL 以及發(fā)生 onreadystatechange 事件 時(shí)執(zhí)行的任務(wù)（每次調(diào)用可能不盡相同）：
實(shí)例
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");
} //創(chuàng)建對(duì)象
xmlhttp.onreadystatechange=cfunc;
//用cfunc調(diào)用響應(yīng)函數(shù)
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()//響應(yīng)執(zhí)行時(shí)的操作
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4&& xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
4.2 服務(wù)器響應(yīng)對(duì)象
如需獲得來(lái)自服務(wù)器的響應(yīng)纤壁，請(qǐng)使用XMLHttpRequest 對(duì)象的 **responseText 或responseXML **屬性。
responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)捺信。
responseXML：獲得 XML 形式的響應(yīng)數(shù)據(jù)酌媒。
4.2.1 responseText 屬性
如果來(lái)自服務(wù)器的響應(yīng)并非XML，請(qǐng)使用 responseText 屬性迄靠。
responseText 屬性返回字符串形式的響應(yīng)秒咨，因此您可以這樣使用：
實(shí)例
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4.2.2 responseXML 屬性
如果來(lái)自服務(wù)器的響應(yīng)是XML，而且需要作為 XML 對(duì)象進(jìn)行解析梨水，請(qǐng)使用responseXML 屬性：
實(shí)例
請(qǐng)求 cd_catalog.xml 文件拭荤，并解析響應(yīng)：
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.綜合實(shí)例
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
//創(chuàng)建對(duì)象
------------------------------------------------------
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 代碼
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//用cfunc調(diào)用響應(yīng)函數(shù)
------------------------------------------------------
xmlhttp.onreadystatechange=cfunc;
// 向服務(wù)器發(fā)送請(qǐng)求
------------------------------------------------------
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
//服務(wù)器響應(yīng)函數(shù)
------------------------------------------------------
function myFunction()
{
//傳入U(xiǎn)RL和響應(yīng)后執(zhí)行方法
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
//響應(yīng)條件
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//獲得字符串形式的響應(yīng)數(shù)據(jù)
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文本內(nèi)容</h2></div>
<button type="button" onclick="myFunction()">修改內(nèi)容</button>
</body>
</html>
