一、目的 1、通過適當的Ajax應用達到更好的用戶體驗;
2、把以前的一些服務器負擔的工作轉嫁到客戶端，利於客戶端閒置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節約ISP的空間及帶寬租用成本的目的。
二、引用 Ajax這個概念的最早提出者Jesse James Garrett認為:Ajax是Asynchronous JavaScript and XML的縮寫。Ajax並不是一門新的語言或技術,它實際上是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用,它包括:
使用XHTML和CSS標准化呈現;
使用DOM實現動態顯示和交互;
使用XML和XSLT進行數據交換與處理;
使用XMLHttpRequest進行異步數據讀取;
最後用JavaScript綁定和處理所有數據;
Ajax的工作原理相當於在用戶和服務器之間加了?個中間層,使用戶操作與服務器響應異步化。並不是所有的用戶請求都提交給服務器,像?些數據驗證和數據處理等都交給Ajax引擎自己來做,只有確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求。
三、概述 雖然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) 發送請求
setReq