AJAX?教程

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 不需要任何瀏覽器插件，但需要用戶(hù)允許JavaScript在瀏覽器上執(zhí)行。

AJAX 實(shí)例

使用 AJAX 修改該文本內(nèi)容

嘗試一下 ?

閱讀本教程前，您需要了解的知識(shí)：
閱讀本教程，您需要有以下基礎(chǔ)：

  • HTML 和 CSS 基礎(chǔ)
  • JavaScript 基礎(chǔ)

AJAX 應(yīng)用

  • 運(yùn)用XHTML+CSS來(lái)表達(dá)資訊；
  • 運(yùn)用JavaScript操作DOM（Document Object Model）來(lái)執(zhí)行動(dòng)態(tài)效果；
  • 運(yùn)用XML和XSLT操作資料;
  • 運(yùn)用XMLHttpRequest或新的Fetch API與網(wǎng)頁(yè)服務(wù)器進(jìn)行異步資料交換；
  • 注意：AJAX與Flash、Silverlight和Java Applet等RIA技術(shù)是有區(qū)分的。

AJAX 簡(jiǎn)介

?AJAX 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。

您應(yīng)當(dāng)具備的基礎(chǔ)知識(shí)

在繼續(xù)學(xué)習(xí)之前，您需要對(duì)下面的知識(shí)有基本的了解：

  • HTML / XHTML
  • CSS
  • JavaScript / DOM
什么是 AJAX ？

AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁(yè)面。
有很多使用 AJAX 的應(yīng)用程序案例：新浪微博、Google 地圖、開(kāi)心網(wǎng)等等。

AJAX 工作原理
AJAX
AJAX是基于現(xiàn)有的Internet標(biāo)準(zhǔn)

AJAX是基于現(xiàn)有的Internet標(biāo)準(zhǔn)，并且聯(lián)合使用它們：

  • XMLHttpRequest 對(duì)象 (異步的與服務(wù)器交換數(shù)據(jù))
  • JavaScript/DOM (信息顯示/交互)
  • CSS (給數(shù)據(jù)定義樣式)
  • XML (作為轉(zhuǎn)換數(shù)據(jù)的格式)

AJAX應(yīng)用程序與瀏覽器和平臺(tái)無(wú)關(guān)的！

Google Suggest

在 2005 年，Google 通過(guò)其 Google Suggest 使 AJAX 變得流行起來(lái)。
Google Suggest 使用 AJAX 創(chuàng)造出動(dòng)態(tài)性極強(qiáng)的 web 界面：當(dāng)您在谷歌的搜索框輸入關(guān)鍵字時(shí)，JavaScript 會(huì)把這些字符發(fā)送到服務(wù)器，然后服務(wù)器會(huì)返回一個(gè)搜索建議的列表。

今天就開(kāi)始使用 AJAX

AJAX 基于已有的標(biāo)準(zhǔn)。這些標(biāo)準(zhǔn)已被大多數(shù)開(kāi)發(fā)者使用多年。
請(qǐng)閱讀下一章，看看 AJAX 是如何工作的！

AJAX 實(shí)例

實(shí)例

使用 AJAX 修改該文本內(nèi)容

嘗試一下 ?

AJAX 實(shí)例解析

上面的 AJAX 應(yīng)用程序包含一個(gè) div 和一個(gè)按鈕。
div 部分用于顯示來(lái)自服務(wù)器的信息。當(dāng)按鈕被點(diǎn)擊時(shí)，它負(fù)責(zé)調(diào)用名為 loadXMLDoc() 的函數(shù)：

<div id="myDiv"><h2>使用 AJAX 修改該文本內(nèi)容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內(nèi)容</button>

接下來(lái)，在頁(yè)面的 head 部分添加一個(gè) <script> 標(biāo)簽。該標(biāo)簽中包含了這個(gè) loadXMLDoc() 函數(shù)：

<head>
  <script>
    function loadXMLDoc(){ .... AJAX 腳本執(zhí)行 ...}    
  </script>
</head>

下面的章節(jié)會(huì)為您講解 AJAX 的工作原理。

AJAX - 創(chuàng)建 XMLHttpRequest 對(duì)象

XMLHttpRequest 是 AJAX 的基礎(chǔ)。

XMLHttpRequest 對(duì)象

所有現(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ì)象

所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對(duì)象。
創(chuàng)建 XMLHttpRequest 對(duì)象的語(yǔ)法：

var iable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對(duì)象：

var iable=new ActiveXObject("Microsoft.XMLHTTP");

為了應(yīng)對(duì)所有的現(xiàn)代瀏覽器，包括 IE5 和 IE6，請(qǐng)檢查瀏覽器是否支持 XMLHttpRequest 對(duì)象。如果支持，則創(chuàng)建 XMLHttpRequest 對(duì)象。如果不支持，則創(chuàng)建 ActiveXObject ：
實(shí)例

var xmlhttp;
if (window.XMLHttpRequest){ 
  // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼 
  xmlhttp=new XMLHttpRequest();
}else{ 
  // IE6, IE5 瀏覽器執(zhí)行代碼 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

嘗試一下 ?
在下一章中，您將學(xué)習(xí)發(fā)送服務(wù)器請(qǐng)求的知識(shí)。

AJAX - 向服務(wù)器發(fā)送請(qǐng)求請(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();
Paste_Image.png
GET 還是 POST？

與 POST 相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：

  • 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
  • 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）
  • 發(fā)送包含未知字符的用戶(hù)輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠
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();

嘗試一下 ?

如果您希望通過(guò) GET 方法發(fā)送信息，請(qǐng)向 URL 添加信息：
實(shí)例

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

嘗試一下 ?

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

嘗試一下 ?

Paste_Image.png
url - 服務(wù)器上的文件

open() 方法的 url 參數(shù)是服務(wù)器上文件的地址：

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

該文件可以是任何類(lèi)型的文件，比如 .txt 和 .xml，或者服務(wù)器腳本文件，比如 .asp 和 .php （在傳回響應(yīng)之前，能夠在服務(wù)器上執(zhí)行任務(wù)）。

異步 - True 或 False？

AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 對(duì)象如果要用于 AJAX 的話(huà)，其 open() 方法的 async 參數(shù)必須設(shè)置為 true：

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

對(duì)于 web 開(kāi)發(fā)人員來(lái)說(shuō)，發(fā)送異步請(qǐng)求是一個(gè)巨大的進(jìn)步。很多在服務(wù)器執(zhí)行的任務(wù)都相當(dāng)費(fèi)時(shí)。AJAX 出現(xiàn)之前，這可能會(huì)引起應(yīng)用程序掛起或停止。
通過(guò) AJAX，JavaScript 無(wú)需等待服務(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ù)：
實(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é)學(xué)習(xí)更多有關(guān) onreadystatechange 的內(nèi)容。

Async = false

如需使用 async=false，請(qǐng)將 open() 方法中的第三個(gè)參數(shù)改為 false：
xmlhttp.open("GET","test1.txt",false);
我們不推薦使用 async=false，但是對(duì)于一些小型的請(qǐng)求，也是可以的。
請(qǐng)記住，JavaScript 會(huì)等到服務(wù)器響應(yīng)就緒才繼續(xù)執(zhí)行。如果服務(wù)器繁忙或緩慢，應(yīng)用程序會(huì)掛起或停止。
注意：當(dāng)您使用 async=false 時(shí)，請(qǐng)不要編寫(xiě) onreadystatechange 函數(shù) - 把代碼放到 send() 語(yǔ)句后面即可：
實(shí)例

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

嘗試一下 ?

AJAX - 服務(wù)器 響應(yīng)

服務(wù)器響應(yīng)

如需獲得來(lái)自服務(wù)器的響應(yīng)，請(qǐng)使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。

屬性 描述
responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML 獲得 XML 形式的響應(yīng)數(shù)據(jù)。
responseText 屬性

如果來(lái)自服務(wù)器的響應(yīng)并非 XML，請(qǐng)使用 responseText 屬性。
responseText 屬性返回字符串形式的響應(yīng)，因此您可以這樣使用：
實(shí)例

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

嘗試一下 ?

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;

嘗試一下 ?

AJAX - onreadystatechange 事件

onreadystatechange 事件

當(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è)重要的屬性：

Paste_Image.png

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

嘗試一下 ?
注意： onreadystatechange 事件被觸發(fā) 5 次（0 - 4），對(duì)應(yīng)著 readyState 的每個(gè)變化。

使用回調(diào)函數(shù)

回調(diào)函數(shù)是一種以參數(shù)形式傳遞給另一個(gè)函數(shù)的函數(shù)。
如果您的網(wǎng)站上存在多個(gè) AJAX 任務(wù)，那么您應(yīng)該為創(chuàng)建 XMLHttpRequest 對(duì)象編寫(xiě)一個(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; 
    } 
  });
}

嘗試一下 ?

AJAX ASP/PHP 實(shí)例

AJAX 用于創(chuàng)造動(dòng)態(tài)性更強(qiáng)的應(yīng)用程序。

AJAX ASP/PHP 實(shí)例

下面的例子將為您演示當(dāng)用戶(hù)在輸入框中鍵入字符時(shí)，網(wǎng)頁(yè)如何與 web 服務(wù)器進(jìn)行通信： 請(qǐng)?jiān)谙旅娴妮斎肟蛑墟I入字母（A - Z）：

[嘗試一下 ?](http://www.runoob.com/try/try.php?filename=tryajax_suggest)

嘗試一下 ?

實(shí)例解析 - showHint() 函數(shù)

當(dāng)用戶(hù)在上面的輸入框中鍵入字符時(shí)，會(huì)執(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();
}

源代碼解析：
如果輸入框?yàn)榭?(str.length==0)，則該函數(shù)清空 txtHint 占位符的內(nèi)容，并退出函數(shù)。
如果輸入框不為空，showHint() 函數(shù)執(zhí)行以下任務(wù)：

  • 創(chuàng)建 XMLHttpRequest 對(duì)象
  • 當(dāng)服務(wù)器響應(yīng)就緒時(shí)執(zhí)行函數(shù)
  • 把請(qǐng)求發(fā)送到服務(wù)器上的文件
  • 請(qǐng)注意我們向 URL 添加了一個(gè)參數(shù) q （帶有輸入框的內(nèi)容）
AJAX 服務(wù)器頁(yè)面 - ASP 和 PHP

由上面的 JavaScript 調(diào)用的服務(wù)器頁(yè)面是 ASP 文件，名為 "gethint.asp"。
下面，我們創(chuàng)建了兩個(gè)版本的服務(wù)器文件，一個(gè)用 ASP 編寫(xiě)，另一個(gè)用 PHP 編寫(xiě)。

ASP 文件

"gethint.asp" 中的源代碼會(huì)檢查一個(gè)名字?jǐn)?shù)組，然后向?yàn)g覽器返回相應(yīng)的名字：

<%
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 編寫(xiě)，與上面的 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 實(shí)例

AJAX 可用來(lái)與數(shù)據(jù)庫(kù)進(jìn)行動(dòng)態(tài)通信。

AJAX 數(shù)據(jù)庫(kù)實(shí)例

下面的例子將演示網(wǎng)頁(yè)如何通過(guò) AJAX 從數(shù)據(jù)庫(kù)讀取信息： 請(qǐng)?jiān)谙旅娴南吕斜碇羞x擇一個(gè)客戶(hù)：

[嘗試一下 ?](http://www.runoob.com/try/try.php?filename=tryajax_database)

嘗試一下 ?

實(shí)例解釋 - showCustomer() 函數(shù)

當(dāng)用戶(hù)在上面的下拉列表中選擇某個(gè)客戶(hù)時(shí)，會(huì)執(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í)行以下任務(wù)：

  • 檢查是否已選擇某個(gè)客戶(hù)
  • 創(chuàng)建 XMLHttpRequest 對(duì)象
  • 當(dāng)服務(wù)器響應(yīng)就緒時(shí)執(zhí)行所創(chuàng)建的函數(shù)
  • 把請(qǐng)求發(fā)送到服務(wù)器上的文件
  • 請(qǐng)注意我們向 URL 添加了一個(gè)參數(shù) q （帶有輸入域中的內(nèi)容）
AJAX 服務(wù)器頁(yè)面

由上面的 JavaScript 調(diào)用的服務(wù)器頁(yè)面是 PHP 文件，名為 "getcustomer.php"。
用 PHP 編寫(xiě)服務(wù)器文件也很容易，或者用其他服務(wù)器語(yǔ)言。請(qǐng)看用 PHP 編寫(xiě)的相應(yīng)的例子。
"getcustomer.php" 中的源代碼負(fù)責(zé)對(duì)數(shù)據(jù)庫(kù)進(jìn)行查詢(xún)，然后用 HTML 表格返回結(jié)果：

<%
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 實(shí)例

AJAX 可用來(lái)與 XML 文件進(jìn)行交互式通信。

AJAX XML 實(shí)例

下面的例子將演示網(wǎng)頁(yè)如何使用 AJAX 來(lái)讀取來(lái)自 XML 文件的信息：

[嘗試一下 ?](http://www.runoob.com/try/try.php?filename=tryajax_xml2)

嘗試一下 ?

實(shí)例解析 - loadXMLDoc() 函數(shù)

當(dāng)用戶(hù)點(diǎn)擊上面的"獲取我收藏的 CD"這個(gè)按鈕，就會(huì)執(zhí)行 loadXMLDoc() 函數(shù)。
loadXMLDoc() 函數(shù)創(chuàng)建 XMLHttpRequest 對(duì)象，添加當(dāng)服務(wù)器響應(yīng)就緒時(shí)執(zhí)行的函數(shù)，并將請(qǐng)求發(fā)送到服務(wù)器。
當(dāng)服務(wù)器響應(yīng)就緒時(shí)，會(huì)構(gòu)建一個(gè) HTML 表格，從 XML 文件中提取節(jié)點(diǎn)（元素），最后使用 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 服務(wù)器頁(yè)面

上面這個(gè)例子中使用的服務(wù)器頁(yè)面實(shí)際上是一個(gè)名為 "cd_catalog.xml" XML 文件。

AJAX 實(shí)例

一個(gè)簡(jiǎn)單的AJAX實(shí)例
創(chuàng)建一個(gè)簡(jiǎn)單的XMLHttpRequest，從一個(gè)TXT文件中返回?cái)?shù)據(jù)。
用AJAX加載 XML 文件
創(chuàng)建一個(gè)簡(jiǎn)單的XMLHttpRequest，從一個(gè)XML文件中返回?cái)?shù)據(jù)。
用AJAX進(jìn)行一次 HEAD 請(qǐng)求
檢索資源（文件）的頭信息。
用AJAX進(jìn)行一次指定的 HEAD 請(qǐng)求
檢索資源（文件）的指定頭信息。
用AJAX從ASP 文件返回?cái)?shù)據(jù)
當(dāng)用戶(hù)在文本框內(nèi)鍵入字符時(shí)網(wǎng)頁(yè)如何與Web服務(wù)器進(jìn)行通信
用AJAX從數(shù)據(jù)庫(kù)返回?cái)?shù)據(jù)
用AJAX網(wǎng)頁(yè)如何獲取數(shù)據(jù)庫(kù)中的信息
用AJAX從XML 文件返回?cái)?shù)據(jù)
創(chuàng)建一個(gè)XMLHttpRequest從XML文件中檢索數(shù)據(jù)并顯示在一個(gè)HTML表格中。
用callback函數(shù)的AJAX實(shí)例
用一個(gè)callback函數(shù)創(chuàng)建一個(gè)XMLHttpRequest，并從一個(gè)TXT文件中檢索數(shù)據(jù)。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一章： 基礎(chǔ) 1.1 是什么？ AJAX = Asynchronous JavaScript and XML（異...
    張中華閱讀 1,030評(píng)論 0贊 8
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對(duì)象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,561評(píng)論 0贊 7
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,554評(píng)論 19贊 139
  • 本文詳細(xì)介紹了 XMLHttpRequest 相關(guān)知識(shí)，涉及內(nèi)容： AJAX、XMLHTTP、XMLHttpReq...
    semlinker閱讀 13,995評(píng)論 2贊 18
  • 湖不知其多大 最大 大不過(guò) 杭城對(duì)湖的包容 湖不知其多深 最深 深不過(guò) 杭城對(duì)湖的感情 湖不知其芳齡 最多 多不過(guò)...
    云在晴天水在瓶閱讀 212評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容