Terry.Li-彬

Ajax基本原理

摘要：本文介紹了Ajax的基本原理，交互過程和與之相關(guān)的技術(shù)及簡(jiǎn)單的實(shí)現(xiàn)方法，在此基礎(chǔ)上給出了一個(gè)完整的實(shí)例，以使得能夠?qū)?/span>Ajax有一個(gè)更清楚的理解。

關(guān)鍵字：Ajax，JavaScript，DOM，無刷新頁面，不完全刷新

引言

計(jì)算機(jī)桌面應(yīng)用使我們得以用以前不能想象的方式處理大量的復(fù)雜數(shù)據(jù)；基于計(jì)算機(jī)網(wǎng)絡(luò)的C/S模式應(yīng)用使得共享數(shù)據(jù)和資源成為現(xiàn)實(shí)。然而，正如C/S模式的應(yīng)用是由于人們不滿足單機(jī)的桌面應(yīng)用一樣，人們對(duì)C/S模式也心存抱怨了：C/S模式除了帶給我們數(shù)據(jù)和資源共享的便利之外，也給我們帶來了令我們（程序開發(fā)設(shè)計(jì)人員）和客戶頭疼的部署和發(fā)布問題。于是，B/S模式應(yīng)用應(yīng)運(yùn)而生，而且得到了迅速的發(fā)展。B/S模式應(yīng)用符合一定規(guī)范的瀏覽器作為通用客戶端，從而解決了C/S模式中最令人頭疼的部署和發(fā)布問題。但是，到此并沒有結(jié)束，B/S雖然解決了應(yīng)用的部署和發(fā)布問題，卻因?yàn)榉N種限制，使得應(yīng)用沒有了以前豐富的交互，并且每次與服務(wù)器的交互都要完全刷新頁面，這是非常糟糕和令人不快的。本文討論了如何解決頁面完全刷新和缺乏交互性的問題，我們用的方法就是――Ajax。

Ajax

       那么，Ajax到底是什么呢？Ajax（Asynchronous JavaScript + XML），即異步JavaScript + XML的縮寫，這只是最初的觀點(diǎn)，最初由Jesse James Garrett創(chuàng)造出來的。但是，Ajax現(xiàn)在的覆蓋面已經(jīng)有了進(jìn)一步的擴(kuò)展，把允許瀏覽器與服務(wù)器通信而無需刷新當(dāng)前頁面的技術(shù)都涵蓋在其中了。

       坦率的講，Ajax并不是什么新鮮玩藝。也就是說，Ajax并不是一種全新的技術(shù)，而更像一種技巧，是把過去的幾種技術(shù)巧妙結(jié)合的技巧。真正與Ajax相關(guān)的新名詞應(yīng)該是XMLHttpRequest――一個(gè)最早在IE 5中出現(xiàn)，最近開始在多數(shù)瀏覽器得到支持的用來實(shí)現(xiàn)異步通信的對(duì)象。正如前面所說，B/S模式是利用瀏覽器作為其通用的客戶端，所以要想異步通訊成為可能，必須要得到瀏覽器的支持。如果不是有了瀏覽器對(duì)XMLHttpRequest對(duì)象的廣泛支持，我們可能不會(huì)看到Ajax的今天，更不會(huì)看到許多對(duì)Ajax的著名應(yīng)用，如Google Map，Google Suggest，Ta-da List等。

       Ajax的處理過程是怎樣的呢？下圖為Ajax應(yīng)用的標(biāo)準(zhǔn)處理模式。

數(shù)據(jù)庫

XHR

事件

Function callback() {//……}

服務(wù)器資源

1

2

6

3

5

4

圖 1 標(biāo)準(zhǔn)Ajax處理過程

從圖中我們可以看出：由事件觸發(fā)，創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，把HTTP方法（Get/Post）和目標(biāo)URL以及請(qǐng)求返回后的回調(diào)函數(shù)設(shè)置到XMLHttpRequest對(duì)象，通過XMLHttpRequest向服務(wù)器發(fā)送請(qǐng)求，請(qǐng)求發(fā)送后繼續(xù)響應(yīng)用戶的界面交互，只有等到請(qǐng)求真正從服務(wù)器返回的時(shí)候才調(diào)用callback()函數(shù)，對(duì)響應(yīng)數(shù)據(jù)進(jìn)行處理。

在這個(gè)交互過程中，涉及到幾種我們不得不提的技術(shù)：

1． XHTML和CSS――用來使表現(xiàn)標(biāo)準(zhǔn)化；

2．DOM――動(dòng)態(tài)的修改文檔的內(nèi)容和結(jié)構(gòu)；

3．XML――進(jìn)行數(shù)據(jù)的交換和處理；

4．JavaScript――對(duì)上述幾種技術(shù)進(jìn)行綁定，使其成為協(xié)同工作的整體。

Ajax相關(guān)技術(shù)及基本原理

1．XMLHttpRequest簡(jiǎn)介

XMLHttpRequest，是我們得以實(shí)現(xiàn)異步通訊的根本。最早在IE 5 中以ActiveX組件實(shí)現(xiàn)；最近，Mozilla 1.0和Safari 1.2中實(shí)現(xiàn)為本地對(duì)象。XMLHttpRequest雖然不是W3C標(biāo)準(zhǔn)，但卻得到了FireFox、Safari、Opera、Konqueror、IE等絕大多數(shù)瀏覽器的支持。這就使得Ajax有了今天如火如荼的發(fā)展。

用XMLHttpRequest進(jìn)行異步通訊，首先必須用JavaScript創(chuàng)建一個(gè)XMLHttpRequest對(duì)象實(shí)例。創(chuàng)建XMLHttpRequest對(duì)象實(shí)例的代碼清單如下所示：

var xmlHttp;

function createXMLHttpRequest(){

    if(window.ActiveXObject){

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

    }

    else if(window.XMLHttpRequest){

        xmlHttp = new XMLHttpRequest();

    }

}

可以看出，創(chuàng)建XMLHttpRequest對(duì)象相當(dāng)容易。首先，聲明一個(gè)全局變量xmlHttp用來保存即將創(chuàng)建的XMLHttpRequest對(duì)象的引用；然后，在createXMLHttpRequest()方法中完成具體創(chuàng)建工作。因?yàn)镮E與其他瀏覽器對(duì)XMLHttpRequest 對(duì)象的實(shí)現(xiàn)方法不同，因此在創(chuàng)建時(shí)，通過一個(gè)分支語句進(jìn)行判斷。如果window.ActiveXObject調(diào)用返回true，則證明為IE瀏覽器，那么就通過傳遞“Microsoft.XMLHTTP”給ActiveXObject()來創(chuàng)建XMLHttpRequest對(duì)象，否則就把XMLHttpRequest實(shí)現(xiàn)為本地JavaScript對(duì)象。XMLHttpRequest對(duì)象在不同瀏覽器上的實(shí)現(xiàn)是兼容的，所以可以用同樣的方法訪問XMLHttpRequest的方法和屬性。

表 1 標(biāo)準(zhǔn)XMLHttpRequest方法

表 2 標(biāo)準(zhǔn)XMLHttpRequest屬性

2．利用XMLHttpRequest對(duì)象發(fā)送簡(jiǎn)單請(qǐng)求

創(chuàng)建了XMLHttpRequest對(duì)象，并了解了XMLHttpRequest對(duì)象的方法和屬性之后，讓我們來看看怎樣利用XMLHttpRequest對(duì)象發(fā)送簡(jiǎn)單的請(qǐng)求。利用XMLHttpRequest對(duì)象發(fā)送簡(jiǎn)單請(qǐng)求的基本步驟如下：

1） 創(chuàng)建XMLHttpRequest對(duì)象實(shí)例。

2） 設(shè)定XMLHttpRequest對(duì)象的回調(diào)函數(shù)，利用onreadystatechange屬性。

3） 設(shè)定請(qǐng)求屬性：設(shè)定HTTP方法（GET或POST）；設(shè)定目標(biāo)URL。利用open()方法。

4） 將請(qǐng)求發(fā)送給服務(wù)器。利用send()方法。

3．利用DOM對(duì)服務(wù)器響應(yīng)進(jìn)行處理

前面已經(jīng)設(shè)置了回調(diào)函數(shù)，回調(diào)函數(shù)正是用來處理服務(wù)器響應(yīng)信息的。但是，別忘了我們的最終目的：解決頁面完全刷新和缺乏交互性的問題。在服務(wù)器對(duì)我們的請(qǐng)求信息作出響應(yīng)后，我們就得實(shí)現(xiàn)頁面的無縫更新（就是無閃爍的更新信息）。要實(shí)現(xiàn)這一點(diǎn)，那么就不得不提到DOM了。

DOM（Document Object Model）,文檔對(duì)象模型，是以面向?qū)ο蠓绞矫枋鲰撁嫖臋n的對(duì)象模型。DOM中定義了，與平臺(tái)和語言無關(guān)的，用來表示和修改文檔所需的對(duì)象、以及這些對(duì)象的屬性和方法。通過DOM，我們可以把頁面上的數(shù)據(jù)和結(jié)構(gòu)抽象成一個(gè)樹型表示，進(jìn)而可以通過DOM中定義的屬性和方法對(duì)文檔進(jìn)行操作，如遍歷、編輯等。

這樣，服務(wù)器相應(yīng)信息就可以通過DOM的方法和屬性，動(dòng)態(tài)的更新到頁面的相應(yīng)節(jié)點(diǎn)。

從而使用戶感覺不到刷新過程的存在，提高了交互性。

4．一個(gè)完整的例子

在這里我們給出一個(gè)完整的利用Ajax的實(shí)例。實(shí)例包含兩個(gè)文件：Request.htm和Response.xml。通過Request.htm向服務(wù)器發(fā)送請(qǐng)求，而Response.xml模仿了從服務(wù)器返回的響應(yīng)。兩個(gè)文件清單如下：

<!--Request.htm----------------------------------------------------------->

<html>

    <head>

        <title>Ajax應(yīng)用實(shí)例</title>

        <script type="text/javaScript">

            var xmlHttp;

var requestType="";

function createXMLHttpRequest(){

    if(window.ActiveXObject){

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

    }

    else if(window.XMLHttpRequest){

        xmlHttp = new XMLHttpRequest();

    }

}

function startRequest(theRequestType){

requestType = theRequestType;

    createXMLHttpRequest();

    xmlHttp.onreadystatechange = handleStateChange;

    xmlHttp.open("GET","Response.xml",true);

    xmlHttp.send(null);

}

function myCallback(){

    if(xmlHttp.readyState==4){

        if(xmlHttp.status==200){

            if(requestType=="all")

                listAll();

            else if(requestType=="north")

                listNorth();

        }

    }

}

function listAll(){

    var xmlDoc = xmlHttp.responseXML;

    var allProvs = xmlDoc.getElementsByTagName("prov");

    outputList("all",allProvs);

}

function listNorth(){

    var xmlDoc = xmlHttp.responseXML;

    var north = xmlDoc.getElementsByTagName("north")[0];

    var northProvs = north.getElementsByTagname("prov");

    outputList("north",northProvs);

}

function outputList(title,provs){

    var out=title;

    var currentProv = null;

    for(var i=0;i<provs.length;i++){

    currentProv = provs[i];

    out = out + “<br/>” + currentProv.childNodes[0].nodeValue;

    }

    document.getElementById(title).innerHTML = out;

}

        </script>

    </head>

    <body>

        <h1> Ajax應(yīng)用實(shí)例</h1>

        <form action="#">

<input type="button" value="列出所有沿海省市"

conclick="startRequest('all');"/>

<div id="all"></div>

<input type="button" value="列出江北沿海省市"

        conclick="startRequest('north');"/>

<div id="north"></div>

        </form>

    </body>

</html>

<!--Response.xml---------------------------------------------------------->

<?xml version="1.0"encoding="utf-8" ?>

<provs>

    <north>

            <prov>遼寧</prov><prov>河北</prov><prov>天津</prov>

<prov>山東</prov><prov>江蘇</prov>

    </north>

    <south>

            <prov>浙江</prov><prov>福建</prov><prov>廣東</prov>

<prov>廣西</prov><prov>海南</prov><prov>上海</prov>

<prov>臺(tái)灣</prov><prov>香港</prov><prov>澳門</prov>

    </south>

</provs>

小結(jié)

       我們已經(jīng)了解了Ajax的基本原理和相關(guān)的技術(shù)。其實(shí)，Ajax就是通過JavaScript創(chuàng)建XMLHttpRequest對(duì)象，再由JavaScript調(diào)用XMLHttpRequest對(duì)象的方法完成異步通信；然后，再由JavaScript通過DOM的屬性和方法，完成頁面的不完全刷新。

參考文獻(xiàn)

1．Ryan Asleson , Nathaniel T.Schutta 著金靈等譯《Ajax基礎(chǔ)教程 人民郵電出版社

2．張曉龍 基于Ajax的web應(yīng)用 《電腦開發(fā)與應(yīng)用》第19卷第8期 17～18頁

3．史勝輝 Ajax技術(shù)在WEB客戶端開發(fā)中的應(yīng)用 《中國管理信息化》2006年6月第9卷第6期  88～90頁