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引擎代為向伺服器提交請求。

三、概述

雖然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中的應用

xmlhttp = new XMLHttpRequest();

·微軟的XMLHTTP元件在JS中的應用

var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);

var xmlhttp = new ActiveXML(MxmlxmlXObject(Microsoft.XMLHTTP); var xmlhttp = new ActiveXML(Mxmlxml2. );

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 return new XMLHttpRequest(); } // Guess not - now the IE way

if (windoweXX ) {

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

}

}

catch (ex) {}

return false;

};

XMLHttpRequest 物件方法

XMLHttpRequest 物件屬性

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