|
作者： Jonathan Fenocchi
時(shí)間：2005.10.25
譯者：Sheneyan
英文原文：
http://webreference.com/programming/javascript/jf/column12/index.html
在這個(gè)關(guān)于AJAX系列的第三部分中，我們將學(xué)習(xí)如何使用AJAX與服務(wù)端進(jìn)行寫作以及這些技術(shù)如何產(chǎn)生強(qiáng)大的web應(yīng)用程序。如果你對(duì)學(xué)習(xí)如何構(gòu)建類似GMail或者Google Maps的web程序感興趣的話，這是一篇基礎(chǔ)的入門（雖然那兩個(gè)東東會(huì)比我們?cè)谶@篇文章中提及的內(nèi)容復(fù)雜的多）。在這篇文章中，我使用PHP作為服務(wù)端語(yǔ)言，但AJAX能夠和任何服務(wù)端語(yǔ)言進(jìn)行很好的兼容，所以你盡可以選擇你所鐘愛的任何語(yǔ)言！
我們還是從我們上一篇文章的代碼（喏，就在上面）開始我們的學(xué)習(xí)，你可以去閱讀它來(lái)作為參考。
這里就是這個(gè)HTML頁(yè)面（帶js）：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-cn" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>如何使用ajax開發(fā)web應(yīng)用程序--示例</title>
<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
processXML(xmlObj.responseXML);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function processXML(obj){
var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
var dataArrayLen = dataArray.length;
var insertData = '<table><tr><th>'
+ 'Pets</th><th>Tasks</th></tr>';
for (var i=0; i<dataArrayLen; i++){
if(dataArray[i].tagName){
insertData += '<tr><td>' + dataArray[i].tagName + '</td>'
+ '<td>' + dataArray[i].getAttribute('tasks') + '</td></tr>';
}
}
insertData += '</table>';
document.getElementById ('dataArea').innerHTML = insertData;
}
//--></script>
<style type="text/css"><!--
table, tr, th, td {
border: solid 1px #000;
border-collapse: collapse;
padding: 5px;
}
--></style>
</head>
<body>
<h1>使用Ajax開發(fā)web應(yīng)用程序</h1>
<p>這個(gè)頁(yè)面演示了AJAX技術(shù)如何通過(guò)動(dòng)態(tài)讀取一個(gè)遠(yuǎn)程文件來(lái)更新一個(gè)網(wǎng)頁(yè)的內(nèi)容－－不需要任何網(wǎng)頁(yè)的重新加載。注意：這個(gè)例子對(duì)于禁止js的用戶來(lái)說(shuō)沒(méi)有效果。</p>
<p>這個(gè)頁(yè)面將演示如從取回并處理成組的XML數(shù)據(jù)。被取回的數(shù)據(jù)將會(huì)以表格形式輸出到底下。
<a href="#" onclick="ajaxRead('data_3.php'); return false">查看演示</a>.</p>
<div id="dataArea"></div>
</body>
</html>
(sheneyan注：示例見 example_3.html )
注意：這里唯一的變化就是我們將我們的ajaxRead()中的“data_2.xml”改成了“data_3.php”。這是因?yàn)槲覀儗⑹褂胮hp來(lái)輸出XML（如果你在你的瀏覽器里打開這個(gè)PHP文件，它會(huì)以一個(gè)XML文件的形式展現(xiàn)出來(lái)－－我們只是要在這個(gè)文件中進(jìn)行操作而不只是一個(gè)簡(jiǎn)單的XML）。這個(gè)PHP文件的輸出類似：
<?xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
<貓 tasks="喂食, 飲水, 抓跳蚤" />
<狗 tasks="喂食, 飲水, 帶出去遛遛" />
<魚 tasks="喂食, 檢查氧氣，水的純度，其它" />
</pets>
</data>
(Sheneyan注：示例就不提供了，參考底下說(shuō)明即可。)
這只是輸出結(jié)果，我們準(zhǔn)備從一個(gè)mysql數(shù)據(jù)庫(kù)中獲取這些信息。從現(xiàn)在起，我們可以直接在我們的數(shù)據(jù)庫(kù)中修改數(shù)據(jù)而不是手動(dòng)修改XML文件。用AJAX通過(guò)PHP來(lái)取得數(shù)據(jù)，并將它獲取到一個(gè)頁(yè)面上－－所有這些，仍然不需要重新加載網(wǎng)頁(yè)。
第一步是連接到mysql去獲取數(shù)據(jù)。這篇文章的重點(diǎn)在javascript，所以我不會(huì)解釋下面的代碼如何工作，你需要自己去了解如何連接mysql數(shù)據(jù)庫(kù)。
<?php
$user = "admin";
$pass = "adminpass";
$host = "localhost";
$conn = mysql_connect($host, $user, $pass) or die("Unable to connect to MySQL.");
$db = mysql_select_db("pets",$conn) or die("Could not select the database.");
mysql_close($db);
?>
只要你連接了數(shù)據(jù)庫(kù)，你可以通過(guò)底下的查詢來(lái)獲取信息：
<?php
$user = "admin";
$pass = "adminpass";
$host = "localhost";
$conn = mysql_connect($host, $user, $pass) or die("Unable to connect to MySQL.");
$db = mysql_select_db("pets",$conn) or die("Could not select the database.");
$result = mysql_query("SELECT * FROM `pets`");
if(mysql_num_rows ($result) == 0){
die ('Error: no data found in the database.');
}
while ($row = mysql_fetch_assoc($result)){
echo 'Pet: '.$row['pet'].', tasks: '.$row['tasks'].'. ';
}
mysql_close($db);
?>
這段代碼給了你需要的信息，但它輸出并不正確。我們需要修改這PHP代碼來(lái)分隔數(shù)據(jù)為XML，而不是純文本。為了實(shí)現(xiàn)這個(gè)目標(biāo)我們得作幾個(gè)修改。
<?php
header('Content-Type: text/xml');//編號(hào)1
echo '<?xml version="1.0" encoding="UTF-8"?>';//編號(hào)2
echo "\n<data>\n<pets>\n";//編號(hào)3
$user = "admin";
$pass = "adminpass";
$host = "localhost";
$conn = mysql_connect($host, $user, $pass) or die("無(wú)法連接mysql.");
$db = mysql_select_db("pets",$conn) or die("無(wú)法選擇數(shù)據(jù)庫(kù).");
$result = mysql_query("SELECT * FROM `pets`");
if(mysql_num_rows ($result) == 0){
die ('Error: 數(shù)據(jù)庫(kù)沒(méi)有數(shù)據(jù).');
}
while ($row = mysql_fetch_assoc($result)){
echo '<'.$row['pet'].' tasks="'.$row['tasks'].'" />'."\n";//編號(hào)4
}
echo "</pets>\n</data>";//編號(hào)5
mysql_close($db);
?>
讓我們從上面開始，一次一行的來(lái)分析它是如何輸出XML的.我給每一行都加了注釋標(biāo)記以便于更好的對(duì)應(yīng)理解(原文是I've color-coded each line to make it easier to understand,我懶得上色,就改成用編號(hào)了)
編號(hào)1:這部分代碼發(fā)送一個(gè)http頭來(lái)讓用戶客戶端明白這個(gè)php文件輸出的是一個(gè)XML。這就是為什么你在你的瀏覽器里看這個(gè)文檔的時(shí)候它以一個(gè)XML文件的形式展現(xiàn)，即使你的文件有一個(gè)“.php”后綴。
編號(hào)2:這部分的代碼輸出了XML聲明。這是我之前展示給你看的XML的第一行。
編號(hào)3:這部分的代碼輸出的最開始的兩個(gè)標(biāo)簽：我們的根標(biāo)簽，<data>和我們用來(lái)放置所有寵物的<pets>標(biāo)簽。
編號(hào)4:這部分的代碼最困難的。這里包含了一個(gè)循環(huán)用來(lái)遍歷你數(shù)據(jù)庫(kù)里所有的數(shù)據(jù)。每次循環(huán)，它會(huì)輸出一個(gè)新的節(jié)點(diǎn)，這個(gè)節(jié)點(diǎn)用每一種動(dòng)物作為標(biāo)簽名以及一個(gè)"任務(wù)"屬性。例如，如果你數(shù)據(jù)庫(kù)中的第一只寵物是“貓”而且它相應(yīng)的任務(wù)字段是“喂食, 飲水, 抓跳蚤”，那php將輸出在XML文檔中輸出 <貓 tasks="喂食, 飲水, 抓跳蚤" /> 。這個(gè)“\n” 部分只是在結(jié)尾插入一個(gè)新行，保證這個(gè)XML代碼不至于都在同一行。
編號(hào)5:這部分的代碼結(jié)束了 我們開始時(shí)打開的</pets> 和 </data> 節(jié)點(diǎn)。因?yàn)閄ML必須是格式良好的（well-formed），所以我們必須認(rèn)真對(duì)待這部分以確認(rèn)我們的程序能夠正確運(yùn)行。
現(xiàn)在我們已經(jīng)讓PHP輸出XML了，我們現(xiàn)在所要作的就是登錄我們的mysql數(shù)據(jù)庫(kù)，并進(jìn)行我們所需要的修改，來(lái)更新這個(gè)XML。很酷，不是嗎？我們?nèi)匀荒軌蚴褂蒙弦黄恼轮械膉s腳本來(lái)獲取代碼，因?yàn)閄ML輸出和之前的完全一樣。
結(jié)論
你可以再進(jìn)一步的擴(kuò)展，使用XML來(lái)保存和獲取數(shù)據(jù)。換句話說(shuō)，你能夠使用php來(lái)寫你的XML文件，然后讓javascript來(lái)讀。用ajax，你也能夠定時(shí)的檢查xml文件是否已經(jīng)更改而且，如果XML已經(jīng)更新，也可以更新本頁(yè)面。
關(guān)于作者
Jonathan Fenocchi(mail:jona#slightlyremarkable.com #換成@)是一個(gè)網(wǎng)絡(luò)開發(fā)者，主攻web設(shè)計(jì)，客戶端腳本，php腳本。
他的網(wǎng)站位于：http://www.slightlyremarkable.com
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 如何使用ajax開發(fā)web應(yīng)用程序 [2] 下一頁(yè) 如何使用ajax開發(fā)web應(yīng)用程序 [4]
◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁(yè) 
第 3 頁(yè) 如何使用ajax開發(fā)web應(yīng)用程序 [3]
