javascript快速入門22--Ajax簡介

水之原發表於2013-12-04
JavaScript

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，就不再有這個限制。我們可以只修改頁面的一部分，如果使用者沒想到這一點，他們會嘗試狂點某按鈕,或重新整理頁面,所以要通過一些方法來讓使用者知道頁面正在"非同步"與伺服器互動!

相關文章