亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

PHP 和 AJAX

系統(tǒng) 2756 0
AJAX 簡(jiǎn)介
AJAX = Asynchronous JavaScript And XML（異步 JavaScript 及 XML）
AJAX 是 Asynchronous JavaScript And XML 的首字母縮寫(xiě)。

AJAX 并不是一種新的編程語(yǔ)言，而僅僅是一種新的技術(shù)，它可以創(chuàng)建更好、更快且交互性更強(qiáng)的 web 應(yīng)用程序。

AJAX 使用 JavaScript 在 web 瀏覽器與 web 服務(wù)器之間來(lái)發(fā)送和接收數(shù)據(jù)。

通過(guò)在幕后與 web 服務(wù)器交換數(shù)據(jù)，而不是每當(dāng)用戶作出改變時(shí)重載整個(gè) web 頁(yè)面，AJAX 技術(shù)可以使網(wǎng)頁(yè)更迅速地響應(yīng)。
AJAX 基于開(kāi)放的標(biāo)準(zhǔn)
AJAX 基于以下開(kāi)放的標(biāo)準(zhǔn)：

JavaScript
XML
HTML
CSS
在 AJAX 中使用的開(kāi)放標(biāo)準(zhǔn)被良好地定義，并得到所有主要瀏覽器的支持。AJAX 應(yīng)用程序獨(dú)立于瀏覽器和平臺(tái)。（可以說(shuō)，它是一種跨平臺(tái)跨瀏覽器的技術(shù)）。
AJAX 事關(guān)更好的 Internet 應(yīng)用程序
與桌面應(yīng)用程序相比，Web 應(yīng)用程序有很多優(yōu)勢(shì)：

可擁有更多用戶
更容易安裝和維護(hù)
更容易開(kāi)發(fā)
但是， 應(yīng)用程序不總是象傳統(tǒng)應(yīng)用程序那樣強(qiáng)大和友好。

通過(guò) AJAX，可以使 Internet 應(yīng)用程序更加強(qiáng)大（更輕巧、更快速，且更易使用）。
今天您就可以開(kāi)始使用 AJAX
沒(méi)有什么新知識(shí)需要學(xué)習(xí)。

AJAX 基于開(kāi)放的標(biāo)準(zhǔn)。而這些標(biāo)準(zhǔn)已被大多數(shù)開(kāi)發(fā)者使用多年。

大多數(shù) web 應(yīng)用程序可通過(guò)使用 AJAX 技術(shù)進(jìn)行重寫(xiě)，來(lái)替代傳統(tǒng)的 HTML 表單。
AJAX 使用 XML 和 HTTP 請(qǐng)求
傳統(tǒng)的 web 應(yīng)用程序會(huì)把數(shù)據(jù)提交到 web 服務(wù)器（使用 HTML 表單）。在 web 服務(wù)器把數(shù)據(jù)處理完畢之后，會(huì)向用戶返回一張完整的新網(wǎng)頁(yè)。

由于每當(dāng)用戶提交輸入，服務(wù)器就會(huì)返回新網(wǎng)頁(yè)，傳統(tǒng)的 web 應(yīng)用程序往往運(yùn)行緩慢，且越來(lái)越不友好。

通過(guò) AJAX，web 應(yīng)用程序無(wú)需重載網(wǎng)頁(yè)，就可以發(fā)送并取回?cái)?shù)據(jù)。完成這項(xiàng)工作，需要通過(guò)向服務(wù)器發(fā)送 HTTP 請(qǐng)求（在幕后），并通過(guò)當(dāng)服務(wù)器返回?cái)?shù)據(jù)時(shí)使用 JavaScript 僅僅修改網(wǎng)頁(yè)的某部分。

一般使用 XML 作為接收服務(wù)器數(shù)據(jù)的格式，盡管可以使用任何格式，包括純文本。

您將在本教程接下來(lái)的章節(jié)學(xué)習(xí)到如何完成這些工作。
PHP 和 AJAX
不存在什么 AJAX 服務(wù)器。

AJAX 是一種在瀏覽器運(yùn)行的技術(shù)。它使用瀏覽器與 web 服務(wù)器之間的異步數(shù)據(jù)傳輸，使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息，而不是整張頁(yè)面。

AJAX 是一種獨(dú)立于 web 服務(wù)器軟件的 web 瀏覽器技術(shù)。

但是，在本教程中，我們將集中在運(yùn)行在 PHP 服務(wù)器上的實(shí)際案例，而不是 AJAX 的工作原理。

如需閱讀更多有關(guān) AJAX 如何工作的知識(shí)，請(qǐng)?jiān)L問(wèn)我們的 AJAX 教程。

AJAX XMLHttpRequest
XMLHttpRequest 對(duì)象使 AJAX 成為可能。
XMLHttpRequest
XMLHttpRequest 對(duì)象是 AJAX 的關(guān)鍵。

該對(duì)象在 Internet Explorer 5.5 與 2000 年 7 月發(fā)布之后就已經(jīng)可用了，但是在 2005 人們開(kāi)始討論 AJAX 和 Web 2.0 之前，這個(gè)對(duì)象并沒(méi)有得到充分的認(rèn)識(shí)。
創(chuàng)建 XMLHttpRequest 對(duì)象
不同的瀏覽器使用不同的方法來(lái)創(chuàng)建 XMLHttpRequest 對(duì)象。

Internet Explorer 使用 ActiveXObject。

其他瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內(nèi)建對(duì)象。

要克服這個(gè)問(wèn)題，可以使用這段簡(jiǎn)單的代碼： 
    
var XMLHttp=null
if (window.XMLHttpRequest)
  {
  XMLHttp=new XMLHttpRequest()
  }
else if (window.ActiveXObject)
  {
  XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }

代碼解釋?zhuān)?
1、首先創(chuàng)建一個(gè)作為 XMLHttpRequest 對(duì)象使用的 XMLHttp 變量。把它的值設(shè)置為null。
2、然后測(cè)試 window.XMLHttpRequest 對(duì)象是否可用。在新版本的 Firefox, Mozilla, Opera 以及 Safari 瀏覽器中，該對(duì)象是可用的。
3、如果可用，則用它創(chuàng)建一個(gè)新對(duì)象：XMLHttp=new XMLHttpRequest()
4、如果不可用，則檢測(cè) window.ActiveXObject 是否可用。在 Internet Explorer version 5.5 及更高的版本中，該對(duì)象是可用的。
5、如果可用，使用它來(lái)創(chuàng)建一個(gè)新對(duì)象：XMLHttp=new ActiveXObject()
改進(jìn)的例子
一些程序員喜歡使用最新最快的版本的 XMLHttpRequest 對(duì)象。

下面的例子試圖加載微軟最新版本的 "Msxml2.XMLHTTP"，在 Internet Explorer 6 中可用，如果無(wú)法加載，則后退到 "Microsoft.XMLHTTP"，在 Internet Explorer 5.5 及其后版本中可用。 
    
function GetXmlHttpObject()
{
var xmlHttp=null;

try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

代碼解釋?zhuān)?
首先創(chuàng)建用作 XMLHttpRequest 對(duì)象的 XMLHttp 變量。把它的值設(shè)置為 null。
按照 web 標(biāo)準(zhǔn)創(chuàng)建對(duì)象 (Mozilla, Opera 以及 Safari)：XMLHttp=new XMLHttpRequest()
按照微軟的方式創(chuàng)建對(duì)象，在 Internet Explorer 6 及更高的版本可用：XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
如果捕獲錯(cuò)誤，則嘗試更老的方法 (Internet Explorer 5.5) ：XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

PHP 和 AJAX 請(qǐng)求
AJAX 請(qǐng)求
在下面的 AJAX 例子中，我們將演示當(dāng)用戶向 web 表單中輸入數(shù)據(jù)時(shí)，網(wǎng)頁(yè)如何與在線的 web 服務(wù)器進(jìn)行通信。
在下面的文本框中輸入名字：
這個(gè)例子包括三張頁(yè)面：

一個(gè)簡(jiǎn)單的 HTML 表單
一段 JavaScript
一張 PHP 頁(yè)面
HTML 表單
這是 HTML 表單。它包含一個(gè)簡(jiǎn)單的 HTML 表單和指向 JavaScript 的鏈接： 
    
<html>
<head>
<script src="clienthint.js"></script> 
</head>

<body>

<form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

例子解釋 - HTML 表單
正如您看到的，上面的 HTML 頁(yè)面含有一個(gè)簡(jiǎn)單的 HTML 表單，其中帶有一個(gè)名為 "txt1" 的輸入字段。

該表單是這樣工作的：

當(dāng)用戶在輸入域中按下并松開(kāi)按鍵時(shí)，會(huì)觸發(fā)一個(gè)事件
當(dāng)該事件被觸發(fā)時(shí)，執(zhí)行名為 showHint() 的函數(shù)
表單的下面是一個(gè)名為 "txtHint" 的 <span>。它用作 showHint() 函數(shù)所返回?cái)?shù)據(jù)的占位符。
JavaScript
JavaScript 代碼存儲(chǔ)在 "clienthint.js" 文件中，它被鏈接到 HTML 文檔： 
    
var xmlHttp

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

例子解釋?zhuān)?
showHint() 函數(shù)
每當(dāng)在輸入域中輸入一個(gè)字符，該函數(shù)就會(huì)被執(zhí)行一次。

如果文本框中有內(nèi)容 (str.length > 0)，該函數(shù)這樣執(zhí)行：

定義要發(fā)送到服務(wù)器的 URL（文件名）
把帶有輸入域內(nèi)容的參數(shù) (q) 添加到這個(gè) URL
添加一個(gè)隨機(jī)數(shù)，以防服務(wù)器使用緩存文件
調(diào)用 GetXmlHttpObject 函數(shù)來(lái)創(chuàng)建 XMLHTTP 對(duì)象，并在事件被觸發(fā)時(shí)告知該對(duì)象執(zhí)行名為 stateChanged 的函數(shù)
用給定的 URL 來(lái)打開(kāi)打開(kāi)這個(gè) XMLHTTP 對(duì)象
向服務(wù)器發(fā)送 HTTP 請(qǐng)求
如果輸入域?yàn)榭眨瑒t函數(shù)簡(jiǎn)單地清空 txtHint 占位符的內(nèi)容。

stateChanged() 函數(shù)
每當(dāng) XMLHTTP 對(duì)象的狀態(tài)發(fā)生改變，則執(zhí)行該函數(shù)。

在狀態(tài)變成 4 （或 "complete"）時(shí)，用響應(yīng)文本填充 txtHint 占位符 txtHint 的內(nèi)容。

GetXmlHttpObject() 函數(shù)
AJAX 應(yīng)用程序只能運(yùn)行在完整支持 XML 的 web 瀏覽器中。

上面的代碼調(diào)用了名為 GetXmlHttpObject() 的函數(shù)。

該函數(shù)的作用是解決為不同瀏覽器創(chuàng)建不同 XMLHTTP 對(duì)象的問(wèn)題。

這一點(diǎn)在上一節(jié)中已經(jīng)解釋過(guò)了。
PHP 頁(yè)面
被 JavaScript 代碼調(diào)用的服務(wù)器頁(yè)面是一個(gè)名為 "gethint.php" 的簡(jiǎn)單服務(wù)器頁(yè)面。

"gethint.php" 中的代碼會(huì)檢查名字?jǐn)?shù)組，然后向客戶端返回對(duì)應(yīng)的名字： 
    
<?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;
?>

如果存在從 JavaScript 送來(lái)的文本 (strlen($q) > 0)，則：

找到與 JavaScript 所傳送的字符相匹配的名字
如果找到多個(gè)名字，把所有名字包含在 response 字符串中
如果沒(méi)有找到匹配的名字，把 response 設(shè)置為 "no suggestion"
如果找到一個(gè)或多個(gè)名字，把 response 設(shè)置為這些名字
把 response 發(fā)送到 "txtHint" 占位符

PHP 和 AJAX XML 實(shí)例
AJAX XML 實(shí)例
在下面的 AJAX 實(shí)例中，我們將演示網(wǎng)頁(yè)如何使用 AJAX 技術(shù)從 XML 文件中讀取信息。
在下面的下列列表中選擇一個(gè) CD
在此列出 CD 信息。
本例包括三張頁(yè)面：

一個(gè)簡(jiǎn)單 HTML 表單
一個(gè) XML 文件
一個(gè) JavaScript 文件
一張 PHP 頁(yè)面
HTML 表單
上面的例子包含了一張簡(jiǎn)單的 HTML 表單，以及指向 JavaScript 的鏈接： 
    
<html>
<head>
<script src="selectcd.js"></script>
</head>

<body>

<form> 
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>

<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>

</body>
</html>

例子解釋?zhuān)?
正如您看到的，它僅僅是一張簡(jiǎn)單的 HTML 表單，其中帶有名為 "cds" 的下拉列表。

表單下面的段落包含了一個(gè)名為 "txtHint" 的 div。這個(gè) div 用作從 web 服務(wù)器檢索到的數(shù)據(jù)的占位符。

當(dāng)用戶選擇數(shù)據(jù)時(shí)，會(huì)執(zhí)行名為 "showCD" 的函數(shù)。這個(gè)函數(shù)的執(zhí)行是由 "onchange" 事件觸發(fā)的。

換句話說(shuō)，每當(dāng)用戶改變了下拉列表中的值，就會(huì)調(diào)用 showCD 函數(shù)。
XML 文件
XML 文件是 "cd_catalog.xml"。該文件中包含了有關(guān) CD 收藏的數(shù)據(jù)。 
    
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy?-->
<CATALOG>
	<CD>
		<TITLE>Empire Burlesque</TITLE>
		<ARTIST>Bob Dylan</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Columbia</COMPANY>
		<PRICE>10.90</PRICE>
		<YEAR>1985</YEAR>
	</CD>
	<CD>
		<TITLE>Hide your heart</TITLE>
		<ARTIST>Bonnie Tyler</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>CBS Records</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1988</YEAR>
	</CD>
	<CD>
		<TITLE>Greatest Hits</TITLE>
		<ARTIST>Dolly Parton</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>RCA</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1982</YEAR>
	</CD>
	<CD>
		<TITLE>For the good times</TITLE>
		<ARTIST>Kenny Rogers</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Mucik Master</COMPANY>
		<PRICE>8.70</PRICE>
		<YEAR>1995</YEAR>
	</CD>
    </CATALOG>

JavaScript
這是存儲(chǔ)在 "selectcd.js" 文件中的 JavaScript 代碼： 
    
var xmlHttp

function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="getcd.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;

try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

例子解釋?zhuān)?
stateChanged() 和 GetXmlHttpObject 函數(shù)與上一節(jié)中的相同，您可以參閱上一頁(yè)中的相關(guān)解釋。

showCD() 函數(shù)
假如選擇了下拉列表中的某個(gè)項(xiàng)目，則函數(shù)執(zhí)行：

調(diào)用 GetXmlHttpObject 函數(shù)來(lái)創(chuàng)建 XMLHTTP 對(duì)象
定義發(fā)送到服務(wù)器的 URL（文件名）
向 URL 添加帶有下拉列表內(nèi)容的參數(shù) (q)
添加一個(gè)隨機(jī)數(shù)，以防服務(wù)器使用緩存的文件
當(dāng)觸發(fā)事件時(shí)調(diào)用 stateChanged
通過(guò)給定的 URL 打開(kāi) XMLHTTP 對(duì)象
向服務(wù)器發(fā)送 HTTP 請(qǐng)求
PHP 頁(yè)面
這個(gè)被 JavaScript 調(diào)用的服務(wù)器頁(yè)面，是一個(gè)名為 "getcd.php" 的簡(jiǎn)單 PHP 文件。

這張頁(yè)面是用 PHP 編寫(xiě)的，使用 XML DOM 來(lái)加載 XML 文檔 "cd_catalog.xml"。

代碼運(yùn)行針對(duì) XML 文件的查詢，并以 HTML 返回結(jié)果： 
    
<?php
$q=$_GET["q"];

$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
  {
  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
    { 
    $y=($x->item($i)->parentNode);
    }
  }
}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++)
{ 
//Process only element nodes
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

例子解釋
當(dāng)請(qǐng)求從 JavaScript 發(fā)送到 PHP 頁(yè)面時(shí)，發(fā)生：

PHP 創(chuàng)建 "cd_catalog.xml" 文件的 XML DOM 對(duì)象
循環(huán)所有 "artist" 元素 (nodetypes = 1)，查找與 JavaScript 所傳數(shù)據(jù)向匹配的名字
找到 CD 包含的正確 artist
輸出 album 的信息，并發(fā)送到 "txtHint" 占位符

PHP 和 AJAX MySQL 數(shù)據(jù)庫(kù)實(shí)例
AJAX 數(shù)據(jù)庫(kù)實(shí)例
在下面的 AJAX 實(shí)例中，我們將演示網(wǎng)頁(yè)如何使用 AJAX 技術(shù)從 MySQL 數(shù)據(jù)庫(kù)中讀取信息。
在下拉列表中選擇一個(gè)名字 （測(cè)試說(shuō)明：該實(shí)例功能未實(shí)現(xiàn)）
在此列出用戶信息。
此列由四個(gè)元素組成：

MySQL 數(shù)據(jù)庫(kù)
簡(jiǎn)單的 HTML 表單
JavaScript
PHP 頁(yè)面
數(shù)據(jù)庫(kù)
將在本例中使用的數(shù)據(jù)庫(kù)看起來(lái)類(lèi)似這樣：
PHP 和 AJAX

HTML 表單
上面的例子包含了一個(gè)簡(jiǎn)單的 HTML 表單，以及指向 JavaScript 的鏈接： 
    
<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>

<form> 
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>

<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>

</body>
</html>

例子解釋 - HTML 表單
正如您看到的，它僅僅是一個(gè)簡(jiǎn)單的 HTML 表單，其中帶有名為 "users" 的下拉列表，這個(gè)列表包含了姓名，以及與數(shù)據(jù)庫(kù)的 "id" 對(duì)應(yīng)的選項(xiàng)值。

表單下面的段落包含了名為 "txtHint" 的 div。這個(gè) div 用作從 web 服務(wù)器檢索到的信息的占位符。

當(dāng)用戶選擇數(shù)據(jù)時(shí)，執(zhí)行名為 "showUser()" 的函數(shù)。該函數(shù)的執(zhí)行由 "onchange" 事件觸發(fā)。

換句話說(shuō)：每當(dāng)用戶改變下拉列表中的值，就會(huì)調(diào)用 showUser() 函數(shù)。
JavaScript
這是存儲(chǔ)在 "selectuser.js" 文件中的 JavaScript 代碼： 
    
var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getuser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

例子解釋?zhuān)?
stateChanged() 和 GetXmlHttpObject 函數(shù)與 PHP AJAX 請(qǐng)求 那一節(jié)中的相同，您可以參閱其中的相關(guān)解釋。

showUser() 函數(shù)
假如下拉列表中的項(xiàng)目被選擇，函數(shù)執(zhí)行：

調(diào)用 GetXmlHttpObject 函數(shù)來(lái)創(chuàng)建 XMLHTTP 對(duì)象
定義發(fā)送到服務(wù)器的 URL（文件名）
向 URL 添加帶有下拉列表內(nèi)容的參數(shù) (q)
添加一個(gè)隨機(jī)數(shù)，以防服務(wù)器使用緩存的文件
當(dāng)觸發(fā)事件時(shí)調(diào)用 stateChanged
通過(guò)給定的 URL 打開(kāi) XMLHTTP 對(duì)象
向服務(wù)器發(fā)送 HTTP 請(qǐng)求
PHP 頁(yè)面
由 JavaScript 調(diào)用的服務(wù)器頁(yè)面，是名為 "getuser.php" 的簡(jiǎn)單 PHP 文件。

該頁(yè)面用 PHP 編寫(xiě)，并使用 MySQL 數(shù)據(jù)庫(kù)。

其中的代碼執(zhí)行針對(duì)數(shù)據(jù)庫(kù)的 SQL 查詢，并以 HTML 表格返回結(jié)果： 
    
<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
 {
 echo "<tr>";
 echo "<td>" . $row['FirstName'] . "</td>";
 echo "<td>" . $row['LastName'] . "</td>";
 echo "<td>" . $row['Age'] . "</td>";
 echo "<td>" . $row['Hometown'] . "</td>";
 echo "<td>" . $row['Job'] . "</td>";
 echo "</tr>";
 }
echo "</table>";

mysql_close($con);
?>

例子解釋?zhuān)?
當(dāng)查詢從 JavaScript 被發(fā)送到這個(gè) PHP 頁(yè)面，會(huì)發(fā)生：

PHP 打開(kāi)到達(dá) MySQL 服務(wù)器的連接
找到擁有指定姓名的 "user"
創(chuàng)建表格，插入數(shù)據(jù)，然后將其發(fā)送到 "txtHint" 占位符

PHP 和 AJAX responseXML 實(shí)例
AJAX 可用于以 XML 返回?cái)?shù)據(jù)庫(kù)信息。
AJAX Database 轉(zhuǎn) XML 實(shí)例 （測(cè)試說(shuō)明：該實(shí)例功能未實(shí)現(xiàn)）
在下面的 AJAX 實(shí)例中，我們將演示網(wǎng)頁(yè)如何從 MySQL 數(shù)據(jù)庫(kù)中讀取信息，把數(shù)據(jù)轉(zhuǎn)換為 XML 文檔，并在不同的地方使用這個(gè)文檔來(lái)顯示信息。

本例與上一節(jié)中的 "PHP AJAX Database" 這個(gè)例子很相似，不過(guò)有一個(gè)很大的不同：在本例中，我們通過(guò)使用 responseXML 函數(shù)從 PHP 頁(yè)面得到的是 XML 形式的數(shù)據(jù)。

把 XML 文檔作為響應(yīng)來(lái)接收，使我們有能力更新頁(yè)面的多個(gè)位置，而不僅僅是接收一個(gè) PHP 輸出并顯示出來(lái)。

在本例中，我們將使用從數(shù)據(jù)庫(kù)接收到的信息來(lái)更新多個(gè) <span> 元素。
在下拉列表中選擇一個(gè)名字
此列由四個(gè)元素組成：

MySQL 數(shù)據(jù)庫(kù)
簡(jiǎn)單的 HTML 表單
JavaScript
PHP 頁(yè)面
數(shù)據(jù)庫(kù)
將在本例中使用的數(shù)據(jù)庫(kù)看起來(lái)類(lèi)似這樣：
PHP 和 AJAX
HTML 表單
上面的例子包含了一個(gè)簡(jiǎn)單的 HTML 表單，以及指向 JavaScript 的鏈接： 
    
<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>

<form> 
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>

<h2>
<span id="firstname"></span>&nbsp;<span id="lastname"></span>
</h2>

<span id="job"></span>

<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>

</body>
</html>

例子解釋 - HTML 表單
HTML 表單是一個(gè)下拉列表，其 name 屬性的值是 "users"，可選項(xiàng)的值與數(shù)據(jù)庫(kù)的 id 字段相對(duì)應(yīng)
表單下面有幾個(gè) <span> 元素，它們用作我們所接收到的不同的值的占位符
當(dāng)用戶選擇了具體的選項(xiàng)，函數(shù) "showUser()" 就會(huì)執(zhí)行。該函數(shù)的執(zhí)行由 "onchange" 事件觸發(fā)
換句話說(shuō)，每當(dāng)用戶在下拉列表中改變了值，函數(shù) showUser() 就會(huì)執(zhí)行，并在指定的 <span> 元素中輸出結(jié)果。
JavaScript
這是存儲(chǔ)在文件 "responsexml.js" 中的 JavaScript 代碼： 
    
var xmlHttp

function showUser(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
 var url="responsexml.php"
 url=url+"?q="+str
 url=url+"&sid="+Math.random()
 xmlHttp.onreadystatechange=stateChanged 
 xmlHttp.open("GET",url,true)
 xmlHttp.send(null)
 }

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
 xmlDoc=xmlHttp.responseXML;
 document.getElementById("firstname").innerHTML=
 xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
 document.getElementById("lastname").innerHTML=
 xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
 document.getElementById("job").innerHTML=
 xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
 document.getElementById("age_text").innerHTML="Age: ";
 document.getElementById("age").innerHTML=
 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
 document.getElementById("hometown_text").innerHTML="<br/>From: ";
 document.getElementById("hometown").innerHTML=
 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
 }
}

function GetXmlHttpObject()
 { 
 var objXMLHttp=null
 if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

例子解釋?zhuān)?
showUser() 與 GetXmlHttpObject 函數(shù)與 PHP 和 AJAX MySQL 數(shù)據(jù)庫(kù)實(shí)例 這一節(jié)中的例子是相同的。您可以參閱其中的相關(guān)解釋。

stateChanged() 函數(shù)
如果選擇了下拉列表中的項(xiàng)目，該函數(shù)執(zhí)行：

通過(guò)使用 responseXML 函數(shù)，把 "xmlDoc" 變量定義為一個(gè) XML 文檔
從這個(gè) XML 文檔中取回?cái)?shù)據(jù)，把它們放在正確的 "span" 元素中
PHP 頁(yè)面
這個(gè)由 JavaScript 調(diào)用的服務(wù)器頁(yè)面，是一個(gè)名為 "responsexml.php" 的簡(jiǎn)單的 PHP 文件。

該頁(yè)面由 PHP 編寫(xiě)，并使用 MySQL 數(shù)據(jù)庫(kù)。

代碼會(huì)運(yùn)行一段針對(duì)數(shù)據(jù)庫(kù)的 SQL 查詢，并以 XML 文檔返回結(jié)果： 
    
<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//A date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

$q=$_GET["q"];

$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM user WHERE id = ".$q."";

$result = mysql_query($sql);

echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
 {
 echo "<firstname>" . $row['FirstName'] . "</firstname>";
 echo "<lastname>" . $row['LastName'] . "</lastname>";
 echo "<age>" . $row['Age'] . "</age>";
 echo "<hometown>" . $row['Hometown'] . "</hometown>";
 echo "<job>" . $row['Job'] . "</job>";
 }
echo "</person>";

mysql_close($con);
?>

例子解釋?zhuān)?
當(dāng)查詢從 JavaScript 送達(dá) PHP 頁(yè)面時(shí)，會(huì)發(fā)生：

PHP 文檔的 content-type 被設(shè)置為 "text/xml"
PHP 文檔被設(shè)置為 "no-cache"，以防止緩存
用 HTML 頁(yè)面送來(lái)的數(shù)據(jù)設(shè)置 $q 變量
PHP 打開(kāi)與 MySQL 服務(wù)器的連接
找到帶有指定 id 的 "user"
以 XML 文檔輸出數(shù)據(jù)

PHP 和 AJAX Live Search
AJAX 可為用戶提供更友好、交互性更強(qiáng)的搜索體驗(yàn)。
AJAX Live Search
在下面的 AJAX 例子中，我們將演示一個(gè)實(shí)時(shí)的搜索。

實(shí)時(shí)的搜索與傳統(tǒng)搜索相比，具有很多優(yōu)勢(shì)：

當(dāng)鍵入數(shù)據(jù)時(shí)，就會(huì)顯示出匹配的結(jié)果
當(dāng)繼續(xù)鍵入數(shù)據(jù)時(shí)，對(duì)結(jié)果進(jìn)行過(guò)濾
如果結(jié)果太少，刪除字符就可以獲得更寬的范圍
在下面的文本框中搜索 W3School 的頁(yè)面
本例包括四個(gè)元素：

簡(jiǎn)單的 HTML 表單
JavaScript
PHP 頁(yè)面
XML 文檔
在本例中，結(jié)果在一個(gè) XML 文檔 (links.xml) 中進(jìn)行查找。為了讓這個(gè)例子小而簡(jiǎn)單，我們只提供 8 個(gè)結(jié)果 
    
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy?-->
<pages>
<link>
<title>HTML DOM alt Property</title>
<url>http://www.w3school.com.cn/htmldom/prop_img_alt.asp</url>
</link>
<link>
<title>HTML DOM height Property</title>
<url>http://www.w3school.com.cn/htmldom/prop_img_height.asp</url>
</link>
<link>
<title>HTML a tag</title>
<url>http://www.w3school.com.cn/tags/tag_a.asp</url>
</link>
<link>
<title>HTML br tag</title>
<url>http://www.w3school.com.cn/tags/tag_br.asp</url>
</link>
<link>
<title>CSS background Property</title>
<url>http://www.w3school.com.cn/css/pr_background.asp</url>
</link>
<link>
<title>CSS border Property</title>
<url>http://www.w3school.com.cn/css/pr_border.asp</url>
</link>
<link>
<title>JavaScript Date() Method</title>
<url>http://www.w3school.com.cn/jsref/jsref_date.asp</url>
</link>
<link>
<title>JavaScript anchor() Method</title>
<url>http://www.w3school.com.cn/jsref/jsref_anchor.asp</url>
</link>
</pages>

HTML 表單
這是 HTML 頁(yè)面。它包含一個(gè)簡(jiǎn)單的 HTML 表單，針對(duì)此表單的 CSS 樣式，以及指向 JavaScript 的鏈接： 
    
<html>
<head>
<script src="livesearch.js"></script> 
<style type="text/css"> 
#livesearch
  { 
  margin:0px;
  width:194px; 
  }
#txt1
  { 
  margin:0px;
  } 
</style>
</head>
<body>

<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)">

<div id="livesearch"></div>
</form>

</body>
</html>

例子解釋 - HTML 表單
正如你看到的，HTML 頁(yè)面包含一個(gè)簡(jiǎn)單的 HTML 表單，其中的文本框名為 "txt1"。

表單是這樣工作的：

當(dāng)用戶在文本框中按鍵并松開(kāi)按鍵時(shí)，會(huì)觸發(fā)一個(gè)事件
當(dāng)事件觸發(fā)時(shí)，會(huì)執(zhí)行名為 showResult() 的函數(shù)
表單下面是名為 "livesearch" 的 <div> 元素。它用作 showResult() 所返回?cái)?shù)據(jù)的占位符
JavaScript
JavaScript 代碼存儲(chǔ)在與 HTML 文檔連接的 "livesearch.js" 中： 
    
var xmlHttp

function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 return
 }

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }

var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("livesearch").
 innerHTML=xmlHttp.responseText;
 document.getElementById("livesearch").
 style.border="1px solid #A5ACB2";
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

例子解釋?zhuān)?
GetXmlHttpObject 與 PHP 和 AJAX 請(qǐng)求 中的例子相同。

showResult() 函數(shù)
該函數(shù)每當(dāng)一個(gè)字符輸入文本框就會(huì)執(zhí)行一次。

如果文本域中沒(méi)有輸入 (str.length == 0)，該函數(shù)把返回字段設(shè)置為空，并刪除周?chē)娜魏芜吙颉?

不過(guò)，如果文本域中存在輸入，則函數(shù)執(zhí)行：

定義發(fā)送到服務(wù)器的 url （文件名）
把帶有輸入框內(nèi)容的參數(shù) (q) 添加到 url
添加一個(gè)隨機(jī)數(shù)，以防止服務(wù)器使用緩存文件
調(diào)用 GetXmlHttpObject 函數(shù)來(lái)創(chuàng)建 XMLHTTP 對(duì)象，并在觸發(fā)一個(gè)變化時(shí)告知此函數(shù)執(zhí)行名為 stateChanged 的一個(gè)函數(shù)
使用給定的 url 來(lái)打開(kāi) XMLHTTP 對(duì)象
向服務(wù)器發(fā)送 HTTP 請(qǐng)求
stateChanged() 函數(shù)
每當(dāng) XMLHTTP 對(duì)象的狀態(tài)發(fā)生變化時(shí)，該函數(shù)就會(huì)執(zhí)行。

當(dāng)狀態(tài)變?yōu)?4 (或 "complete") 時(shí)，就會(huì)使用響應(yīng)文本來(lái)填充 txtHint 占位符的內(nèi)容，并在返回字段周?chē)O(shè)置一個(gè)邊框。
PHP 頁(yè)面
由 JavaScript 代碼調(diào)用的服務(wù)器頁(yè)面是名為 "livesearch.php" 的 PHP 文件。

"livesearch.php" 中的代碼檢查那個(gè) XML 文檔 "links.xml"。該文檔 w3school.com.cn 上的一些頁(yè)面的標(biāo)題和 URL。

這些代碼會(huì)搜索 XML 文件中匹配搜索字符串的標(biāo)題，并以 HTML 返回結(jié)果： 
    
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
 {
 $y=$x->item($i)->getElementsByTagName('title');
 $z=$x->item($i)->getElementsByTagName('url');
 if ($y->item(0)->nodeType==1)
  {
  //find a link matching the search text
  if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
   {
   if ($hint=="")
    {
    $hint="<a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   else
    {
    $hint=$hint . "<br /><a href='" . 
    $z->item(0)->childNodes->item(0)->nodeValue . 
    "' target='_blank'>" . 
    $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
    }
   }
  }
 }
}

// 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;
?>

例子解釋?zhuān)?
如果從 JavaScript 送來(lái)了任何文本 (strlen($q) > 0)，會(huì)發(fā)生：

PHP 創(chuàng)建 "links.xml" 文件的一個(gè) XML DOM 對(duì)象
遍歷所有 "title" 元素 (nodetypes = 1)，以便找到匹配 JavaScript 所傳數(shù)據(jù)的 name
找到包含正確 title 的 link，并設(shè)置為 "$response" 變量。如果找到多于一個(gè)匹配，所有的匹配都會(huì)添加到變量
如果沒(méi)有找到匹配，則把 $response 變量設(shè)置為 "no suggestion"
$result 是送往 "livesearch" 占位符的輸出

PHP 和 AJAX RSS 閱讀器
RSS 閱讀器用于閱讀 RSS Feed。

RSS 允許對(duì)新聞和更新進(jìn)行快速瀏覽。
AJAX RSS 閱讀器
在下面的 AJAX 實(shí)例中，我們將演示一個(gè) RSS 閱讀器，通過(guò)它，來(lái)自 RSS 的內(nèi)容在不進(jìn)行刷新的情況下載入網(wǎng)頁(yè)。
在下面的列表框中選擇一個(gè) RSS 新聞?dòng)嗛?
在此列出 RSS Feed。

本例包括三個(gè)元素：

簡(jiǎn)單的 HTML 表單
JavaScript
PHP 頁(yè)面
HTML 表單
這是 HTML 頁(yè)面。它包含一個(gè)簡(jiǎn)單的 HTML 表單和執(zhí)行一個(gè) JavaScript 文件的鏈接： 
    
<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>

<form> 
Select an RSS-Feed:
<select onchange="showRSS(this.value)">
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>

<p><div id="rssOutput">
<b>RSS Feed will be listed here.</b></div></p>
</body>
</html>

例子解釋 - HTML 表單
正如您看到的，上面的 HTML 頁(yè)面包含一個(gè)簡(jiǎn)單的 HTML 表單，其中帶有一個(gè)下拉列表框。

表單是這樣工作的：

當(dāng)用戶選擇下拉框中的選項(xiàng)時(shí)，會(huì)觸發(fā)一個(gè)事件
當(dāng)事件觸發(fā)時(shí)，執(zhí)行 showRSS() 函數(shù)
表單下面是名為 "rssOutput" 的一個(gè) <div>。它用作 showRSS() 函數(shù)所返回的數(shù)據(jù)的占位符。
JavaScript
JavaScript 代碼存儲(chǔ)在 "getrss.js" 中，它與 HTML 文檔相連接： 
    
var xmlHttp

function showRSS(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  }
 var url="getrss.php"
 url=url+"?q="+str
 url=url+"&sid="+Math.random()
 xmlHttp.onreadystatechange=stateChanged 
 xmlHttp.open("GET",url,true)
 xmlHttp.send(null)
 }

function stateChanged() 
 { 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  { 
  document.getElementById("rssOutput")
  .innerHTML=xmlHttp.responseText 
  } 
 }

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

例子解釋?zhuān)?
stateChanged() 和 GetXmlHttpObject 函數(shù)與 PHP 和 AJAX 請(qǐng)求 這一節(jié)中的例子相同。

showRSS() 函數(shù)
每當(dāng)在下拉框中選擇選擇時(shí)，該函數(shù)就會(huì)執(zhí)行：

定義發(fā)送到服務(wù)器的 url （文件名）
把參數(shù) (q) 添加到 url，參數(shù)內(nèi)容是下拉框中的被選項(xiàng)
添加一個(gè)隨機(jī)數(shù)，以防止服務(wù)器緩存文件
調(diào)用 GetXmlHttpObject 函數(shù)來(lái)創(chuàng)建 XMLHTTP 對(duì)象，并告知該對(duì)象在觸發(fā)一個(gè)改變時(shí)去執(zhí)行 stateChanged 函數(shù)
通過(guò)給定的 url 來(lái)打開(kāi) XMLHTTP
把 HTTP 請(qǐng)求發(fā)動(dòng)到服務(wù)器
PHP 頁(yè)面
調(diào)用 JavaScript 代碼的服務(wù)器頁(yè)面是名為 "getrss.php" 的 PHP 文件： 
    
<?php
//get the q parameter from URL
$q=$_GET["q"];

//find out which feed was selected
if($q=="Google")
 {
 $xml=("http://news.google.com/news?ned=us&topic=h&output=rss");
 }
elseif($q=="MSNBC")
 {
 $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
 }

$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);

//get elements from "<channel>"
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;

//output elements from "<channel>"
echo("<p><a href='" . $channel_link
 . "'>" . $channel_title . "</a>");
echo("<br />");
echo($channel_desc . "</p>");

//get and output "<item>" elements
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++)
 {
 $item_title=$x->item($i)->getElementsByTagName('title')
 ->item(0)->childNodes->item(0)->nodeValue;
 $item_link=$x->item($i)->getElementsByTagName('link')
 ->item(0)->childNodes->item(0)->nodeValue;
 $item_desc=$x->item($i)->getElementsByTagName('description')
 ->item(0)->childNodes->item(0)->nodeValue;

 echo ("<p><a href='" . $item_link
 . "'>" . $item_title . "</a>");
 echo ("<br />");
 echo ($item_desc . "</p>");
 }
?>

例子解釋?zhuān)?
當(dāng)一個(gè)選項(xiàng)從 JavaScript 發(fā)送時(shí)，會(huì)發(fā)生：

PHP 找出哪個(gè) RSS feed 被選中
為選中的 RSS feed 創(chuàng)建 XML DOM 對(duì)象
找到并輸出來(lái)自 RSS 頻道的元素
遍歷前三個(gè) RSS 項(xiàng)目中的元素，并進(jìn)行輸出

PHP 和 AJAX 投票
AJAX 投票
在這個(gè) AJAX 實(shí)例中，我們將演示一個(gè)投票程序，網(wǎng)頁(yè)在不重新加載的情況下，就可以獲得結(jié)果。
到目前為止，您喜歡 PHP 和 AJXA 嗎？
本例包括四個(gè)元素：

HTML 表單
JavaScript
PHP 頁(yè)面
存放結(jié)果的文本文件
HTML 表單
這是 HTML 頁(yè)面。它包含一個(gè)簡(jiǎn)單的 HTML 表單，以及一個(gè)與 JavaScript 文件的連接： 
    
<html>
<head>
<script src="poll.js"></script> 
</head>
<body>

<div id="poll">
<h2>Do you like PHP and AJAX so far?</h2>

<form>
Yes: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
No: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>

</body>
</html>

例子解釋 - HTML 表單
正如您看到的，上面的 HTML 頁(yè)面包含一個(gè)簡(jiǎn)單的 HTML 表單，其中的 <div> 元素帶有兩個(gè)單選按鈕。

表單這樣工作：

當(dāng)用戶選擇 "yes" 或 "no" 時(shí)，會(huì)觸發(fā)一個(gè)事件
當(dāng)事件觸發(fā)時(shí)，執(zhí)行 getVote() 函數(shù)
圍繞該表單的是名為 "poll" 的 <div>。當(dāng)數(shù)據(jù)從 getVote() 函數(shù)返回時(shí)，返回的數(shù)據(jù)會(huì)替代該表單。
文本文件
文本文件 (poll_result.txt) 中存儲(chǔ)來(lái)自投票程序的數(shù)據(jù)。

它類(lèi)似這樣：
引用
0||0

第一個(gè)數(shù)字表示 "Yes" 投票，第二個(gè)數(shù)字表示 "No" 投票。

注釋?zhuān)河浀弥辉试S您的 web 服務(wù)器來(lái)編輯該文本文件。不要讓其他人獲得訪問(wèn)權(quán)，除了 web 服務(wù)器 (PHP)。
JavaScript
JavaScript 代碼存儲(chǔ)在 "poll.js" 中，并于 HTML 文檔相連接： 
    
var xmlHttp

function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

例子解釋?zhuān)?
stateChanged() 和 GetXmlHttpObject 函數(shù)與 PHP 和 AJAX 請(qǐng)求 這一節(jié)中的例子相同。

getVote() 函數(shù)
當(dāng)用戶在 HTML 表單中選擇 "yes" 或 "no" 時(shí)，該函數(shù)就會(huì)執(zhí)行。

定義發(fā)送到服務(wù)器的 url （文件名）
向 url 添加參數(shù) (vote)，參數(shù)中帶有輸入字段的內(nèi)容
添加一個(gè)隨機(jī)數(shù)，以防止服務(wù)器使用緩存的文件
調(diào)用 GetXmlHttpObject 函數(shù)來(lái)創(chuàng)建 XMLHTTP 對(duì)象，并告知該對(duì)象當(dāng)觸發(fā)一個(gè)變化時(shí)執(zhí)行 stateChanged 函數(shù)
用給定的 url 來(lái)打開(kāi) XMLHTTP 對(duì)象
向服務(wù)器發(fā)送 HTTP 請(qǐng)求
PHP 頁(yè)面
由 JavaScript 代碼調(diào)用的服務(wù)器頁(yè)面是名為 "poll_vote.php" 的一個(gè)簡(jiǎn)單的 PHP 文件。 
    
<?php
$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0)
 {
 $yes = $yes + 1;
 }
if ($vote == 1)
 {
 $no = $no + 1;
 }

//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>

<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

例子解釋?zhuān)?
所選的值從 JavaScript 傳來(lái)，然后會(huì)發(fā)生：

獲取 "poll_result.txt" 文件的內(nèi)容
把文件內(nèi)容放入變量，并向被選變量累加 1
把結(jié)果寫(xiě)入 "poll_result.txt" 文件
輸出圖形化的投票結(jié)果

PHP 和 AJAX


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】元

您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧，站長(zhǎng)會(huì)非常 感謝您的哦！??！

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板： 亚洲精品一区二区三区在线播放 | 国产亚洲精品久久久久久久网站 | 韩国色三级伦不卡高清在线观看 | 狠狠成人 | 射久久| 在线观看色 | 成人网视频 | 久久久久久影院 | 西西做人爱免费视频 | 四虎精品福利视频精品 | 国产―笫一页―浮力影院xyz | 国产一区二区精品久 | 日韩欧美一区二区久久 | 免费国产小视频在线观看 | 97在线碰碰观看免费高清 | 九九99九九精彩网站 | 婷综合| 777色狠狠一区二区三区 | 精品视频一区二区三区在线播放 | 色综合综合网 | 免费国产一级 | 青青草久热精品视频在线观看 | 亚洲精品日韩中文字幕久久久 | 亚洲精品不卡午夜精品 | 亚洲特级毛片 | 日韩中文字幕在线观看视频 | 在线播放国产福利视频 | 手机看片一区二区 | 91九色首页 | 99国产精品国产精品 | 中文字幕日韩一区二区三区不 | 九九热视频免费观看 | 久久精品蜜芽亚洲国产a | a4yy私人毛片| 黄色综合网| 欧美毛片免费 | 国产精品线在线精品 | 亚洲日韩中文字幕一区 | 在线91精品亚洲网站精品成人 | 香香影院在线观看 | 奇米第四色7777 |