======================================================
注：本文源代碼點(diǎn)此下載
======================================================

以前做項(xiàng)目,很少去關(guān)注原理這東西,只要能在最短的時(shí)間能把功能完成了就行,或許是時(shí)間問題把,趁這陣子有時(shí)間,可以好好整理下之前的東西了,哈哈;

ajax的核心是javascript對(duì)象xmlhttprequest。該對(duì)象在internet explorer

5中首次引入,它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之,xmlhttprequest使您可以使用javascript向服務(wù)器提出請(qǐng)求并處理響應(yīng),而不阻塞用戶。

在創(chuàng)建web站點(diǎn)時(shí),在客戶端執(zhí)行屏幕更新為用戶提供了很大的靈活性。下面是使用ajax可以完成的功能:

動(dòng)態(tài)更新購(gòu)物車的物品總數(shù),無(wú)需用戶單擊update并等待服務(wù)器重新發(fā)送整個(gè)頁(yè)面。

提升站點(diǎn)的性能,這是通過減少?gòu)姆?wù)器下載的數(shù)據(jù)量而實(shí)現(xiàn)的。例如,在某購(gòu)物車頁(yè)面,當(dāng)更新籃子中的一項(xiàng)物品的數(shù)量時(shí),會(huì)重新載入整個(gè)頁(yè)面,這必須下載整個(gè)頁(yè)面的數(shù)據(jù)。如果使用ajax計(jì)算新的總量,服務(wù)器只會(huì)返回新的總量值,因此所需的帶寬僅為原來的百分之一。

消除了每次用戶輸入時(shí)的頁(yè)面刷新。例如,在ajax中,如果用戶在分頁(yè)列表上單擊next,則服務(wù)器數(shù)據(jù)只刷新列表而不是整個(gè)頁(yè)面。

直接編輯表格數(shù)據(jù),而不是要求用戶導(dǎo)航到新的頁(yè)面來編輯數(shù)據(jù)。對(duì)于ajax,當(dāng)用戶單擊edit時(shí),可以將靜態(tài)表格刷新為內(nèi)容可編輯的表格。用戶單擊done之后,就可以發(fā)出一個(gè)ajax請(qǐng)求來更新服務(wù)器,并刷新表格,使其包含靜態(tài)、只讀的數(shù)據(jù)。

一切皆有可能!但愿它能夠激發(fā)您開始開發(fā)自己的基于ajax的站點(diǎn)。然而,在開始之前,讓我們介紹一個(gè)現(xiàn)有的web站點(diǎn),它遵循傳統(tǒng)的提交/等待/重新顯示的范例,我們還將討論ajax如何提升用戶體驗(yàn)。

ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層,使用戶操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端,利于客戶端閑置的處理能力來處理,減輕服務(wù)器和帶寬的負(fù)擔(dān),從而達(dá)到節(jié)約isp的空間及帶寬租用成本的目的。

我們以兩個(gè)驗(yàn)證通行證帳號(hào)是否存在的例子來講述ajax在實(shí)際中的應(yīng)用:

(1)用文本字符串的方式返回服務(wù)器的響應(yīng)來驗(yàn)證網(wǎng)易通行證帳號(hào)是否存在;

(2)以xmldocument對(duì)象方式返回響應(yīng)來驗(yàn)證金山通行證帳號(hào)是否存在;

首先,我們需要用javascript來創(chuàng)建xmlhttprequest 類向服務(wù)器發(fā)送一個(gè)http請(qǐng)求, xmlhttprequest

類首先由internet explorer以activex對(duì)象引入,被稱為xmlhttp。 后來mozilla﹑netscape﹑safari

和其他瀏覽器也提供了xmlhttprequest類,不過它們創(chuàng)建xmlhttprequest類的方法不同。

對(duì)于internet explorer瀏覽器,創(chuàng)建xmlhttprequest 方法如下:

xmlhttp_request = new activexobject("msxml2.xmlhttp.3.0"); //3.0或4.0, 5.0

xmlhttp_request = new activexobject("msxml2.xmlhttp"); xmlhttp_request = new

activexobject("microsoft.xmlhttp");

由于在不同internet explorer瀏覽器中xmlhttp版本可能不一致,為了更好的兼容不同版本的internet

explorer瀏覽器,因此我們需要根據(jù)不同版本的internet

explorer瀏覽器來創(chuàng)建xmlhttprequest類,上面代碼就是根據(jù)不同的internet

explorer瀏覽器創(chuàng)建xmlhttprequest類的方法。

對(duì)于mozilla﹑netscape﹑safari等瀏覽器,創(chuàng)建xmlhttprequest 方法如下:xmlhttp_request = new

xmlhttprequest();

如果服務(wù)器的響應(yīng)沒有xml mime-type header,某些mozilla瀏覽器可能無(wú)法正常工作。

為了解決這個(gè)問題,如果服務(wù)器響應(yīng)的header不是text/xml,可以調(diào)用其它方法修改該header。

xmlhttp_request = new xmlhttprequest();

xmlhttp_request.overridemimetype('text/xml');

在實(shí)際應(yīng)用中,為了兼容多種不同版本的瀏覽器,一般將創(chuàng)建xmlhttprequest類的方法寫成如下形式:

try{ if( window.activexobject ){ for( var i = 5; i; i-- ){ try{ if( i == 2 ){

xmlhttp_request = new activexobject( "microsoft.xmlhttp" ); }else{

xmlhttp_request = new activexobject( "msxml2.xmlhttp." + i + ".0" ); }

xmlhttp_request.setrequestheader("content-type","text/xml");

xmlhttp_request.setrequestheader("content-type","gb2312"); break;} catch(e){

xmlhttp_request = false; } } }else if( window.xmlhttprequest ){ xmlhttp_request

= new xmlhttprequest(); if (xmlhttp_request.overridemimetype) {

xmlhttp_request.overridemimetype('text/xml'); } } }catch(e){ xmlhttp_request =

false; }

在定義了如何處理響應(yīng)后,就要發(fā)送請(qǐng)求了。可以調(diào)用http請(qǐng)求類的open()和send()方法,如下所示:

xmlhttp_request.open('get', url, true); xmlhttp_request.send(null);

open()的第一個(gè)參數(shù)是http請(qǐng)求方式—get,post或任何服務(wù)器所支持的您想調(diào)用的方式。

按照http規(guī)范,該參數(shù)要大寫;否則,某些瀏覽器(如firefox)可能無(wú)法處理請(qǐng)求。

第二個(gè)參數(shù)是請(qǐng)求頁(yè)面的url。

第三個(gè)參數(shù)設(shè)置請(qǐng)求是否為異步模式。如果是true,javascript函數(shù)將繼續(xù)執(zhí)行,而不等待服務(wù)器響應(yīng)。這就是"ajax"中的"a"。

用javascript來創(chuàng)建xmlhttprequest

類向服務(wù)器發(fā)送一個(gè)http請(qǐng)求后,接下來要決定當(dāng)收到服務(wù)器的響應(yīng)后,需要做什么。這需要告訴http請(qǐng)求對(duì)象用哪一個(gè)javascript函數(shù)處理這個(gè)響應(yīng)。可以將對(duì)象的onreadystatechange屬性設(shè)置為要使用的javascript的函數(shù)名,如下所示:xmlhttp_request.onreadystatechange

=functionname;

functionname是用javascript創(chuàng)建的函數(shù)名,注意不要寫成functionname(),當(dāng)然我們也可以直接將javascript代碼創(chuàng)建在onreadystatechange之后,例如:xmlhttp_request.onreadystatechange

= function(){

// javascript代碼段

};

在這個(gè)函數(shù)中。首先要檢查請(qǐng)求的狀態(tài)。只有當(dāng)一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了,函數(shù)才可以處理該響應(yīng)。xmlhttprequest

提供了readystate屬性來對(duì)服務(wù)器響應(yīng)進(jìn)行判斷。

readystate的取值如下:

0 (未初始化)

1 (正在裝載)

2 (裝載完畢)

3 (交互中)

4 (完成)

所以只有當(dāng)readystate=4時(shí),一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了,函數(shù)才可以處理該響應(yīng)。具體代碼如下:

if (http_request.readystate == 4) { // 收到完整的服務(wù)器響應(yīng) } else { // 沒有收到完整的服務(wù)器響應(yīng)

}當(dāng)readystate=4時(shí),一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了,接著,函數(shù)會(huì)檢查http服務(wù)器響應(yīng)的狀態(tài)值。完整的狀態(tài)取值可參見w3c文檔。當(dāng)http服務(wù)器響應(yīng)的值為200時(shí),表示狀態(tài)正常。

在檢查完請(qǐng)求的狀態(tài)值和響應(yīng)的http狀態(tài)值后,就可以處理從服務(wù)器得到的數(shù)據(jù)了。有兩種方式可以得到這些數(shù)據(jù):(1)

以文本字符串的方式返回服務(wù)器的響應(yīng)

(2) 以xmldocument對(duì)象方式返回響應(yīng)

實(shí)例一: 用文本字符串的方式返回服務(wù)器的響應(yīng)來驗(yàn)證網(wǎng)易通行證帳號(hào)是否存在

首先,我們登陸網(wǎng)易通行證注冊(cè)頁(yè)面,可以看到檢測(cè)用戶名是否存在是將用戶名提交給checkssn.jsp頁(yè)面進(jìn)行判斷,格式為:

reg.163.com/register/checkssn.jsp?username=用戶名

根據(jù)上面講到的方法,我們可以利用ajax技術(shù)對(duì)網(wǎng)易通行證用戶名進(jìn)行檢測(cè):

第一步:新建一個(gè)基于xhtml標(biāo)準(zhǔn)的網(wǎng)頁(yè),在區(qū)域插入javascript函數(shù)如下:

function getxmlrequester( )

{ var xmlhttp_request = false; try

{ if( window.activexobject )

{ for( var i = 5; i; i-- ){ try{ if( i == 2 )

{ xmlhttp_request = new activexobject( "microsoft.xmlhttp" ); }

else

{ xmlhttp_request = new activexobject

( "msxml2.xmlhttp." + i + ".0" );

xmlhttp_request.setrequestheader

("content-type","text/xml");

xmlhttp_request.setrequestheader("content-type","gb2312"); }

break;}

catch(e){ xmlhttp_request = false; } } }

else if( window.xmlhttprequest )

{ xmlhttp_request = new xmlhttprequest();

if (xmlhttp_request.overridemimetype)

{ xmlhttp_request.overridemimetype('text/xml'); } } }

catch(e){ xmlhttp_request = false; }

return xmlhttp_request ; }

function idrequest(n)

{//定義收到服務(wù)器的響應(yīng)后需要執(zhí)行的javascript函數(shù)

url=n+document.getelementbyid('163id').value;

//定義網(wǎng)址參數(shù) xmlhttp_request=getxmlrequester();

//調(diào)用創(chuàng)建xmlhttprequest的函數(shù) xmlhttp_request.onreadystatechange = docontents;

//調(diào)用docontents函數(shù) xmlhttp_request.open('get', url, true);

xmlhttp_request.send(null); } function docontents()

{ if (xmlhttp_request.readystate == 4)

{// 收到完整的服務(wù)器響應(yīng) if (xmlhttp_request.status == 200) {

//http服務(wù)器響應(yīng)的值ok document.getelementbyid('message').innerhtml =

xmlhttp_request.responsetext;

//將服務(wù)器返回的字符串寫到頁(yè)面中id為message的區(qū)域 }

else { alert(http_request.status); } } }

在區(qū)域建立一個(gè)文本框,id為163id

再建一個(gè)id為messsge的空白區(qū)域用來顯示返回字符串(也可以通過javascript函數(shù)截取一部分字符串顯示):

這樣,一個(gè)基于ajax技術(shù)的用戶名檢測(cè)頁(yè)面就做好了,不過這個(gè)頁(yè)面將返回服務(wù)器響應(yīng)生成頁(yè)面的所有字符串,當(dāng)然還可以對(duì)返回的字符串進(jìn)行一些操作,便于應(yīng)用到不同的需要當(dāng)中。

實(shí)例二: 以xmldocument對(duì)象方式返回響應(yīng)來驗(yàn)證金山通行證帳號(hào)是否存在

在上面的例子中,當(dāng)服務(wù)器對(duì)http請(qǐng)求的響應(yīng)被收到后,我們會(huì)調(diào)用請(qǐng)求對(duì)象的reponsetext屬性。該屬性包含了服務(wù)器返回響應(yīng)文件的內(nèi)容。現(xiàn)在我們以xmldocument對(duì)象方式返回響應(yīng),此時(shí)將不再需要reponsetext屬性而使用responsexml屬性。

首先登陸金山通行證注冊(cè)頁(yè)面,我們發(fā)現(xiàn)金山通行證用戶名的檢測(cè)方式為:

pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶名,并且返回xml數(shù)據(jù):

isexisteduid -2

當(dāng)result值為-1時(shí)表示此用戶名已被注冊(cè),當(dāng)result值為-2時(shí)表示此用戶名尚未注冊(cè),因此通過對(duì)result值的判斷可以知道用戶名是否被注冊(cè)。

對(duì)上例代碼進(jìn)行修改:

首先找到

document.getelementbyid('message').innerhtml =

xmlhttp_request.responsetext;

改為:

var response = xmlhttp_request.responsexml.documentelement;

var result =

response.getelementsbytagname('result')[0].firstchild.data;//返回result節(jié)點(diǎn)數(shù)據(jù)

if(result ==-2){

document.getelementbyid('message').innerhtml =

"用戶名"+document.getelementbyid('163id').value+"尚未注冊(cè)";}

else if(result ==-1){

document.getelementbyid('message').innerhtml =

"對(duì)不起,用戶名"+document.getelementbyid('163id').value+"已經(jīng)注冊(cè)";}

通過以上兩個(gè)實(shí)例說明了ajax的客戶端基礎(chǔ)應(yīng)用,采用的是網(wǎng)易和金山現(xiàn)成的服務(wù)器端程序,當(dāng)然為了開發(fā)合適自己頁(yè)面的程序,還需要對(duì)自己編寫服務(wù)器端程序,這設(shè)計(jì)到程序語(yǔ)言及數(shù)據(jù)庫(kù)的操作,對(duì)于有一定程序基礎(chǔ)的讀者一定不是很難的事情。

更多詳情:http://hi.baidu.com/tang818/blog/item/b201e36e78b214d880cb4a29.html

======================================================
在最后，我邀請(qǐng)大家參加新浪APP，就是新浪免費(fèi)送大家的一個(gè)空間，支持PHP+MySql，免費(fèi)二級(jí)域名，免費(fèi)域名綁定 這個(gè)是我邀請(qǐng)的地址，您通過這個(gè)鏈接注冊(cè)即為我的好友，并獲贈(zèng)云豆500個(gè)，價(jià)值5元哦！短網(wǎng)址是http://t.cn/SXOiLh我創(chuàng)建的小站每天訪客已經(jīng)達(dá)到2000+了，每天掛廣告賺50+元哦，呵呵，飯錢不愁了，\(^o^)/

總結(jié)

以上是生活随笔為你收集整理的AJAX 工作原理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。