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並和請求一起發送 |
XMLHttpRequest 對象屬性
屬性 |
描述 |
onreadystatechange |
狀態改變的事件觸發程序 |
readyState |
對象狀態(integer): 0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 互動中 4 = 完成 |
responseText |
伺服器處理序返回資料的文本版本 |
responseXML |
伺服器處理序返回資料的相容DOM的XML文檔對象 |
status |
伺服器返回的狀態代碼, 如:404 = "檔案末找到" 、200 ="成功" |
statusText |
伺服器返回的狀態文本資訊 |
2、JavaScript
JavaScript是一在瀏覽器中大量使用的程式設計語言,,他以前一直被貶低為一門糟糕的語言(他確實在使用上比較枯燥),以在常被用來作一些用來炫耀的小玩意和惡作劇或是單調瑣碎的表單驗證。但事實是,他是一門真正的程式設計語言,有著自已的標準並在各種瀏覽器中被廣泛支援。
3、DOM
Document Object Model。
DOM是給 HTML 和 XML 檔案使用的一組 API。它提供了檔案的結構表述,讓你可以改變其中的內容及可見物。其本質是建立網頁與 Script 或程式語言溝通的橋樑。
所有WEB開發人員可操作及建立檔案的屬性、方法及事件都以對象來展現(例如,document 就代表“檔案本身“這個對像,table 對象則代表 HTML 的表格對象等等)。這些對象可以由當今大多數的瀏覽器以 Script 來取用。
一個用HTML或XHTML構建的網頁也可以看作是一組結構化的資料,這些資料被封在DOM(Document Object Model)中,DOM提供了網頁中各個對象的讀寫的支援。
4、XML
可擴充的標記語言(Extensible Markup Language)具有一種開放的、可擴充的、可自描述的語言結構,它已經成為網上資料和文檔傳輸的標準。它是用來描述資料結構的一種語言,就正如他的名字一樣。他使對某些結構化資料的定義更加容易,並且可以通過他和其他應用程式交換資料。
5、綜合
Jesse James Garrett提到的Ajax引擎,實際上是一個比較複雜的JavaScript應用程式,用來處理使用者請求,讀寫伺服器和更改DOM內容。
JavaScript的Ajax引擎讀取資訊,並且互動地重寫DOM,這使網頁能無縫化重構,也就是在頁面已經下載完畢後改變頁面內容,這是我們一直在通過JavaScript和DOM在廣泛使用的方法,但要使網頁真正動態起來,不僅要內部的互動,還需要從外部擷取資料,在以前,我們是讓使用者來輸入資料並通過DOM來改變網頁內容的,但現在,XMLHTTPRequest,可以讓我們在不重載頁面的情況下讀寫伺服器上的資料,使使用者的輸入達到最少。
基於XML的網路通訊也並不是新事物,實際上FLASH和JAVA Applet都有不錯的表現,現在這種富互動在網頁上也可用了,基於標準化的並被廣泛支援和技術,並且不需要外掛程式或下載小程式。
Ajax是傳統WEB應用程式的一個轉變。以前是伺服器每次產生HTML頁面並返回給用戶端(瀏覽器)。在大多數網站中,很多頁面中至少90%都是一樣的,比如:結構、格式、頁頭、頁尾、廣告等,所不同的只是一小部分的內容,但每次伺服器都會產生所有的頁面再返回給用戶端,這無形之中是一種浪費,不管是對於使用者的時間、頻寬、CPU耗用,還是對於ISP的高價租用的頻寬和空間來說。如果按一頁來算,只能幾K或是幾十K可能並不起眼,但像SINA每天要產生幾百萬個頁面的大ISP來說,可以說是損失巨大的。而AJAX可以所為用戶端和伺服器的中介層,來處理用戶端的請求,並根據需要向伺服器端發送請求,用什麼就取什麼、用多少就取多少,就不會有資料的冗餘和浪費,減少了資料下載總量,而且更新頁面時不用重載全部內容,只更新需要更新的那部分即可,相對於純幕後處理並重載的方式縮短了使用者等待時間,也把對資源的浪費降到最低,基於標準化的並被廣泛支援和技術,並且不需要外掛程式或下載小程式,所以Ajax對於使用者和ISP來說是雙盈的。
Ajax使WEB中的介面與應用分離(也可以說是資料與呈現分離),而在以前兩者是沒有清晰的界限的,資料與呈現分離的分離,有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程式錯誤、提高效率、也更加適用於現在的發布系統。也可以把以前的一些伺服器負擔的工作轉嫁到用戶端,利於用戶端閑置的處理能力來處理。