AJAX速覽

05-24

AJAX速覽

來自專欄全棧開發攻城獅之路

一、簡介：

AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML），XML是一種數據傳輸形式，AJAX 最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換數據並更新部分網頁內容。它不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。

1、AJAX 工作原理：

2、AJAX是基於現有的Internet標準，並且聯合使用它們：

XMLHttpRequest 對象 (非同步的與伺服器交換數據)
JavaScript/DOM (信息顯示/交互)
CSS (給數據定義樣式)
XML (作為轉換數據的格式)

3、AJAX實例：

<!DOCTYPE html><html><head><meta charset="utf-8"><script>function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行代碼 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 修改該文本內容</h2></div> //用來顯示來自伺服器的信息。當按鈕被點擊時，它負責調用名為loadXMLDoc()的函數<button type="button" onclick="loadXMLDoc()">修改內容</button></body></html>

顯示結果如下：

二、創建XMLHttpRequest對象

1、XMLHttpRequest對象：

XMLHttpRequest是AJAX的基礎，用於在後台與伺服器交換數據，這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

2、創建XMLHttpRequest對象:

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。創建 XMLHttpRequest 對象的語法：

variable=new XMLHttpRequest();

三、向伺服器發送請求

1、向伺服器發送請求：

如需將請求發送到伺服器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();

2、GET還是POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新伺服器上的文件或資料庫）
向伺服器發送大量數據（POST 沒有數據量限制）
發送包含未知字元的用戶輸入時，POST 比 GET 更穩定也更可靠

（1）GET請求：

xmlhttp.open("GET","/try/ajax/demo_get.php",true);xmlhttp.send();

（2）POST請求：

xmlhttp.open("POST","/try/ajax/demo_post.php",true);xmlhttp.send();

3、url - 伺服器上的文件：

open() 方法的 url 參數是伺服器上文件的地址，該文件可以是任何類型的文件，比如 .txt 和 .xml，或者伺服器腳本文件，比如 .asp 和 .php （在傳迴響應之前，能夠在伺服器上執行任務）：

xmlhttp.open("GET","ajax_test.html",true);

4、非同步 - True 或 False？

XMLHttpRequest 對象如果要用於 AJAX 的話，其 open() 方法的 async 參數必須設置為 true：

xmlhttp.open("GET","ajax_test.html",true);

很多在伺服器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程序掛起或停止。通過 AJAX，JavaScript 無需等待伺服器的響應，而是：

在等待伺服器響應時執行其他腳本
當響應就緒後對響應進行處理

四、伺服器響應

如需獲得來自伺服器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性：

1、responseText 屬性：

如果來自伺服器的響應並非 XML，請使用 responseText 屬性。responseText 屬性返回字元串形式的響應，因此您可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

2、responseXML 屬性：

如果來自伺服器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性：

<!DOCTYPE html><html><head><meta charset="utf-8"><script>function loadXMLDoc(){ var xmlhttp; var txt,x,i; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行代碼 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { 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; } } xmlhttp.open("GET","cd_catalog.xml",true); xmlhttp.send();}</script></head><body><h2>我收藏的 CD :</h2><div id="myDiv"></div><button type="button" onclick="loadXMLDoc()">獲取我的 CD</button></body></html>

顯示結果如下：

五、onreadystatechange 事件

1、onreadystatechange 事件：

當請求被發送到伺服器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。下面是 XMLHttpRequest 對象的三個重要的屬性：

在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }}

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; } });}

六、AJAX ASP/PHP 實例

1、AJAX ASP/PHP 實例：

下面的例子將為您演示當用戶在輸入框中鍵入字元時，網頁如何與 web 伺服器進行通信：請在下面的輸入框中鍵入字母（A - Z）：

<!DOCTYPE html><html><head><meta charset="utf-8"><script>function showHint(str){ var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行代碼 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();}</script></head><body><h3>在輸入框中嘗試輸入字母 a:</h3><form action=""> 輸入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" /></form><p>提示信息: <span id="txtHint"></span></p> </body></html>

顯示結果如下：

2、實例解析 - showHint() 函數：

當用戶在上面的輸入框中鍵入字元時，會執行函數 "showHint()" 。該函數由 "onkeyup" 事件觸發：

源代碼解析：

如果輸入框為空 (str.length==0)，則該函數清空 txtHint 佔位符的內容，並退出函數。

如果輸入框不為空，showHint() 函數執行以下任務：

創建 XMLHttpRequest 對象
當伺服器響應就緒時執行函數
把請求發送到伺服器上的文件
請注意我們向 URL 添加了一個參數 q （帶有輸入框的內容）

3、AJAX 伺服器頁面 - ASP 和 PHP：

（1）ASP 文件：

"gethint.asp" 中的源代碼會檢查一個名字數組，然後向瀏覽器返回相應的名字：

<%response.expires=-1dim a(30)Fill up array with namesa(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 URLq=ucase(request.querystring("q"))lookup all hints from array if length of q>0if 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 nextend ifOutput "no suggestion" if no hint were foundor output the correct valuesif hint="" then response.write("no suggestion")else response.write(hint)end if%>

（2）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>0if (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 valuesif ($hint == ""){ $response="no suggestion";}else{ $response=$hint;}//output the responseecho $response;?>

七、AJAX Database 實例

1、AJAX 資料庫實例：

下面的例子將演示網頁如何通過 AJAX 從資料庫讀取信息：請在下面的下拉列表中選擇一個客戶：

<!DOCTYPE html><html><head><meta charset="utf-8"><script>function showCustomer(str){ var xmlhttp; if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行代碼 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();}</script></head><body><form action=""> <select name="customers" onchange="showCustomer(this.value)" stylex="font-family:Verdana, Arial, Helvetica, sans-serif;"><option value="APPLE">Apple Computer, Inc.</option><option value="BAIDU ">BAIDU, Inc</option><option value="Canon">Canon USA, Inc.</option><option value="Google">Google, Inc.</option><option value="Nokia">Nokia Corporation</option><option value="SONY">Sony Corporation of America</option></select></form><br><div id="txtHint">客戶信息將顯示在這...</div></body></html>

顯示結果如下：

2、實例解釋 - showCustomer() 函數：

當用戶在上面的下拉列表中選擇某個客戶時，會執行名為 "showCustomer()" 的函數。該函數由 "onchange" 事件觸發：

showCustomer() 函數執行以下任務：

檢查是否已選擇某個客戶
創建 XMLHttpRequest 對象
當伺服器響應就緒時執行所創建的函數
把請求發送到伺服器上的文件
請注意我們向 URL 添加了一個參數 q （帶有輸入域中的內容）

3、AJAX 伺服器頁面：

由上面的 JavaScript 調用的伺服器頁面是 PHP 文件，名為 "getcustomer.php"：

<%response.expires=-1sql="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,connresponse.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.MoveNextloopresponse.write("</table>")%>