從下面這個(gè)簡單的AJAX實(shí)例中，一步一步來分析代碼每一部分的作用及功能，并對相關(guān)的名詞進(jìn)行了解釋。
一個(gè)簡單的AJAX實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改該文本內(nèi)容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內(nèi)容</button>
</body>
</html>
1.創(chuàng)建一個(gè)XMLHttpRequest對象
XMLHttpRequest是什么？
-
XMLHttpRequest是AJAX技術(shù)的核心唯绍，用于在后臺與服務(wù)器交換數(shù)據(jù)。XHR對象為向服務(wù)器發(fā)送請求和解析服務(wù)器響應(yīng)提供了流暢的接口灌侣。能夠以異步方式從服務(wù)器取得更多信息推捐。 - 我們可以通過使用XHR對象獲取新數(shù)據(jù)，再通過DOM將新數(shù)據(jù)插入到頁面中侧啼。
XMLHttpRequest適用的版本
- 所有現(xiàn)代瀏覽器均支持
XMLHttpRequest對象（IE5和IE6使用ActiveXObject）。
創(chuàng)建XHR
var xmlhttp;
if(window.XMLHttpRequest){ //兼容大部分瀏覽器
xmlhttp = new XMLHttpRequest();
}else{ //兼容IE5堪簿，IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2-1.向服務(wù)器發(fā)送請求
- 在使用XMLHttpRequest對象時(shí)痊乾，要調(diào)用的第一個(gè)方法是open()
xmlhttp.open("GET" , "ajax_info.txt" , true);
xmlhttp.send(null);
- 調(diào)用open()方法并不會真正的發(fā)送請求，而只是啟動一個(gè)請求以備發(fā)送椭更。要發(fā)送特定的請求哪审，必須調(diào)用send()方法。
- Send()方法接受一個(gè)參數(shù)虑瀑，即要作為請求主體發(fā)送的數(shù)據(jù)湿滓。如果不需要請求主體發(fā)送數(shù)據(jù)滴须，則必須傳入null，因?yàn)檫@個(gè)參數(shù)對有些瀏覽器來說是必須的叽奥。
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 規(guī)定請求的類型扔水、URL 以及是否異步處理請求。 method：請求的類型朝氓；GET 或 POST url：文件在服務(wù)器上的位置 async：true（異步）或 false（同步） |
| send(string) | 將請求發(fā)送到服務(wù)器魔市。 |
string：僅用于 POST 請求
- GET和POST的選擇
與POST相比，GET更簡單更快赵哲，并且在大部分情況下都能用待德。
然而在以下情況中，請使用POST請求枫夺。
1.無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
2.向服務(wù)器發(fā)送大量數(shù)據(jù)（POST沒有數(shù)據(jù)量限制）
3.發(fā)送包含未知字符的用戶輸入時(shí)将宪，POST比GET更穩(wěn)定也更可靠
3-1.服務(wù)器響應(yīng)
-
在收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會自動填充XHR對象的以下幾個(gè)屬性橡庞。
- responseText：作為響應(yīng)主體被返回的文本涧偷。
- responseXML：如果來自服務(wù)器的響應(yīng)是XML，則需要作為XML對象進(jìn)行解析毙死，此屬性中將保存包含著響應(yīng)數(shù)據(jù)的DOM文檔燎潮。
- status：響應(yīng)的HTTP狀態(tài)的說明
- statusText：HTTP狀態(tài)的說明
responseText
responseText 屬性返回字符串形式的響應(yīng)，因此您可以這樣使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- responseXML 屬性
假設(shè)我們要獲取book.xml文件中的artist內(nèi)容：
var xmlDoc=xmlhttp.responseXML;
var txt="";
var x=xmlDoc.getElementsByTagName("ARTIST");
for (var i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
3-2.onreadystatechange 事件
當(dāng)請求被發(fā)送到服務(wù)器時(shí)扼倘，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)确封。每當(dāng) readyState 改變時(shí)，就會觸發(fā)onreadystatechange 事件再菊。
下面是XMLHttpRequest 對象的三個(gè)重要的屬性：
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 存儲函數(shù)（或函數(shù)名）爪喘，每當(dāng) readyState 屬性改變時(shí)，就會調(diào)用該函數(shù)纠拔。 |
| readyState | 存有 XMLHttpRequest 的狀態(tài)秉剑。從 0 到 4 發(fā)生變化。 |
| 0: 請求未初始化 | |
| 1: 服務(wù)器連接已建立 | |
| 2: 請求已接收 | |
| 3: 請求處理中 | |
| 4: 請求已完成稠诲，且響應(yīng)已就緒 | |
| status | 200: "OK" |
| 404: 未找到頁面 |
在接收到響應(yīng)后侦鹏，第一步是檢查status屬性，以確定響應(yīng)已經(jīng)成功返回臀叙。一般來說略水，可以將HTTP狀態(tài)代碼為200作為成功的標(biāo)志。
但當(dāng)我們需要發(fā)送異步請求時(shí)劝萤，還得檢測XHR對象的readyState屬性渊涝，才能讓JavaScript繼續(xù)執(zhí)行而不必等待響應(yīng)。
在 onreadystatechange 事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)跨释。
當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí)胸私，表示響應(yīng)已就緒：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
與服務(wù)器進(jìn)行交互
以上介紹的都是以url為txt文件的情況，當(dāng)我們需要與服務(wù)器交互鳖谈，通過相應(yīng)的參數(shù)獲取相關(guān)信息時(shí)岁疼，可以通過以下方式來編寫。
- 當(dāng)服務(wù)器為ASP/PHP編寫時(shí)蚯姆，我們用以下這個(gè)例子來解釋如何與服務(wù)器之間通信五续。
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
當(dāng)輸入框?yàn)榭諘r(shí)(str.length==0)，輸入框沒有內(nèi)容龄恋，無任何信息可以返回疙驾，該函數(shù)清空 txtHint 占位符的內(nèi)容，并退出函數(shù)郭毕。
如果輸入框不為空它碎，showHint() 函數(shù)執(zhí)行以下任務(wù)：
- 創(chuàng)建 XMLHttpRequest 對象
- 當(dāng)服務(wù)器響應(yīng)就緒時(shí)執(zhí)行函數(shù)
- 把請求發(fā)送到服務(wù)器上的文件
- 請注意我們向 URL 添加了一個(gè)參數(shù) q （帶有輸入框的內(nèi)容）
發(fā)送的url為
/try/ajax/gethint.php?q="+str，q是與服務(wù)器端交互的參數(shù)，服務(wù)器端可以通過獲取q的值，來得到輸入框中輸入的內(nèi)容绪爸，然后向客戶端返回檢索結(jié)果到responseText中痢毒。
