# javascript快速入門22--Ajax簡介 ## Ajax是什么? 首先,Ajax是什么?一個很酷的新興詞匯!僅僅是某種早就有了的技術的一種新說法而已! Ajax是指一種創建交互式網頁應用的網頁開發技術。要談到網頁應用程序,則必須從WEB的歷史來講: 1.開始的Internet,僅僅是科學家們用來交換研究論文,及一些大學在上面發布一些課程信息的工具,那個時候網頁與一幅戶外廣告沒多大區別(相反戶外廣告才能起來廣告的作用).那個時候,只有少部分的公司具有公司網站,而它們的公司網站僅僅是在首頁上放置一些聯系信息或一些靜態的文檔! 2.當Windows出現后(盡管Windows僅僅是給早就有了的操作系統加個外套而已,但這確實上一大進步),及個人電腦的流行,WEB也開始從學院走向群眾,人們無法再忍受靜態網頁的一成不變,于是CGI(Common Gateway Interface)誕生了! CGI其實是用C或Perl編寫的程序,當用戶請求某個頁面時,CGI程序會自動執行,CGI程序可以訪問數據庫,返回HTML頁面.那個時候就可以通過CGI來創建一個在線商城了.然而CGI有很多缺點:首先是其編寫很復雜,往往編寫CGI的是一些專業的程序員,他們只會關心一些算法問題,而不會理HTML頁面是否漂亮! 另一點,由于CGI是經過編譯后的程序,雖然作為獨立程序運行時效率會很高,但也很危險,因為CGI程序可以訪問服務器的系統里的其它與WEB無關的程序及創建文件,雖然一般情況下CGI程序不會這樣做,但如果惡意用戶將CGI程序放到服務器,那么它就可以為所欲為了!盡管存在這些缺陷，到如今CGI仍在使用。 3.很多人都知道Sun,知道因特網流行的編程語言JAVA.如上所說CGI具有許多缺點,JAVA便是來彌補這些缺點的.由于Netscape的Navigator支持Java，動態Web頁面掀開了新的一頁：applet時代到來了。Applet與CGI不同,它是運行在客戶端的,Applet就是嵌入在Web頁面上的小應用程序. 只要用戶使用支持Java的瀏覽器，就可以在瀏覽器的Java虛擬機（Java Virtual Machine，JVM）中運行applet。盡管applet可以做很多事情，但它也存在一些限制：通常不允許它讀寫文件系統，它也不能加載本地庫，而且可能無法啟動客戶端上的程序。除了這些限制外，applet是在一個沙箱安全模型中運行的，這是為了有助于防止用戶運行惡意代碼。 JAVA最先就是因為Applet出名的,而很多人學JAVA也是從Applet開始的.然而,Applet好景不長,一是由于一個Applet本身加載要很長時間,另一方面,由于更流行的MS的IE開始不支持Applet,它就只好沒落了. 4.與此同時，Netscape創建了一種腳本語言，并最終命名為JavaScript（建立原型時叫做Mocha，正式發布之前曾經改名為LiveWire和LiveScript，不過最后終于確定為JavaScript）。設計JavaScript是為了讓不太熟悉Java的Web設計人員和程序員能夠更輕松地開發applet（當然，Microsoft也推出了與JavaScript相對應的腳本語言，稱為VBScript）。 當然,最初JavaScript是很失敗的,由于各個瀏覽器相互不兼容(然而它們都提供了彈窗,那些煩人的alert),又因為缺乏開發工具,JavaScript很受非議.但盡管如此，JavaScript仍然是一種創建動態Web應用的強大方法。 5.在Java問世一年左右，Sun引入了servlet。現在Java代碼不用再像applet那樣在客戶端瀏覽器中運行了，它可以在你控制的一個應用服務器上運行。這樣，開發人員就能充分利用現有的業務應用，而且，如果需要升級為最新的Java版本，只需要考慮服務器就行了。Java推崇“一次編寫，到處運行”，這一點使得開發人員可以選擇最先進的應用服務器和服務器環境，這也是這種新技術的另一個優點。servlet還可以取代CGI腳本。 當然,這個時候的servlet仍然比CGI簡單不了多少.MS吸取了Sun的教訓,推出了ASP,Sun也很快作出了回應,推出了JSP.JSP和ASP的設計目的都是為了將業務處理與頁面外觀相分離，從這個意義上講，二者是相似的。雖然存在一些技術上的差別（Sun也從Microsoft那里學到了教訓），但它們有一個最大的共同點，即Web設計人員能夠專心設計頁面外觀，而軟件開發人員可以專心開發業務邏輯。 ASP與JSP都沒有壟斷服務器腳本市場,因為還有其它優秀的服務器腳本,如PHP,ColdFusion及Ruby! 6.當WEB進化到這里的時候,動態的網站已經很多了.但人們對動態的定義一直很模糊,比如說很多人以為動態是指動畫!其實這也沒什么可笑的,正是這一理念,將動態WEB從服務器端動態生成HTML進化為富客戶端應用程序(當然不是動畫). 富客戶端應用程序(Rich Internet Applications,富因特網應用程序,RIA)的提出解決了長久以來的"客戶體驗"問題,用戶在使用Windows時已經習慣于那些各色各樣的桌面應用程序,而死板的HTML頁面往往只能提供一些文檔. RIA的出現,目標就是能使WEB頁面能像桌面應用程序一樣具有很高的交互性及響應率.其實Sun推出的Applet就是一個RIA,當然MS也有其產品,最近推出的SilverLight.并不只有這兩家,還有Adobe Flash(它不是做動畫的嗎?對的,但其不但可以用來做動畫,還可以創建一些其它的RIA),利用Flash，設計人員可以創建令人驚嘆的動態應用。公司可以在Web上發布高度交互性的應用，幾乎與胖客戶應用相差無幾。不同于applet、servlet和CGI腳本，Flash不需要編程技巧，很容易上手。 像許多解決方案一樣，Flash需要客戶端軟件,由于此限制,很多網站上就多出了"跳過此頁"的鏈接. 7.主角出場了(其實已經低調出場過一次了),曾經的JavaScript,以及其帶來的DHTML,開始了新的歷程. 當Microsoft和Netscape發布其各自瀏覽器的第4版時，Web開發人員有了一個新的選擇：動態HTML（Dynamic HTML，DHTML）。與有些人想像的不同DHTML不是一個W3C標準，它更像是一種營銷手段。實際上，DHTML結合了HTML、層疊樣式表（Cascading Style Sheets，CSS）、JavaScript和DOM。這些技術的結合使得開發人員可以動態地修改Web頁面的內容和結構。 最初DHTML的反響很好。不過，它需要的瀏覽器版本還沒有得到廣泛采用。盡管IE和Netscape都支持DHTML，但是它們的實現大相徑庭，這要求開發人員必須知道他們的客戶使用什么瀏覽器。而這通常意味著需要大量代碼來檢查瀏覽器的類型和版本，這就進一步增加了開發的開銷。有些人對于嘗試這種方法很是遲疑，因為DHTML還沒有一個官方的標準。 當DHTML漸漸退出視野之后,我們的JavaScript并沒有沒落,由于W3C標準的不斷推進,給JS帶來了福音,現在編寫跨瀏覽器的代碼并不像當初那樣困難了(盡管也存在一些問題).另外,XML與異步通信(XMLHttpRequest)在WEB上的的流行,瀏覽器對支持也越來越好,也使得JS可以大展其身手.當你使用JS操縱DOM的時候,就發現實現動態WEB應用程序已經不再有多遙遠. 現在又有了XML(數據庫)與異步通信的支持,可以使得應用程序在加載完成后,無需跳轉,就可以返回給用戶所有的內容了! ### Ajax是多種技術的并稱 Ajax是Asynchronous JavaScript and XML（異步JavaScript和XML），它其實包含了很多技術,主要是下面所列的: * ECMAScript,為什么不是JavaScript?因為JavaScript本身與Ajax一樣,包含的也太多了! * DOM及相關內容:CSS,XHTML.... * XML,及XML的一些擴展語言:XSL,SVG,XUL,XAML.....XML的擴展太多了 * XMLHttpRequest對象,瀏覽器提供的一個可以用于異步通信的JavaScrip對象 * 服務器腳本的支持,沒有服務器腳本在后臺工作,也是沒有辦法實現"動態"的,之后就知道了... ## 關于XMLHttpRequest對象 XMLHttpRequest對象其實最早是由MS提出來的,并在IE5中就提供了支持,當時,在IE5里它是一個ActiveXObject. 原先，XHR對象只在IE中得到支持（因此限制了它的使用），但是從Mozilla 1.0和Safari 1.2開始，對XHR對象的支持開始普及。這個很少使用的對象和相關的基本概念甚至已經出現在W3C標準中：DOM Level 3 加載和保存規約（DOM Level 3 Load and Save Specification）。現在，特別是隨著Google Maps、Google Suggest、Gmail、Flickr、Netflix和A9等應用變得越來越炙手可熱，XHR也已經成為事實上的標準。 與前面提到的方法不同，Ajax在大多數現代瀏覽器中都能使用，而且不需要任何專門的軟件或硬件。實際上，這種方法的一大優勢就是開發人員不需要學習一種新的語言，也不必完全丟掉他們原先掌握的服務器端技術。Ajax是一種客戶端方法，可以與J2EE、.NET、PHP、Ruby和CGI腳本交互，它并不關心服務器是什么。盡管存在一些很小的安全限制，你還是可以現在就開始使用Ajax，而且能充分利用你原有的知識。 ### 早期的異步通信實現 雖然可以使用XHR對象來實現異步通信,但其實早期的開發人員曾經也嘗試過使用隱藏幀等方法來實現異步通信! ``` //主頁面中的JS代碼 function getPages(url) { var iframe =document.getElementById("hideIframe");//一個隱藏了的iframe標簽 iframe.src = url;//將幀的src設置為傳入的url,就可以將那個頁面在后臺載入 } window.container = document.getElementById("oDiv");//加載內容的窗口 getPages("test.php?param=value");//可以通過QS傳遞參數 //在隱藏幀中加載的頁面中JS代碼 window.onload = function () {//當幀加載完畢后修改父窗口中的內容 parent.container.innerHTML = document.body.innerHTML; } ``` 另外還有一種就是使用script標簽 ``` //HTML <script type="text/javascript" id="voidScript" src="void(0)"> </script> //JS function getScript(url) { var script = document.getElementById("voidScript"); script.src =url;//這種方法必須加載JS腳本,并且腳本加載后就會執行 } getScript("test.php?userName=abc"); ``` ### Ajax的問題 Ajax并不是每個網站都需要的,盡管它有諸多優點:如可與XHTML無縫集成,輕量,無需插件..但其缺點也有不少:依賴JavaScript,影響瀏覽器默認行為如后退按鈕及收藏夾等.另外,它最大的優點也是它最大的缺點: 我們以前總是告訴用戶，Web應用是以一種請求/響應模式完成操作的，用戶也已經接受了這種思想。但是用了Ajax，就不再有這個限制。我們可以只修改頁面的一部分，如果用戶沒想到這一點，他們會嘗試狂點某按鈕,或刷新頁面,所以要通過一些方法來讓用戶知道頁面正在"異步"與服務器交互!