Ajax簡介

　　

　　或許，不少人都會認爲已經學過了的技術不必再回顧，也懶得去實踐...這種心理問題我想你應該也有過，懶惰是人之本性嘛，至少我曾經是。

　　

　　好了，木木就讓小夥伴們來瞧瞧我最近學到的東西，學的很差不要見怪喲。

　　

 　　註解：知識源於積累，分享。但願看到木木的獻醜你們不要驚慌，木木會更快更正.....

　　Ajax:

　　

　　Ajax到底有什麼做用叻？

　　　　1.經過無刷新頁面與服務器交互數據來提升客戶端體驗;

　　　　2.經過其異步調用機制增長web程序性能,下降服務器壓力;

　　　　首先，Ajax並非很新的技術，它是一系列技術的整合。能夠實現局部刷新頁面。  (改變頁面中某個塊的值，不會刷新整個頁面)。

　　　　Ajax的組成：Asynchronous JavaScript And XML。

　　　　註解：

　　　　　　 Asynchronous：異步。

　　　　　　 JavaScript:解釋性語言。  　　　　　　XML:數據結構語言。　　

　　　　那麼Ajax同步和異步呢？

　　　　　　 同步：客戶端腳本在未接受到服務器端響應以前，會一直等待，直到接受響應後纔會繼續執行。  　　　　　　異步：客戶端代碼和服務器端同時執行。 　　

 

　　　　下面咱們來初步瞭解Ajax的技術原理：

　　　　　　　　服務器    　　　　　　　

　　　　　　　　   ↓↑      　　　　

　　　　　　XMLHttpRequest   　　　　     （XMLHttpRequest:JavaScript原生對象的一個請求。   返回true  和false）  

　　　　　　　　　↓↑        　　　　 

　　　　　　　JavaScript　　　　　　　　　（客戶端腳本）     　　　　　　　　↓      　　　　　　　　　　　

　　　　　　------ -----     

　　　　　　　　↓  ↓     　　　　 

　　　　　 CSS        DOM　　　　　　　　（CSS樣式）

　　　　

　　　　-----------------------------------------------------------------------------------------------  　　　　

　　　　*  [將註冊帳號給服務器端，讓服務器驗證這個帳號是否已經註冊，而後給客戶端提示信息]*  　　　　　　　　　　

　　　　***** Ajax同步請求                *****  　　　　***** ------>發送請求            

　　　　*****  　　　　- ->                　　　　  

　　　　 *****  　　　　-客戶端 -> true,false    服務器端           -  　　　　

　　　　-       <-                                                  -  　　　　

　　　　-   <-------------------  -  

　　　　 [[客戶端接受  -   返回響應以後　-   會根據不一樣的  - 返回結果提示 　-   不一樣的信息。]]  　

　　　　-----------------------------------------------------------------------------------------------  　　

 

 　　以上咱們對Ajax有那麼一丁點兒的初步認知後，那麼咱們即將步入Ajax的發展歷史：

　　

 　　XMLHttpRequest：

　　　　XMLHttpRequest是一種用於在 Web 瀏覽器和 Web 服務器間傳輸數據消息的 JavaScript API。它支持瀏覽器使用 HTTP POST（將數據傳到服務器）或 GET 請求（從後臺服務器訪問數據）。

　　　　該 API 是大多數 Ajax 交互的核心，也是現代 Web 開發的一項基本技術。

　　

　　　　XMLHttpRequest最早出如今IE5種，最初是由 Alex Hopmann 編寫的 Microsoft ® ActiveX® 控件，建立 XHR 是爲了處理 Microsoft Outlook® 　　Web Access，

　　　　旨在解決高級（當時）前端接口和 Microsoft 　　　　　　Exchange Server 間的交互。W3C標準支持。。。。（因爲本人之前太懶，目前就這麼多）

　　

　　

　　

　　　　請求：有四種方式

　　　　　　1. open() 發起服務器鏈接。能夠帶參數：

• • • method。將要使用的 HTTP 方法（能夠是 POST 或者 GET）
    • url。請求的 URL
    • async。 可選布爾參數，代表請求是否異步（該參數的默認值爲 Ture）
    • user。一個可選用戶名，供認證使用
    • password。一個可選密碼，供認證使用

　　　　　　2. setRequestHeader() 設置請求報頭，帶有兩個參數：報頭及其相關值

　　　　　　3.send() 發送請求。該方法帶有一個可選參數，包含 POST 請求的正文

　　　　　　4.abort() 停止請求

　　

　　　響應：屬性和方法　　

• • status。請求的標準 HTTP 狀態（例如，成功請求將返回 200）
  • statusText。包括 Web 服務器返回的完整響應字符串，其中包括響應文本（例如，304 Not Modified）
  • getResponseHeader()。返回特定報頭內容；請求報頭名稱是其唯一參數
  • getAllResponseHeaders()。返回全部響應報頭的文本
  • responseText。響應文本的字符串表示
  • responseXML。響應文本的 XML 表示，一個包含 DOM 和全部相關 DOM 方法的文檔片斷

 

　　　　readyState

　　　　

　　　　實例化完成後，XMLHttpRequest 對象有 5 種狀態，使用如下值表示：

• • 0: UNSENT。表示對象已建立
  • 1: OPENED。表示 open() 方法已成功調用
  • 2: HEADERS_RECEIVED。表示來自請求的報頭已收到
  • 3: LOADING。表示響應報頭已下載
  • 4: DONE。表示請求完成，可是並無指出請求是否成功或返回預期值（查詢響應和標準 HTTP 報頭來估量請求的健康情況）

　　　　

      Ajax框架簡介：

　　　　AJAX模式

　　　　　在一個發送請求到服務端的應用中，必須包含請求順序、優先級、超時響應、錯誤處理及回調，其中許多元素已經在Web服務中包含了，

　　　　　就像如今的SOA。AJAX開發人員擁有一個完整的系統架構知識。同時，隨着技術的成熟還會有許多地方須要改進，特別是UI部分的易用性。

　　　　　AJAX開發與傳統的CS開發有很大的不一樣。這些不一樣引入了新的編程問題，最大的問題在於易用性。

　　　　　因爲AJAX依賴瀏覽器的JavaScript和XML，瀏覽器的兼容性和支持的標準也變得和JavaScript的運行時性能同樣重要了。

　　         這些問題中的大部分來源於瀏覽器、服務器和技術的組合，所以必須理解如何才能最好的使用這些技術。

　　　　   綜合各類變化的技術和強耦合的客戶服務端環境，AJAX提出了一種新的開發方式。AJAX開發人員必須理解傳統的MVC架構，這限制了應用層次之間的邊界。

　　　　   同時，開發人員還須要考慮CS環境的外部和使用AJAX技術來重定型MVC邊界。最重要的是，AJAX開發人員必須禁止以頁面集合的方式來考慮Web應用而須要將其認爲是單個頁面。

              一旦UI設計與服務架構之間的範圍被嚴格區分開來後，開發人員就須要更新和變化的技術集合了。

 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　[(注：Ajax模式思路介紹摘自百度文庫)]

 

         瀏覽器框架    [這裏小編就介紹做用就好了，至於詳細的要靠你們去研究了 引用自百度文庫]

　　　　

　　　　

　　　　Dojo　　

　　　　　　

　　　　　　Dojo是最老的框架之一，於2004年9月開始開發。這個項目的目標是創建充分利用XHR的DHTML工具包，並把重心放在可用性問題上。

　　　　　　Dojo只有幾個文件，不用處理XHR的創建，只需調用bind方法，並傳入想調用的URL和回調方法便可。就這麼簡單。還可使用bind方法來提交整個 表單。

 

　　　　Flash/JavaScript集成包

　　　　　　

　　　　　　在Ajax以前，Flash非常風行，不少Web網站都創建在Flash平臺上。那些曾對Flash狠下一番功夫的人不想徹底放棄Flash，利用這個開源項目就能同時利用Ajax技術。

　　　　　　這個工具包在全部主要瀏覽器上都能用，使得JavaScript可以調用ActionScript，ActionScript也能調用JavaScript。能夠來回傳遞大量對象，包括日期、串和 數組。

　　　　Google AJAXSLT

　　　　　　基於Google Maps的工做，Google AJAXSLT是使用XPath的XSL轉換（XSLT）的JavaScript實現。XSLT能夠把XML文檔轉換爲其餘語言，

　　　　　　如HTML。AJAXSLT容許使用JavaScript在瀏覽器上直接完成這些轉換。

　　　　libXmlRequest

　　　　　　

　　　　　　libXmlRequest框架也是比較老的一個框架，早在2003年就已經發布了。

　　　　　　這個框架包括一個JavaScript文件，它至關於XMLHttpRequest對象的一個包裝器，提供了兩個 重載的請求函數：getXml和postXml。

　　　　　　另外，它有一些處理緩衝池和緩存的屬性，還有一些工具函數　　　　處理常見的任務，如解析來自服務器的XML以及修改DOM。

　　　　RSLite

　　　　　　RSLite是遠程腳本的一個實現，由Brent 　　　　　　Ashley編寫。從技術上講，它沒有利用做爲Ajax核心的XMLHttpRequest對象，可是獲得了更普遍的瀏覽器支持。

　　　　　　若是你須要支持原來的瀏覽器，而這些瀏覽器不支持XMLHttpRequest對象，就能夠試試RSLite。RSLite是至關輕量級的，已從2000年發展至今 。

　　　　SACK

　　　　　　

　　　　　　SACK（簡單Ajax代碼包）開發爲一個瘦包裝器，包裝了XMLHttpRequest對象。

　　　　　　其做者Gregory Wild-Smith認爲，其餘的許多框架太過複雜，並且作了許多本不應它們完成的任務。因此他建立了SACK來簡化Ajax的開發。

　　　　　　SACK包括幾個能夠簡化服務器調用的方法。比起具體建立適當的XMLHttpRequest對象實例來講，用更少的代碼就能向服務器發送數據，並處理響應。

　　　　sarrisa

　　　　　　

　　　　　　sarissa有一點是Ajax作不到的，它以一種獨立於瀏覽器的方式對XML API提供了包裝支持。

　　　　　　利用這個框架，建立和使用XMLHttpRequest對象實在是小菜一碟（不用檢查瀏覽器，它已經爲你處理好了）。

　　　　　　另外，sarissa還對使用DOM提供了支持。相似於Google AJAXSLT，sarissa也支持XSLT，它模擬了IE上的Mozilla處理器。

　　　　XHConn

　　　　　　

　　　　　　XHConn相似於SACK，它至關於XMLHttpRequest對象的一個簡單包裝器。

　　　　　　你不用直接使用XMLHttpRequest對象，只需首先啓動一個XHConn實例，與使用XHR一樣的方法加以處理。

　　　　　　也就是說，無需瀏覽器檢查，並提供了一種簡單的方法來肯定瀏覽器是否支持XHR（這對於須要妥善降級的網站尤爲方便）。

　　　　jquery

　　　　　　

　　　　　　設計思想

　　　　　　　　簡潔的思想：幾乎全部操做都是以選擇DOM元素（有強大的Selector）開始，而後是對其的操做（Chaining等特性）。

　　　　　　優勢

　　　　　　　　小，壓縮後代碼只有20多k（無壓縮代碼94k）。

　　　　　　　　Selector和DOM操做的方便：jQuery的Selector與 mootools的Element.Selectors.js比較，CSS Selector, XPath Selector（1.2後已刪除）

　　　　　　Chaining：老是返回一個jQuery對象，能夠連續操做。

　　　　　　　　文檔的完整，易用性（每一個API都有完整的例子，這是其它框架如今不能比的），並且網上還有不少其它的文檔，書籍。

　　　　　　　　應用的普遍，包括google code也使用了jQuery。

　　　　

 

　　服務器框架  [部分引用自百度文庫]

 

　　　　CPAINT

　　　　

　　　　　　CPAINT（跨平臺異步接口工具包）在服務器端實現Ajax，它向客戶返回文本或DOM文檔對象，以便用JavaScript處理。

　　　　　　CPAINT在大多數主要瀏覽器上都能用，並且支持遠程腳本，在GPL協議下發布。這個項目的文檔至關完備，不過，CPAINT只支持PHP和ASP。

 

　　　　　 Sajax

　　　　　　

　　　　　　利用Sajax，能夠直接從JavaScript調用服務器端代碼。

　　　　　　Sajax支持Perl、Python、Ruby和ASP等語言（不過奇怪的是，目前並不支持Java）。

　　　　　　安裝Sajax至關簡單，只涉及針對特定服務器語言的簡單的庫。Sajax的開發社區極其活躍。

　　　　　　已經確認的只有IE 6和Mozilla/Firefox提供Sajax支持，不過本書做者認爲它在Safari上也能很好地使用。

 

　　　　　 JSON/JSON-RPC

　　　　　　JavaScript對象註解（JSON）是一種文本格式，與XML很類似，能夠用於交換數據。

　　　　　　　　　JSON的設計要保證兩方面，一方面便於人閱讀，另外一方面便於機器解析，它使用了C系列語言相似的約定。

　　　　　　　　　與JSON相關的還有JSON-RPC，這是一個遠程過程調用（RPC）協議，相似於XML-RPC，但面向的是JSON語言。

　　　　　　　　　做爲規約，JSON-RPC在許多語言中都有實現，包括Java、Ruby、Python和Perl。

　　　　

　　　　　　Direct Web Remoting

　　　　　　

　　　　　　利用Direct Web Remoting 　　　　　　(DWR)，你能從JavaScript直接調用Java方法，就好像它們是瀏覽器的本地方法同樣。

　　　　　　儘管後臺嚴格限制爲Java，但DWR仍然是最流行的框架之一。

　　　　

　　　　SWATO

 

　　　　　　Shift Web Applications TO (SWATO)也是一個基於Java的Ajax框架解決方案。

　　　　　　SWATO在全部Servlet 　　　　　　2.3或更高版本的容器中都能工做，相似於DWR，它也須要對配置文件作一些更新。

　　　　　　有意思的是，SWATO充分利用了JSON來完成客戶和服務器之間數據的編組，與本附錄中討論的其餘一些框架類似，它也容許從瀏覽器調用服務器端Java。

　　　　　　爲了幫助開發人員，SWATO包括許多可複用的組件，如自動完成文本框等。

 

　　　　　 Java BluePrints

　　　　  Sun的BluePrints小組一直忙於將Ajax歸入他們的解決方案目錄（Solutions Catalog）中。S

　　　　　　　olutions Catalog包括一些很好的文檔，描述瞭如何使用基本Ajax，如何實現自動完成，如何建立一個進度條以及如何驗證表單。

　　　　　　   它還包括JavaServer Faces組件。

 

　　　　Ajax Net

　　　　　　　　Ajax Net之於Microsoft 　　　　　　　　.NET就至關於SAJAX、DWR和SWATO之於Java。利用AjaxNet，你能從JavaScript客戶調用.NET方法。

　　　　　　　　AjaxNet包括一個DLL，能夠與VB.NET或C#一同使用。

　　　　　　　　AjaxNet的文檔很好地展現了針對各類場景的解決方案，並且能獲得相關的源代碼。不過，AjaxNet的許可協議很不明確。

 

　　　　  Microsoft的Atlas項目

　　　　　　　　

　　　　　　Microsoft在Ajax領域涉足的時間已經不短了，畢竟，XMLHttpRequest對象是Microsoft發明的，並且從1998年開始就已經用在Web版本的Outlook中。

　　　　　　Microsoft把重點放在提供一個更加健壯的 開發環境上，從而讓開發人員的工做更輕鬆。

　　　　　　Microsoft的着眼點還不僅這些，還力圖提供客戶端腳本框架、ASPNET控件和Web服務集成。Microsoft還發布了Atlas項目，做爲其ASPNET 2.0預覽版的一部分。

　　　　　　有Microsoft的介入，開發人員的工具包可能會比今天充實得多。

　　　　　Ruby on Rails

　　　　　　

　　　　　　　Rails是一個使人興奮的新Web框架，創建在Ruby語言基礎上。

　　　　　　　現在，Rails已經獲得了大量關注（在Google上查一下Rails，能夠找到更多信息），這是由於使用Rails可以快速開發基於Web的應用。

　　　　　　　開發Basecamp時，37signals小組提出名爲Rails的框架。Basecamp正是Ajax應用的主要示例，因此看到Rails對Ajax提供如此充分的支持，咱們不該感到奇怪。

　　　　　　　Rails有許多內置的JavaScript庫，其中包裝了不少經常使用的特性，它還包含一個模塊，其中包裝了Ruby的JavaScript調用。若是你在使用Rails，就會發現Ajax很是簡單。

 

　　　　　　

　　最後木木帶你們進入一些建立實例代碼：

 

 

　　　　<script type="text/javascript">        

　　　　　　

　　　　　　1.建立原生對象XMLHttpRequest  

　　　　　　2.設置回調函數  

　　　　　　3.初始化對象

　　　　　   4.發送請求

 　　　　　//建立原生態對象 XMLHttpRequest  

　　　　　　function createXMLHttpRequest(){   //針對IE5,IE6瀏覽器   

　　　　　　　　if(window.ActiveXObject){    

　　　　　　　　return new ActiveXObject("Microsoft.XMLHTTP");   

　　　　　　}else if(window.XMLHttpRequest){ //其他的瀏覽器    

　　　　　　　　return new XMLHttpRequest;   }

　　　　　　 }

 

　　　　//建立Ajax執行方法  　　　　

　　　　　　$(function(){   　　　　

　　　　　　$("使用者屬性名稱").對應事件(function(){    　　　　

　　　　　　//一、建立原生對象XMLHttpRequest    　　　　

　　　　　　var xhr = createXMLHttpRequest();    　　　　

　　　　　　//二、設置回調函數    　　　　

　　　　　　xhr.onreadystatechange = function(){     　　　　

　　　　　　//判斷狀態 是否正常加載完畢而且數據完成加載    　　　　 

　　　　　　if(xhr.readyState == 4 && xhr.Status == 200){     　　　　 

　　　　　　document.getElementById('加載到的容器名稱').innerHTML = xhr.responseText;     　　　　

　　　　　　}    　　

　　　　　}    　　

　　　　　　//三、初始化對象    　　

　　　　　　xhr.open("提交方式","路徑",true/false);    　　

　　　　　　//四、發送請求   　　 

　　　　　　xhr.send("指定請求的路徑(服務器端的頁面)");   　　

　　　　}); 　　 

　　});

        　</script>