一直期待著
《Ajax基礎(chǔ)教程》 的上市，走了“上海書(shū)城”、沈陽(yáng)的“大松科技書(shū)店”，看來(lái)是還沒(méi)有出來(lái)呢。在網(wǎng)上轉(zhuǎn)轉(zhuǎn)，看到這篇
Ajax教程 ，是翻譯自一篇
國(guó)外教程 ，拿下來(lái)實(shí)踐了一下，這里簡(jiǎn)潔的記錄一下，作為學(xué)習(xí)的開(kāi)端。
這個(gè)是用于顯示主體的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網(wǎng)頁(yè)開(kāi)發(fā)實(shí)例</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網(wǎng)頁(yè)開(kāi)發(fā)實(shí)例</h1>
<p>看看下面的例子，你也許就會(huì)懂得數(shù)據(jù)是怎么樣完成無(wú)刷新的了。</p>
<p id="xmlObj" style="border:1px dashed #ccc;padding:10px;">
這是一些簡(jiǎn)單的數(shù)據(jù)。<a href="data.xml" title="調(diào)取XML數(shù)據(jù)。 " onclick="ajaxRead(‘data.xml‘); this.style.display=‘none‘; return false">調(diào)取XML數(shù)據(jù)。 </a>
</p>
<p><a >返回Blog</a></p>
</body>
</html>
下面是包含數(shù)據(jù)的data.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<data>
這里是XML中的數(shù)據(jù)。
</data>
</root>
注意我們現(xiàn)在連接data.xml并沒(méi)有使用javascript,要使用javascript，執(zhí)行ajaxRead函數(shù)，連接是隱藏的，并且此連接并沒(méi)有重定向到data.xml文件。函數(shù)ajaxRead還沒(méi)有定義，所以當(dāng)你測(cè)試時(shí)，會(huì)得到一個(gè)JS錯(cuò)誤。所以我們?cè)陂_(kāi)始的<head>中定義了函數(shù)：
<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>
解釋下，函數(shù)ajaxRead將在點(diǎn)擊View XML data連接的時(shí)候執(zhí)行，在函數(shù)里，我們定義了一個(gè)xmlObj的變量，它就負(fù)責(zé)客戶(hù)端和服務(wù)器端中轉(zhuǎn)。我們定義一個(gè)if/else循環(huán)塊：
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
這只是測(cè)試不同對(duì)象的可用性——不同的瀏覽器執(zhí)行XMLHttpRequest對(duì)象的時(shí)候不同，所以我們定義“xmlObj”作為XMLHttpRequest對(duì)象的時(shí)候，我們必須區(qū)別對(duì)待。如果沒(méi)有XMLHttpRequest可用，函數(shù)以return結(jié)束來(lái)取消錯(cuò)誤報(bào)告。大部分時(shí)候，XMLHttpRequest都是可用的，不過(guò)排除一些太老的瀏覽器。
下面的部分：
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj(‘xmlObj‘, xmlObj.responseXML.getElementsByTagName(‘data‘)[0].firstChild.data);
}
}
每當(dāng)XMLHttpRequest狀態(tài)改變時(shí)，onreadystatechange事件就觸發(fā)，此事件共有5個(gè)狀態(tài)，從0到4。
[0]uninitialized未初始化(在XMLHttpRequest開(kāi)始前)
[1]loading(一旦初始化)
[2]loaded(一旦XMLHttpRequest從服務(wù)器端獲得響應(yīng))
[3]interactive(當(dāng)對(duì)象連接到服務(wù)器)
[4]complete(完成)
狀態(tài)5[編號(hào)是4]是用來(lái)確認(rèn)數(shù)據(jù)是否可用的，正好用來(lái)給xmlObj.readyState用，如果“是”，我們執(zhí)行updateObj函數(shù)，此函數(shù)有2個(gè)參數(shù)：ID以及填充的數(shù)據(jù)，它的方法以后說(shuō)明。
觀(guān)看這個(gè)例子的
Demo 
