Posted on 2005-12-22 15:59
☆藍色夢想☆ 閱讀(294)
評論(0) 編輯 收藏 所屬分類:
AJAX
在這個關于AJAX系列的第三部分中，我們將學習如何使用AJAX與服務端進行寫作以及這些技術如何產生強大的web應用程序。如果你對學習如何構建類似GMail或者Google Maps的web程序感興趣的話，這是一篇基礎的入門（雖然那兩個東東會比我們在這篇文章中提及的內容復雜的多）。在這篇文章中，我使用PHP作為服務端語言，但AJAX能夠和任何服務端語言進行很好的兼容，所以你盡可以選擇你所鐘愛的任何語言！
我們還是從我們上一篇文章的代碼（喏，就在上面）開始我們的學習，你可以去閱讀它來作為參考。
這里就是這個HTML頁面（帶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開發web應用程序--示例</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開發web應用程序</h1>
<p>這個頁面演示了AJAX技術如何通過動態讀取一個遠程文件來更新一個網頁的內容－－不需要任何網頁的重新加載。注意：這個例子對于禁止js的用戶來說沒有效果。</p>
<p>這個頁面將演示如從取回并處理成組的XML數據。被取回的數據將會以表格形式輸出到底下。
<a href="#" onclick="ajaxRead('data_3.php'); return false">查看演示</a>.</p>
<div id="dataArea"></div>
</body>
</html>
(sheneyan注：示例見http://sheneyan.com/html/article/ajax/example_3.html)
注意：這里唯一的變化就是我們將我們的ajaxRead()中的“data_2.xml”改成了“data_3.php”。這是因為我們將使用php來輸出XML（如果你在你的瀏覽器里打開這個PHP文件，它會以一個XML文件的形式展現出來－－我們只是要在這個文件中進行操作而不只是一個簡單的XML）。這個PHP文件的輸出類似：
<?xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
<貓 tasks="喂食, 飲水, 抓跳蚤" />
<狗 tasks="喂食, 飲水, 帶出去遛遛" />
<魚 tasks="喂食, 檢查氧氣，水的純度，其它" />
</pets>
</data>
(Sheneyan注：示例就不提供了，參考底下說明即可。)
這只是輸出結果，我們準備從一個mysql數據庫中獲取這些信息。從現在起，我們可以直接在我們的數據庫中修改數據而不是手動修改XML文件。用AJAX通過PHP來取得數據，并將它獲取到一個頁面上－－所有這些，仍然不需要重新加載網頁。
第一步是連接到mysql去獲取數據。這篇文章的重點在javascript，所以我不會解釋下面的代碼如何工作，你需要自己去了解如何連接mysql數據庫。
<?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);
?>
只要你連接了數據庫，你可以通過底下的查詢來獲取信息：
<?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代碼來分隔數據為XML，而不是純文本。為了實現這個目標我們得作幾個修改。
<?php
header('Content-Type: text/xml');//編號1
echo '<?xml version="1.0" encoding="UTF-8"?>';//編號2
echo "\n<data>\n<pets>\n";//編號3
$user = "admin";
$pass = "adminpass";
$host = "localhost";
$conn = mysql_connect($host, $user, $pass) or die("無法連接mysql.");
$db = mysql_select_db("pets",$conn) or die("無法選擇數據庫.");
$result = mysql_query("SELECT * FROM `pets`");
if(mysql_num_rows ($result) == 0){
die ('Error: 數據庫沒有數據.');
}
while ($row = mysql_fetch_assoc($result)){
echo '<'.$row['pet'].' tasks="'.$row['tasks'].'" />'."\n";//編號4
}
echo "</pets>\n</data>";//編號5
mysql_close($db);
?>
讓我們從上面開始，一次一行的來分析它是如何輸出XML的.我給每一行都加了注釋標記以便于更好的對應理解(原文是I've color-coded each line to make it easier to understand,我懶得上色,就改成用編號了)
編號1:這部分代碼發送一個http頭來讓用戶客戶端明白這個php文件輸出的是一個XML。這就是為什么你在你的瀏覽器里看這個文檔的時候它以一個XML文件的形式展現，即使你的文件有一個“.php”后綴。
編號2:這部分的代碼輸出了XML聲明。這是我之前展示給你看的XML的第一行。
編號3:這部分的代碼輸出的最開始的兩個標簽：我們的根標簽，<data>和我們用來放置所有寵物的<pets>標簽。
編號4:這部分的代碼最困難的。這里包含了一個循環用來遍歷你數據庫里所有的數據。每次循環，它會輸出一個新的節點，這個節點用每一種動物作為標簽名以及一個"任務"屬性。例如，如果你數據庫中的第一只寵物是“貓”而且它相應的任務字段是“喂食, 飲水, 抓跳蚤”，那php將輸出在XML文檔中輸出 <貓 tasks="喂食, 飲水, 抓跳蚤" /> 。這個“\n” 部分只是在結尾插入一個新行，保證這個XML代碼不至于都在同一行。
編號5:這部分的代碼結束了 我們開始時打開的</pets> 和 </data> 節點。因為XML必須是格式良好的（well-formed），所以我們必須認真對待這部分以確認我們的程序能夠正確運行。
現在我們已經讓PHP輸出XML了，我們現在所要作的就是登錄我們的mysql數據庫，并進行我們所需要的修改，來更新這個XML。很酷，不是嗎？我們仍然能夠使用上一篇文章中的js腳本來獲取代碼，因為XML輸出和之前的完全一樣。
結論
你可以再進一步的擴展，使用XML來保存和獲取數據。換句話說，你能夠使用php來寫你的XML文件，然后讓javascript來讀。用ajax，你也能夠定時的檢查xml文件是否已經更改而且，如果XML已經更新，也可以更新本頁面。