======================================================
注：本文源代碼點此下載
======================================================

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

ajax的核心是javascript對象xmlhttprequest。該對象在internet explorer

5中首次引入,它是一種支持異步請求的技術。簡而言之,xmlhttprequest使您可以使用javascript向服務器提出請求并處理響應,而不阻塞用戶。

在創建web站點時,在客戶端執行屏幕更新為用戶提供了很大的靈活性。下面是使用ajax可以完成的功能:

動態更新購物車的物品總數,無需用戶單擊update并等待服務器重新發送整個頁面。

提升站點的性能,這是通過減少從服務器下載的數據量而實現的。例如,在某購物車頁面,當更新籃子中的一項物品的數量時,會重新載入整個頁面,這必須下載整個頁面的數據。如果使用ajax計算新的總量,服務器只會返回新的總量值,因此所需的帶寬僅為原來的百分之一。

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

直接編輯表格數據,而不是要求用戶導航到新的頁面來編輯數據。對于ajax,當用戶單擊edit時,可以將靜態表格刷新為內容可編輯的表格。用戶單擊done之后,就可以發出一個ajax請求來更新服務器,并刷新表格,使其包含靜態、只讀的數據。

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

ajax的工作原理相當于在用戶和服務器之間加了—個中間層,使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端,利于客戶端閑置的處理能力來處理,減輕服務器和帶寬的負擔,從而達到節約isp的空間及帶寬租用成本的目的。

我們以兩個驗證通行證帳號是否存在的例子來講述ajax在實際中的應用:

(1)用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在;

(2)以xmldocument對象方式返回響應來驗證金山通行證帳號是否存在;

首先,我們需要用javascript來創建xmlhttprequest 類向服務器發送一個http請求, xmlhttprequest

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

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

對于internet explorer瀏覽器,創建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瀏覽器,因此我們需要根據不同版本的internet

explorer瀏覽器來創建xmlhttprequest類,上面代碼就是根據不同的internet

explorer瀏覽器創建xmlhttprequest類的方法。

對于mozilla﹑netscape﹑safari等瀏覽器,創建xmlhttprequest 方法如下:xmlhttp_request = new

xmlhttprequest();

如果服務器的響應沒有xml mime-type header,某些mozilla瀏覽器可能無法正常工作。

為了解決這個問題,如果服務器響應的header不是text/xml,可以調用其它方法修改該header。

xmlhttp_request = new xmlhttprequest();

xmlhttp_request.overridemimetype('text/xml');

在實際應用中,為了兼容多種不同版本的瀏覽器,一般將創建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; }

在定義了如何處理響應后,就要發送請求了。可以調用http請求類的open()和send()方法,如下所示:

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

open()的第一個參數是http請求方式—get,post或任何服務器所支持的您想調用的方式。

按照http規范,該參數要大寫;否則,某些瀏覽器(如firefox)可能無法處理請求。

第二個參數是請求頁面的url。

第三個參數設置請求是否為異步模式。如果是true,javascript函數將繼續執行,而不等待服務器響應。這就是"ajax"中的"a"。

用javascript來創建xmlhttprequest

類向服務器發送一個http請求后,接下來要決定當收到服務器的響應后,需要做什么。這需要告訴http請求對象用哪一個javascript函數處理這個響應。可以將對象的onreadystatechange屬性設置為要使用的javascript的函數名,如下所示:xmlhttp_request.onreadystatechange

=functionname;

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

= function(){

// javascript代碼段

};

在這個函數中。首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了,函數才可以處理該響應。xmlhttprequest

提供了readystate屬性來對服務器響應進行判斷。

readystate的取值如下:

0 (未初始化)

1 (正在裝載)

2 (裝載完畢)

3 (交互中)

4 (完成)

所以只有當readystate=4時,一個完整的服務器響應已經收到了,函數才可以處理該響應。具體代碼如下:

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

}當readystate=4時,一個完整的服務器響應已經收到了,接著,函數會檢查http服務器響應的狀態值。完整的狀態取值可參見w3c文檔。當http服務器響應的值為200時,表示狀態正常。

在檢查完請求的狀態值和響應的http狀態值后,就可以處理從服務器得到的數據了。有兩種方式可以得到這些數據:(1)

以文本字符串的方式返回服務器的響應

(2) 以xmldocument對象方式返回響應

實例一: 用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在

首先,我們登陸網易通行證注冊頁面,可以看到檢測用戶名是否存在是將用戶名提交給checkssn.jsp頁面進行判斷,格式為:

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

根據上面講到的方法,我們可以利用ajax技術對網易通行證用戶名進行檢測:

第一步:新建一個基于xhtml標準的網頁,在區域插入javascript函數如下:

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)

{//定義收到服務器的響應后需要執行的javascript函數

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

//定義網址參數 xmlhttp_request=getxmlrequester();

//調用創建xmlhttprequest的函數 xmlhttp_request.onreadystatechange = docontents;

//調用docontents函數 xmlhttp_request.open('get', url, true);

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

{ if (xmlhttp_request.readystate == 4)

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

//http服務器響應的值ok document.getelementbyid('message').innerhtml =

xmlhttp_request.responsetext;

//將服務器返回的字符串寫到頁面中id為message的區域 }

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

在區域建立一個文本框,id為163id

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

這樣,一個基于ajax技術的用戶名檢測頁面就做好了,不過這個頁面將返回服務器響應生成頁面的所有字符串,當然還可以對返回的字符串進行一些操作,便于應用到不同的需要當中。

實例二: 以xmldocument對象方式返回響應來驗證金山通行證帳號是否存在

在上面的例子中,當服務器對http請求的響應被收到后,我們會調用請求對象的reponsetext屬性。該屬性包含了服務器返回響應文件的內容。現在我們以xmldocument對象方式返回響應,此時將不再需要reponsetext屬性而使用responsexml屬性。

首先登陸金山通行證注冊頁面,我們發現金山通行證用戶名的檢測方式為:

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

isexisteduid -2

當result值為-1時表示此用戶名已被注冊,當result值為-2時表示此用戶名尚未注冊,因此通過對result值的判斷可以知道用戶名是否被注冊。

對上例代碼進行修改:

首先找到

document.getelementbyid('message').innerhtml =

xmlhttp_request.responsetext;

改為:

var response = xmlhttp_request.responsexml.documentelement;

var result =

response.getelementsbytagname('result')[0].firstchild.data;//返回result節點數據

if(result ==-2){

document.getelementbyid('message').innerhtml =

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

else if(result ==-1){

document.getelementbyid('message').innerhtml =

"對不起,用戶名"+document.getelementbyid('163id').value+"已經注冊";}

通過以上兩個實例說明了ajax的客戶端基礎應用,采用的是網易和金山現成的服務器端程序,當然為了開發合適自己頁面的程序,還需要對自己編寫服務器端程序,這設計到程序語言及數據庫的操作,對于有一定程序基礎的讀者一定不是很難的事情。

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。