我們還是從我們上一篇文章的代碼(喏,就在上面)開始我們的學習,你可以去閱讀它來作為參考。
這裡就是這個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="#" >查看演示</a>.</p>
<div id="dataArea"></div>
</body>
</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已經更新,也可以更新本頁面。