這個是用於顯示主體的ajax.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
" http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AJAX網頁開發執行個體</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){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>
</head>
<body>
<h1>AJAX網頁開發執行個體</h1>
<p>看看下面的例子，你也許就會懂得資料是怎麼樣完成無重新整理的了。</p>
<p id="xmlObj" style="border:1px dashed #ccc;padding:10px;">
這是一些簡單的資料。<a href="data.xml" title="調取XML資料。 " onclick="ajaxRead('data.xml'); this.style.display='none'; return false">調取XML資料。 </a>
</p>
<p><a href=" http://www.b3inside.com">返回Blog</a></p>
</body>
</html>
下面是包含資料的data.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<data>
這裡是XML中的資料。
</data>
</root>
注意我們現在串連data.xml並沒有使用javascript,要使用javascript，執行ajaxRead函數，串連是隱藏的，並且此串連並沒有重新導向到data.xml檔案。函數ajaxRead還沒有定義，所以當你測試時，會得到一個JS錯誤。所以我們在開始的<head>中定義了函數：
<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){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>
解釋下，函數ajaxRead將在點擊View XML data串連的時候執行，在函數裡，我們定義了一個xmlObj的變數，它就負責用戶端和伺服器端中轉。我們定義一個if/else迴圈塊：
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
這隻是測試不同對象的可用性——不同的瀏覽器執行XMLHttpRequest對象的時候不同，所以我們定義“xmlObj”作為XMLHttpRequest對象的時候，我們必須區別對待。如果沒有XMLHttpRequest可用，函數以return結束來取消錯誤報表。大部分時候，XMLHttpRequest都是可用的，不過排除一些太老的瀏覽器。
下面的部分：
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
每當XMLHttpRequest狀態改變時，onreadystatechange事件就觸發，此事件共有5個狀態，從0到4。
[0]uninitialized未初始化(在XMLHttpRequest開始前)
[1]loading(一旦初始化)
[2]loaded(一旦XMLHttpRequest從伺服器端獲得響應)
[3]interactive(當對象串連到伺服器)
[4]complete(完成)
狀態5[編號是4]是用來確認資料是否可用的，正好用來給xmlObj.readyState用，如果“是”，我們執行updateObj函數，此函數有2個參數：ID以及填充的資料，它的方法以後說明。
