Ajax技術文檔(1)

ajax

一、使用Ajax的主要原因

1、通過適當的Ajax應用達到更好的使用者體驗；

2、把以前的一些伺服器負擔的工作轉嫁到用戶端，利於用戶端閑置的處理能力來處理，減輕伺服器和頻寬的負擔，從而達到節約ISP的空間及頻寬租用成本的目的。

二、引用

Ajax這個概念的最早提出者Jesse James Garrett認為：

Ajax是Asynchronous JavaScript and XML的縮寫。Ajax並不是一門新的語言或技術,它實際上是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用,它包括：

使用XHTML和CSS標準化呈現;

使用DOM實現動態顯示和互動;

使用XML和XSLT進行資料交換與處理;

使用XMLHttpRequest進行非同步資料讀取;

最後用JavaScript綁定和處理所有資料;

Ajax的工作原理相當於在使用者和伺服器之間加了—個中介層,使使用者操作與伺服器響應非同步化。並不是所有的使用者請求都提交給伺服器,像—些資料驗證和資料處理等都交給Ajax引擎自己來做,只有確定需要從伺服器讀取新資料時再由Ajax引擎代為向伺服器提交請求。

圖2－1

圖2－2

三、概述

雖然Garrent列出了7條Ajax的構成技術，但個人認為，所謂的Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，如果所用資料格式為XML的話，還可以再加上XML這一項(Ajax從伺服器端返回的資料可以是XML格式，也可以是文本等其他格式)。

在舊的互動方式中,由使用者觸發一個HTTP請求到伺服器,伺服器對其進行處理後再返回一個新的HTHL頁到用戶端,每當伺服器處理用戶端提交的請求時,客戶都只能空閑等待,並且哪怕只是一次很小的互動、只需從伺服器端得到很簡單的一個資料,都要返回一個完整的HTML頁,而使用者每次都要浪費時間和頻寬去重新讀取整個頁面。

而使用Ajax後使用者從感覺上幾乎所有的操作都會很快響應沒有頁面重載（白屏）的等待。

1、XMLHTTPRequest

Ajax的一個最大的特點是無需重新整理頁面便可向伺服器傳輸或讀寫資料(又稱無重新整理更新頁面),這一特點主要得益於XMLHTTP組件XMLHTTPRequest對象。這樣就可以向再發傳統型應用程式只同伺服器進行資料層面的交換,而不用每次都重新整理介面也不用每次將資料處理的工作提交給伺服器來做,這樣即減輕了伺服器的負擔又加快了響應速度、縮短了使用者等候時間。

最早應用XMLHTTP的是微軟,IE（IE5以上）通過允許開發人員在Web頁面內部使用XMLHTTP ActiveX組件擴充自身的功能,開發人員可以不用從當前的Web頁面導航而直接傳輸資料到伺服器上或者從伺服器取資料。這個功能是很重要的,因為它協助減少了無狀態串連的痛苦,它還可以排除下載冗餘HTML的需要,從而提高進程的速度。Mozilla（Mozilla1.0以上及NetScape7以上）做出的回應是建立它自己的繼承XML代理類：XMLHttpRequest類。Konqueror (和Safari v1.2,同樣也是基於KHTML的瀏覽器)也支援XMLHttpRequest對象,而Opera也將在其v7.6x+以後的版本中支援XMLHttpRequest對象。對於大多數情況，XMLHttpRequest對象和XMLHTTP組件很相似,方法和屬性也類似,只是有一小部分屬性不支援。

XMLHttpRequest的應用：

XMLHttpRequest對象在JS中的應用

var xmlhttp = new XMLHttpRequest();

微軟的XMLHTTP組件在JS中的應用

var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);

var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);

XMLHttpRequest 對象方法

/**

* Cross-browser XMLHttpRequest instantiation.

*/

if (typeof XMLHttpRequest == "undefined") {

XMLHttpRequest = function () {

var msxmls = ["MSXML3", "MSXML2", "Microsoft"]

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

try {

return new ActiveXObject(msxmls[i]+".XMLHTTP")

} catch (e) { }

}

throw new Error("No XML component installed!")

}

}

function createXMLHttpRequest() {

try {

// Attempt to create it "the Mozilla way"

if (window.XMLHttpRequest) {

return new XMLHttpRequest();

}

// Guess not - now the IE way

if (window.ActiveXObject) {

return new ActiveXObject(getXMLPrefix() + ".XmlHttp");

}

}

catch (ex) {}

return false;

};

XMLHttpRequest 對象方法

方法	描述
abort()	停止當前請求
getAllResponseHeaders()	作為字串返問完整的headers
getResponseHeader("headerLabel")	作為字串返問單個的header標籤
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])	設定未決的請求的目標 URL, 方法, 和其他參數
send(content)	發送請求
setRequestHeader("label", "value")	設定header並和請求一起發送

[1] [2]  下一頁