創建跨平台的Ajax應用
編輯:AJAX詳解  
何為AJax?
AJax不是什麼新技術,是Asynchronous Javascript and XML的簡稱. 它是Javascript和XML等技術應用的結合。具體包括:
DHtml和CSS
使用文檔對象模型(Document Object Model)作動態顯示和交互
使用XML和XSLT做數據交互和操作
使用XMLHttpRequest進行異步數據接收
使用JavaScript將它們綁定在一起
有了AJax技術,我們可以在一定程度上實現Rich Internet ClIEnt界面。我們來看一個例子。要設計一個Web界面,用戶從下拉式列表中選擇一個省份,在另一個清單式列表中顯示該省份的城市清單。而這些省份所擁有的城市數據是儲存在服務器端數據庫中的。在沒有AJax之前,用戶在浏覽器上每選擇一次省份,則發生一次表單提交動作,將所選省份通過表單的POST 請求發送到Servlet/JSP,然後服務器又返回另一個Web頁面,裡面包含該省份的數據。而用戶在浏覽器中所看到的就是頁面被重新刷新了一次,會有明顯的界面遲滯效果。
在AJax技術出現之後,這一切都成為過去。用戶看到的幾乎是即時刷新的Web界面。後面我們會詳細討論如何在不同浏覽器平台上實現這個例子,以及不同浏覽器上編寫腳本所就注意的事項。
XMLHttpRequest---AJax的靈魂
要在浏覽器上實現AJax應用,需要創建一個XMLHttpRequest腳本對象,我們就是通過此對象來讓Javascript與服務器進行後台的異步交互,而交互的媒介就是XML.
XMLHttpRequest並不是一個W3C規定的標准技術[1], 所以在不同的浏覽器上,創建XMLHttpRequest對象的方式也不一樣.
1) var xmlHttp;2) if (window.XMLHttpRequest) 3) {4) // 創建 Mozilla/Firefox平台的 XMLHttpRequest 對象5) xmlHttp = new XMLHttpRequest();6) } else if (window.ActiveXObject) 7) {8) // 創建 IE/Windows 平台的XMLHttp對象9) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");10) }
以上代碼就創建了XMLHttpRequest腳本對象. 其中第5行是FireFox平台上的創建方式, 我只在FireFox平台上測試過, 由於Firefox是采用Mozilla為內核,理論上也可以在Mozilla上運行.第9行是IE上的創建方式.
所幸的是, 雖然創建方式不一樣,但這兩種對象所提供的方法和屬性幾乎是一模一樣的