一.什么是 AJAX 遭赂？
AJAX = 異步 JavaScript 和 XML循诉。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換撇他，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新茄猫。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下狈蚤，對(duì)網(wǎng)頁的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容划纽，必需重載整個(gè)網(wǎng)頁面脆侮。
有很多使用 AJAX 的應(yīng)用程序案例：新浪微博、Google 地圖等等勇劣。
一. AJAX - 創(chuàng)建 XMLHttpRequest 對(duì)象
所有現(xiàn)代瀏覽器（IE7+靖避、Firefox、Chrome比默、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對(duì)象幻捏。
創(chuàng)建 XMLHttpRequest 對(duì)象的語法：
XMLHTTP = new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對(duì)象：
XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
為了應(yīng)對(duì)所有的現(xiàn)代瀏覽器，包括 IE5 和 IE6命咐，請(qǐng)檢查瀏覽器是否支持 XMLHttpRequest 對(duì)象篡九。如果支持，則創(chuàng)建 XMLHttpRequest
對(duì)象侈百。如果不支持瓮下，則創(chuàng)建 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 - 向服務(wù)器發(fā)送請(qǐng)求
讀取test1.txt文本
xmlhttp.open("GET","test1.html",true);
xmlhttp.send();
方法 描述
open(method,url,async) 規(guī)定請(qǐng)求的類型、URL 以及是否異步處理請(qǐng)求钝域。
- method：請(qǐng)求的類型讽坏；GET 或 POST
- url：文件在服務(wù)器上的位置
- async：true（異步）或 false（同步）
send(string) 將請(qǐng)求發(fā)送到服務(wù)器。
string：僅用于 POST 請(qǐng)求
-
GET 請(qǐng)求
- 一個(gè)簡(jiǎn)單的 GET 請(qǐng)求：
xmlhttp.open("GET","test1.html",true);
xmlhttp.send();
- 在上面的例子中例证，您可能得到的是緩存的結(jié)果.比如讀取文件test1.txt一次后,再次點(diǎn)擊按鈕不讀取.
- 為了避免這種情況路呜，請(qǐng)向 URL 添加一個(gè)唯一的 ID：或者在后面添加用個(gè)變動(dòng)的字符.
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
- POST 請(qǐng)求
- 一個(gè)簡(jiǎn)單 POST 請(qǐng)求：
xmlhttp.open("POST","test1.html",true);
xmlhttp.send();
- 如果需要像 HTML 表單那樣 POST 數(shù)據(jù)，請(qǐng)使用 setRequestHeader() 來添加 HTTP 頭织咧。然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：
xmlhttp.open("POST","test1.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
- 方法描述
- setRequestHeader(header,value) 向請(qǐng)求添加 HTTP 頭胀葱。
- header: 規(guī)定頭的名稱
- value: 規(guī)定頭的值
異步 - True 或 False？
- AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）笙蒙。
- XMLHttpRequest 對(duì)象如果要用于 AJAX 的話抵屿，其 open() 方法的 async 參數(shù)必須設(shè)置為 true：
xmlhttp.open("GET","test1.html",true);
通過 AJAX，JavaScript 無需等待服務(wù)器的響應(yīng)捅位，而是：
在等待服務(wù)器響應(yīng)時(shí)執(zhí)行其他腳本
當(dāng)響應(yīng)就緒后對(duì)響應(yīng)進(jìn)行處理Async = true
當(dāng)使用 async=true 時(shí)轧葛，請(qǐng)規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時(shí)執(zhí)行的函數(shù)：
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 - 服務(wù)器響應(yīng)
- 接收傳送過來的數(shù)據(jù),用對(duì)應(yīng)語言的from 或get方法.
- 輸出文本在客戶端用
- 如需獲得來自服務(wù)器的響應(yīng)，請(qǐng)使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性艇搀。
- responseText 屬性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
四. AJAX - onreadystatechange 事件
通過事件來觸發(fā)判斷是否接收成功.和接收數(shù)據(jù).改變前臺(tái)內(nèi)容.當(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è)重要的屬性：
-
下面是 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：
- onreadystatechange 存儲(chǔ)函數(shù)（或函數(shù)名）矩屁，每當(dāng) readyState 屬性改變時(shí)辟宗，就會(huì)調(diào)用該函數(shù)爵赵。
- readyState 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化慢蜓。
0: 請(qǐng)求未初始化- 1: 服務(wù)器連接已建立
- 2: 請(qǐng)求已接收
- 3: 請(qǐng)求處理中
- 4: 請(qǐng)求已完成亚再，且響應(yīng)已就緒
- status 200: "OK" 表示連接正常
- 404: 未找到頁面
再最后使用 Callback 函數(shù),在接受數(shù)據(jù)成功之后做某件事，失敗后又是做什么事
