AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）靡砌。
AJAX 不是新的編程語言，而是一種使用現(xiàn)有標準的新方法。
AJAX 最大的優(yōu)點是在不重新加載整個頁面的情況下，可以與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁內容。
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行扎运。
AJAX 實例
使用 AJAX 修改該文本內容
閱讀本教程前瑟曲，您需要了解的知識：
閱讀本教程，您需要有以下基礎：
- HTML 和 CSS 基礎
- JavaScript 基礎
AJAX 應用
- 運用XHTML+CSS來表達資訊豪治；
- 運用JavaScript操作DOM（Document Object Model）來執(zhí)行動態(tài)效果洞拨；
- 運用XML和XSLT操作資料;
- 運用XMLHttpRequest或新的Fetch API與網(wǎng)頁服務器進行異步資料交換；
- 注意：AJAX與Flash鬼吵、Silverlight和Java Applet等RIA技術是有區(qū)分的扣甲。
AJAX 簡介
?AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術齿椅。
您應當具備的基礎知識
在繼續(xù)學習之前琉挖，您需要對下面的知識有基本的了解：
- HTML / XHTML
- CSS
- JavaScript / DOM
什么是 AJAX ？
AJAX = 異步 JavaScript 和 XML涣脚。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術示辈。
通過在后臺與服務器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新遣蚀。這意味著可以在不重新加載整個網(wǎng)頁的情況下矾麻，對網(wǎng)頁的某部分進行更新。
傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內容芭梯，必需重載整個網(wǎng)頁面险耀。
有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖玖喘、開心網(wǎng)等等甩牺。
AJAX 工作原理
AJAX是基于現(xiàn)有的Internet標準
AJAX是基于現(xiàn)有的Internet標準，并且聯(lián)合使用它們：
- XMLHttpRequest 對象 (異步的與服務器交換數(shù)據(jù))
- JavaScript/DOM (信息顯示/交互)
- CSS (給數(shù)據(jù)定義樣式)
- XML (作為轉換數(shù)據(jù)的格式)
AJAX應用程序與瀏覽器和平臺無關的累奈！
Google Suggest
在 2005 年贬派，Google 通過其 Google Suggest 使 AJAX 變得流行起來。
Google Suggest 使用 AJAX 創(chuàng)造出動態(tài)性極強的 web 界面：當您在谷歌的搜索框輸入關鍵字時澎媒，JavaScript 會把這些字符發(fā)送到服務器搞乏，然后服務器會返回一個搜索建議的列表。
今天就開始使用 AJAX
AJAX 基于已有的標準戒努。這些標準已被大多數(shù)開發(fā)者使用多年请敦。
請閱讀下一章，看看 AJAX 是如何工作的储玫！
AJAX 實例
實例
使用 AJAX 修改該文本內容
AJAX 實例解析
上面的 AJAX 應用程序包含一個 div 和一個按鈕侍筛。
div 部分用于顯示來自服務器的信息。當按鈕被點擊時缘缚，它負責調用名為 loadXMLDoc() 的函數(shù)：
<div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>
接下來，在頁面的 head 部分添加一個 <script> 標簽敌蚜。該標簽中包含了這個 loadXMLDoc() 函數(shù)：
<head>
<script>
function loadXMLDoc(){ .... AJAX 腳本執(zhí)行 ...}
</script>
</head>
下面的章節(jié)會為您講解 AJAX 的工作原理桥滨。
AJAX - 創(chuàng)建 XMLHttpRequest 對象
XMLHttpRequest 是 AJAX 的基礎。
XMLHttpRequest 對象
所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后臺與服務器交換數(shù)據(jù)齐媒。這意味著可以在不重新加載整個網(wǎng)頁的情況下蒲每，對網(wǎng)頁的某部分進行更新。
創(chuàng)建 XMLHttpRequest 對象
所有現(xiàn)代瀏覽器（IE7+喻括、Firefox邀杏、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象唬血。
創(chuàng)建 XMLHttpRequest 對象的語法：
var iable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
var iable=new ActiveXObject("Microsoft.XMLHTTP");
為了應對所有的現(xiàn)代瀏覽器望蜡，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象拷恨。如果支持脖律，則創(chuàng)建 XMLHttpRequest 對象。如果不支持腕侄，則創(chuàng)建 ActiveXObject ：
實例
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
嘗試一下 ?
在下一章中小泉，您將學習發(fā)送服務器請求的知識。
AJAX - 向服務器發(fā)送請求請求
XMLHttpRequest 對象用于和服務器交換數(shù)據(jù)冕杠。
向服務器發(fā)送請求
如需將請求發(fā)送到服務器微姊，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
GET 還是 POST？
與 POST 相比分预，GET 更簡單也更快兢交，并且在大部分情況下都能用。
然而噪舀，在以下情況中魁淳，請使用 POST 請求：
- 無法使用緩存文件（更新服務器上的文件或數(shù)據(jù)庫）
- 向服務器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
- 發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠
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 方法發(fā)送信息纺座，請向 URL 添加信息：
實例
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
POST 請求
一個簡單 POST 請求：
實例
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
嘗試一下 ?
如果需要像 HTML 表單那樣 POST 數(shù)據(jù)息拜，請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：
實例
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
url - 服務器上的文件
open() 方法的 url 參數(shù)是服務器上文件的地址：
xmlhttp.open("GET","ajax_test.html",true);
該文件可以是任何類型的文件净响，比如 .txt 和 .xml少欺，或者服務器腳本文件，比如 .asp 和 .php （在傳回響應之前馋贤，能夠在服務器上執(zhí)行任務）赞别。
異步 - True 或 False？
AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）配乓。
XMLHttpRequest 對象如果要用于 AJAX 的話仿滔，其 open() 方法的 async 參數(shù)必須設置為 true：
xmlhttp.open("GET","ajax_test.html",true);
對于 web 開發(fā)人員來說惠毁，發(fā)送異步請求是一個巨大的進步。很多在服務器執(zhí)行的任務都相當費時崎页。AJAX 出現(xiàn)之前鞠绰，這可能會引起應用程序掛起或停止。
通過 AJAX飒焦，JavaScript 無需等待服務器的響應蜈膨，而是：
- 在等待服務器響應時執(zhí)行其他腳本
- 當響應就緒后對響應進行處理
Async=true
當使用 async=true 時，請規(guī)定在響應處于 onreadystatechange 事件中的就緒狀態(tài)時執(zhí)行的函數(shù)：
實例
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();
嘗試一下 ?
您將在稍后的章節(jié)學習更多有關 onreadystatechange 的內容牺荠。
Async = false
如需使用 async=false翁巍，請將 open() 方法中的第三個參數(shù)改為 false：
xmlhttp.open("GET","test1.txt",false);
我們不推薦使用 async=false，但是對于一些小型的請求志电，也是可以的曙咽。
請記住，JavaScript 會等到服務器響應就緒才繼續(xù)執(zhí)行挑辆。如果服務器繁忙或緩慢例朱，應用程序會掛起或停止。
注意：當您使用 async=false 時鱼蝉，請不要編寫 onreadystatechange 函數(shù) - 把代碼放到 send() 語句后面即可：
實例
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
AJAX - 服務器 響應
服務器響應
如需獲得來自服務器的響應洒嗤，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
| 屬性 | 描述 |
|---|---|
| responseText | 獲得字符串形式的響應數(shù)據(jù)魁亦。 |
| responseXML | 獲得 XML 形式的響應數(shù)據(jù)渔隶。 |
responseText 屬性
如果來自服務器的響應并非 XML，請使用 responseText 屬性洁奈。
responseText 屬性返回字符串形式的響應间唉，因此您可以這樣使用：
實例
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
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;
AJAX - onreadystatechange 事件
onreadystatechange 事件
當請求被發(fā)送到服務器時，我們需要執(zhí)行一些基于響應的任務印叁。
每當 readyState 改變時被冒，就會觸發(fā) onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息轮蜕。
下面是 XMLHttpRequest 對象的三個重要的屬性：
在 onreadystatechange 事件中昨悼，我們規(guī)定當服務器響應已做好被處理的準備時所執(zhí)行的任務。
當 readyState 等于 4 且狀態(tài)為 200 時跃洛，表示響應已就緒：
實例
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
嘗試一下 ?
注意： onreadystatechange 事件被觸發(fā) 5 次（0 - 4）率触，對應著 readyState 的每個變化。
使用回調函數(shù)
回調函數(shù)是一種以參數(shù)形式傳遞給另一個函數(shù)的函數(shù)汇竭。
如果您的網(wǎng)站上存在多個 AJAX 任務葱蝗，那么您應該為創(chuàng)建 XMLHttpRequest 對象編寫一個標準的函數(shù)痊剖，并為每個 AJAX 任務調用該函數(shù)。
該函數(shù)調用應該包含 URL 以及發(fā)生 onreadystatechange 事件時執(zhí)行的任務（每次調用可能不盡相同）：
實例
function myFunction(){
loadXMLDoc("/try/ajax/ajax_info.txt",function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
AJAX ASP/PHP 實例
AJAX 用于創(chuàng)造動態(tài)性更強的應用程序垒玲。
AJAX ASP/PHP 實例
下面的例子將為您演示當用戶在輸入框中鍵入字符時，網(wǎng)頁如何與 web 服務器進行通信： 請在下面的輸入框中鍵入字母（A - Z）：
實例解析 - showHint() 函數(shù)
當用戶在上面的輸入框中鍵入字符時找颓，會執(zhí)行函數(shù) "showHint()" 合愈。該函數(shù)由 "onkeyup" 事件觸發(fā)：
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();
}
源代碼解析：
如果輸入框為空 (str.length==0)，則該函數(shù)清空 txtHint 占位符的內容击狮，并退出函數(shù)佛析。
如果輸入框不為空，showHint() 函數(shù)執(zhí)行以下任務：
- 創(chuàng)建 XMLHttpRequest 對象
- 當服務器響應就緒時執(zhí)行函數(shù)
- 把請求發(fā)送到服務器上的文件
- 請注意我們向 URL 添加了一個參數(shù) q （帶有輸入框的內容）
AJAX 服務器頁面 - ASP 和 PHP
由上面的 JavaScript 調用的服務器頁面是 ASP 文件彪蓬，名為 "gethint.asp"寸莫。
下面，我們創(chuàng)建了兩個版本的服務器文件档冬，一個用 ASP 編寫膘茎，另一個用 PHP 編寫。
ASP 文件
"gethint.asp" 中的源代碼會檢查一個名字數(shù)組酷誓，然后向瀏覽器返回相應的名字：
<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)end if
%>
PHP 文件
下面的代碼用 PHP 編寫披坏，與上面的 ASP 代碼作用是一樣的。
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0){
$hint="";
for($i=0; $i<count($a); $i++) {
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {
if ($hint=="") {
$hint=$a[$i];
} else {
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == ""){
$response="no suggestion";
}else{
$response=$hint;
}
//output the response
echo $response;
?>
AJAX Database 實例
AJAX 可用來與數(shù)據(jù)庫進行動態(tài)通信盐数。
AJAX 數(shù)據(jù)庫實例
下面的例子將演示網(wǎng)頁如何通過 AJAX 從數(shù)據(jù)庫讀取信息： 請在下面的下拉列表中選擇一個客戶：
實例解釋 - showCustomer() 函數(shù)
當用戶在上面的下拉列表中選擇某個客戶時棒拂，會執(zhí)行名為 "showCustomer()" 的函數(shù)。該函數(shù)由 "onchange" 事件觸發(fā)：
function showCustomer(str){
var xmlhttp;
if (str=="") {
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/getcustomer.php?q="+str,true);
xmlhttp.send();
}
showCustomer() 函數(shù)執(zhí)行以下任務：
- 檢查是否已選擇某個客戶
- 創(chuàng)建 XMLHttpRequest 對象
- 當服務器響應就緒時執(zhí)行所創(chuàng)建的函數(shù)
- 把請求發(fā)送到服務器上的文件
- 請注意我們向 URL 添加了一個參數(shù) q （帶有輸入域中的內容）
AJAX 服務器頁面
由上面的 JavaScript 調用的服務器頁面是 PHP 文件玫氢，名為 "getcustomer.php"帚屉。
用 PHP 編寫服務器文件也很容易，或者用其他服務器語言漾峡。請看用 PHP 編寫的相應的例子攻旦。
"getcustomer.php" 中的源代碼負責對數(shù)據(jù)庫進行查詢，然后用 HTML 表格返回結果：
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>
AJAX XML 實例
AJAX 可用來與 XML 文件進行交互式通信灰殴。
AJAX XML 實例
下面的例子將演示網(wǎng)頁如何使用 AJAX 來讀取來自 XML 文件的信息：
實例解析 - loadXMLDoc() 函數(shù)
當用戶點擊上面的"獲取我收藏的 CD"這個按鈕敬特，就會執(zhí)行 loadXMLDoc() 函數(shù)。
loadXMLDoc() 函數(shù)創(chuàng)建 XMLHttpRequest 對象牺陶，添加當服務器響應就緒時執(zhí)行的函數(shù)伟阔，并將請求發(fā)送到服務器。
當服務器響應就緒時掰伸，會構建一個 HTML 表格皱炉，從 XML 文件中提取節(jié)點（元素），最后使用 XML 數(shù)據(jù)的 填充 id="demo" 的表格元素：
// LoadXMLDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
AJAX 服務器頁面
上面這個例子中使用的服務器頁面實際上是一個名為 "cd_catalog.xml" XML 文件狮鸭。
AJAX 實例
一個簡單的AJAX實例
創(chuàng)建一個簡單的XMLHttpRequest合搅，從一個TXT文件中返回數(shù)據(jù)多搀。
用AJAX加載 XML 文件
創(chuàng)建一個簡單的XMLHttpRequest，從一個XML文件中返回數(shù)據(jù)灾部。
用AJAX進行一次 HEAD 請求
檢索資源（文件）的頭信息康铭。
用AJAX進行一次指定的 HEAD 請求
檢索資源（文件）的指定頭信息。
用AJAX從ASP 文件返回數(shù)據(jù)
當用戶在文本框內鍵入字符時網(wǎng)頁如何與Web服務器進行通信
用AJAX從數(shù)據(jù)庫返回數(shù)據(jù)
用AJAX網(wǎng)頁如何獲取數(shù)據(jù)庫中的信息
用AJAX從XML 文件返回數(shù)據(jù)
創(chuàng)建一個XMLHttpRequest從XML文件中檢索數(shù)據(jù)并顯示在一個HTML表格中赌髓。
用callback函數(shù)的AJAX實例
用一個callback函數(shù)創(chuàng)建一個XMLHttpRequest从藤，并從一個TXT文件中檢索數(shù)據(jù)。
