您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 2.3 使用Ajax完成數(shù)據(jù)傳輸

2.3 使用Ajax完成數(shù)據(jù)傳輸

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：347 更新時(shí)間：2009-09-13 10:21 參與評(píng)論

準(zhǔn)備工作很漫長(zhǎng)，也很棘手，其實(shí)上面所介紹的操作都是本書(shū)將要深入講解和剖析的重要知識(shí)點(diǎn)?，F(xiàn)在把它們都提前拿過(guò)來(lái)，有點(diǎn)難為人了。當(dāng)然，如果不明白、不理解也是情理之中的事情，你也不要因此而產(chǎn)生畏難的情緒，后面會(huì)有更詳細(xì)的講解幫助你消化掉這些冰冷的知識(shí)。

下面的工作將從后臺(tái)編程轉(zhuǎn)移到前臺(tái)腳本中，請(qǐng)你打開(kāi)index.html頁(yè)面。切換到【代碼】視圖，在頭部區(qū)域輸入下面代碼：

var xmlHttp;

function createXMLHttpRequest(){

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

else if (window.ActiveXObject) {

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

</script>

有點(diǎn)面熟吧，這正是第2.1.2節(jié)中創(chuàng)建XMLHttpRequest對(duì)象實(shí)例的源代碼，我們把它封裝在一個(gè)函數(shù)中，這樣可以在其他代碼位置隨時(shí)調(diào)用。不明白的讀者可以返回看一下，這里就不再費(fèi)口舌了。

然后在其下面再定義一個(gè)事情驅(qū)動(dòng)函數(shù)：

function handleStateChange(){

if(xmlHttp.readyState == 4){

if (xmlHttp.status == 200 || xmlHttp.status == 0){

document.all.message.innerHTML=xmlHttp.responseText;

}

上面代碼先判斷當(dāng)前響應(yīng)是否結(jié)束，如果結(jié)束則讀取響應(yīng)信息，并賦值給頁(yè)面中ID為message的元素。你可以參閱第2.1.6節(jié)了解為什么要這樣編寫(xiě)。

最后在編寫(xiě)一個(gè)開(kāi)始請(qǐng)求的函數(shù)，代碼如下：

function startRequest(url){

createXMLHttpRequest();

try{

xmlHttp.onreadystatechange = handleStateChange;

xmlHttp.open("GET", url, false);

xmlHttp.send(null);

}catch(exception){

alert("您要訪問(wèn)的資源不存在!");

}

</script>

上面函數(shù)以GET方法向指定文件發(fā)出請(qǐng)求并接收響應(yīng)的數(shù)據(jù)（詳細(xì)講解可以參閱第2.1.4節(jié)內(nèi)容）。然后在HTML結(jié)構(gòu)代碼中輸入一個(gè)包含空值的div元素，設(shè)置該元素的ID值為message：

</div>

</div>

</div>

最后，在<body>標(biāo)簽中調(diào)用startRequest(url)函數(shù)即可：

好啦，整個(gè)示例的功能基本完成，你不妨試驗(yàn)一下，在留言板中輸入簡(jiǎn)單的留言并提交之后，返回即可看到自己的留言，感覺(jué)不錯(cuò)吧（如圖2-16所示）。