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，就再也不有這個限制。咱們能夠只修改頁面的一部分，若是用戶沒想到這一點，他們會嘗試狂點某按鈕,或刷新頁面,因此要經過一些方法來讓用戶知道頁面正在"異步"與服務器交互!