java_web學習(16)Ajax

標籤：

Ajax

 

      Ajax(Asynchronous JavaScript and XML的縮寫），允許瀏覽器與伺服器通訊而無須重新整理當前頁面的技術都被叫做Ajax。      Ajax：一種不用重新整理整個頁面便可與伺服器通訊的辦法      Web的傳統模型，用戶端向伺服器發送一個請求，伺服器返回整個頁面，如此反覆。（左圖）      在Ajax模型中，資料在用戶端與伺服器之間獨立傳輸。伺服器不再返回整個頁面。（右圖）                                              

      不用重新整理整個頁面便可與伺服器通訊的辦法：

          1>Flash          2>Java applet          3>架構：如果使用一組架構構造了一個網頁，可以只更新其中一個架構，而不必驚動整個頁面          4>隱藏的iframe          5>XMLHttpRequest：該對象是對 JavaScript 的一個擴充，可使網頁與伺服器進行通訊。是建立 Ajax 應用的最佳選擇。實際上通常把 Ajax 當成 XMLHttpRequest 對象的代名詞

       Ajax的工作原理圖                                                               

                                                             

       Ajax工具包

       Ajax並不是一項新技術，它實際上是幾種技術，每種技術各盡其職，以一種全新的方式彙總在一起.       1>伺服器端語言：伺服器需要具備向瀏覽器發送特定資訊的能力,Ajax與伺服器端語言無關。       2>XML (eXtensible Markup Language，可延伸標記語言 (XML)) 是一種描述資料的格式,Aajx 程式需要某種格式化的格式來在伺服器和用戶端之間傳遞資訊，XML 是其中的一種選擇       3>XHTML（eXtended Hypertext Markup Language,使用擴充超媒體標記語言）和 CSS（Cascading Style Sheet,級聯樣式單）標準化呈現；       4>DOM（Document Object Model,文件物件模型）實現動態顯示和互動；       5>使用XMLHTTP組件XMLHttpRequest對象進行非同步資料讀取       6>使用JavaScript綁定和處理所有資料       Ajax的缺陷       AJAX不是完美的技術，使用AJAX，它的一些缺陷不得不權衡一下：       1>由 Javascript 和 AJAX 引擎導致的瀏覽器的相容       2>頁面局部重新整理，導致後退等功能失效。       3>對流媒體的支援沒有FLASH、Java Applet好。       4>一些手持功能（如手機、PDA等）支援性差。       XMLHttpRequest的概述       XMLHttpRequest最早是在IE5中以ActiveX組件的形式實現的，非W3C標準，建立XMLHttpRequest對象（由於非標準所以實現方法不統一）       1>Internet Explorer把XMLHttpRequest實現為一個ActiveX對象       2>其他瀏覽器（Firefox、Safari、Opera…）把它實現為一個本地的JavaScript對象。       3>XMLHttpRequest在不同瀏覽器上的實現是相容的，所以可以用同樣的方式訪問XMLHttpRequest執行個體的屬性和方法，而不論這個執行個體建立的方法是什麼。       建立XMLHttpRequest對象       為了每次寫Ajax的時候都節省一點時間，可以把對象檢測的內容打包成一個可複用的函數：                                                                      說明：對window.XMLHttpRequest的調用會返回一個對象或null，if語句會把調用返回的結果看作是true或false（如果返回對象則為true，返回null則為false）。如果XMLHttpRequest對象存在，則把 xhr 的值設為該對象的新執行個體。如果不存在，就去檢測 ActiveObject 的執行個體是否存在，如果答案是肯定的，則把微軟 XMLHTTP 的新執行個體賦給 xhr       XMLHttpRequest的方法與屬性              發送請求       利用XMLHttpRequest 執行個體與伺服器進行通訊包含以下3個關鍵區段：        完整的 Ajax 的 GET 請求樣本：                                                     完整的 Ajax 的 POST 請求樣本：                       

//onreadystatechange 事件處理函數//open 方法//send 方法 

//onreadystatechange://該事件處理函數由伺服器觸發，而不是使用者//在 Ajax 執行過程中，伺服器會通知用戶端當前的通訊狀態。這依靠更新 XMLHttpRequest 對象的 readyState 來實現。改變 readyState 屬性是伺服器對用戶端串連操作的一種方式。每次 readyState 屬性的改變都會觸發 readystatechange 事件

//open(method, url, asynch)//XMLHttpRequest 對象的 open 方法允許程式員用一個Ajax調用向伺服器發送請求。//method：請求類型，類似 “GET”或”POST”的字串。若只想從伺服器檢索一個檔案，而不需要發送任何資料，使用GET(可以在GET請求裡通過附加在URL上的查詢字串來發送資料，不過資料大小限制為2000個字元)。若需要向伺服器發送資料，用POST。//在某些情況下，有些瀏覽器會把多個XMLHttpRequest請求的結果緩衝在同一個URL。如果對每個請求的響應不同，就會帶來不好的結果。在此將時間戳記追加到URL的最後，就能確保URL的唯一性，從而避免瀏覽器緩衝結果。//url：路徑字串，指向你所請求的伺服器上的那個檔案。可以是絕對路徑或相對路徑。//asynch：表示請求是否要非同步傳輸，預設值為true。指定true，在讀取後面的指令碼之前，不需要等待伺服器的相應。指定false，當指令碼處理過程經過這點時，會停下來，一直等到Ajax請求執行完畢再繼續執行。

//send(data)：//open 方法定義了 Ajax 請求的一些細節。send 方法可為已經待命的請求發送指令//data：將要傳遞給伺服器的字串。//若選用的是 GET 請求，則不會發送任何資料， 給 send 方法傳遞 null 即可：request.send(null);//當向send()方法提供參數時，要確保open()中指定的方法是POST，如果沒有資料作為請求體的一部分發送，則使用null.

//setRequestHeader(header,value)//當瀏覽器向伺服器請求頁面時，它會伴隨這個請求發送一組首部資訊。這些首部資訊是一系列描述請求的中繼資料(metadata)。首部資訊用來聲明一個請求是 GET 還是 POST。//Ajax 請求中，發送首部資訊的工作可以由 setRequestHeader該完成 //參數header： 首部的名字;  參數value：首部的值。//如果用 POST 請求向伺服器發送資料，需要將 “Content-type” 的首部設定為 “application/x-www-form-urlencoded”.它會告知伺服器正在發送資料，並且資料已經符合URL編碼了。//該方法必須在open()之後才能調用

       接收響應

       用 XMLHttpRequest 的方法可向伺服器發送請求。在 Ajax 處理過程中，XMLHttpRequest 的如下屬性可被伺服器更改：

//readyState//status//responseText//responseXML

//readyState//readyState 屬性工作表示Ajax請求的目前狀態。它的值用數字代表。        //0 代表未初始化。 還沒有調用 open 方法        //1 代表正在載入。 open 方法已被調用，但 send 方法還沒有被調用        //2 代表已載入完畢。send 已被調用。請求已經開始        //3 代表互動中。伺服器正在發送響應        //4 代表完成。響應發送完畢//每次 readyState 值的改變，都會觸發 readystatechange 事件。如果把 onreadystatechange 事件處理函數賦給一個函數，那麼每次 readyState 值的改變都會引發該函數的執行。//readyState 值的變化會因瀏覽器的不同而有所差異。但是，當請求結束的時候，每個瀏覽器都會把 readyState 的值統一設為 4

//status//伺服器發送的每一個響應也都帶有首部資訊。三位元的狀態代碼是伺服器發送的響應中最重要的首部資訊，並且屬於超文字傳輸通訊協定 (HTTP)中的一部分。//常用狀態代碼及其含義：            //404 沒找到頁面(not found)            //403 禁止訪問(forbidden)            //500 內部伺服器出錯(internal service error)            //200 一切正常(ok)            //304 沒有被修改(not modified)//在 XMLHttpRequest 對象中，伺服器發送的狀態代碼都儲存在 status 屬性裡。通過把這個值和 200 或 304 比較，可以確保伺服器是否已發送了一個成功的響應

//responseText//XMLHttpRequest 的 responseText 屬性包含了從伺服器發送的資料。它是一個HTML,XML或普通文本，這取決於伺服器發送的內容。//當 readyState 屬性值變成 4 時, responseText 屬性才可用，表明 Ajax 請求已經結束。

                                                          

//responseXML//如果伺服器返回的是 XML， 那麼資料將儲存在 responseXML 屬性中。//只用伺服器發送了帶有正確首部資訊的資料時， responseXML 屬性才是可用的。 MIME 類型必須為 text/xml

       資料格式提要

       在伺服器端 AJAX 是一門與語言無關的技術。在商務邏輯層使用何種伺服器端語言都可以。       從伺服器端接收資料的時候，那些資料必須以瀏覽器能夠理解的格式來發送。伺服器端的程式設計語言只能以如下 3 種格式返回資料：XML、JSON、HTML       XML       優點：            1>XML 是一種通用的資料格式。            2>不必把資料強加到已定義好的格式中，而是要為資料自訂合適的標記。            3>利用 DOM 可以完全掌控文檔。       缺點：           1>如果文檔來自於伺服器，就必須得保證文檔含有正確的首部資訊。若文件類型不正確，那麼 responseXML 的值將是空的。           2>當瀏覽器接收到長的 XML 檔案後， DOM 解析可能會很複雜       JSON       JSON（JavaScript Object  Notation）一種簡單的資料格式，比xml更輕巧。JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON資料不需要任何特殊的API或工具包。       JSON的規則很簡單：對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括弧）開始，“}”（右括弧）結束。每個“名稱”後跟一個“:”（冒號）；“‘名稱/值’對”之間使用“,”（逗號）分隔。                                                                        JSON 用冒號(而不是等號)來賦值。每一條指派陳述式用逗號分開。整個對象用大括弧封裝起來。可用大括弧分級嵌套資料。對象描述中儲存的資料可以是字串，數字或者布爾值。對象描述也可儲存函數，那就是對象的方法。        解析 JSON:        JSON 只是一種文本字串,它被儲存在 responseText屬性中,為了讀取儲存在 responseText 屬性中的 JSON 資料，需要根據 JavaScript 的 eval 語句。函數 eval 會把一個字串當作它的參數。然後這個字串會被當作 JavaScript 代碼來執行。因為 JSON 的字串就是由 JavaScript 代碼構成的，所以它本身是可執行檔.        代碼執行個體：                JSON提供了json.js包，下載http://www.json.org/json.js後，使用parseJSON()方法將字串解析成 JS 對象                JSON 小結：        優點：              1>作為一種資料轉送格式，JSON 與 XML 很相似，但是它更加靈巧。              2>JSON 不需要從伺服器端發送含有特定內容類型的首部資訊。        缺點：              1>文法過於嚴謹              2>代碼不易讀              3>eval 函數存在風險       HTML       HTML 由一些普通文本組成。如果伺服器通過 XMLHttpRequest 發送 HTML， 文本將儲存在 responseText 屬性中。不必從 responseText 屬性中讀取資料。它已經是希望的格式，可以直接將它插入到頁面中。插入 HTML 程式碼最簡單的方法是更新這個元素的 innerHTML 屬性。       優點：             1>從伺服器端發送的 HTML 程式碼在瀏覽器端不需要用 JavaScript 進行解析。             2>HTML 的可讀性好。             3>HTML 程式碼塊與 innerHTML 屬性搭配，效率高。       缺點：             1>若需要通過 AJAX 更新一篇文檔的多個部分，HTML 不合適             2>innerHTML 並非 DOM 標準。       對比小結       1>若應用程式不需要與其他應用程式共用資料的時候, 使用 HTML 片段來返回資料時最簡單的       2>如果資料需要重用, JSON 檔案是個不錯的選擇, z其在效能和檔案大小方面有優勢       3>當遠程應用程式未知時, XML 文檔是首選, 因為 XML 是 web 服務領域的 “世界語”          jQuery 中的 Ajax       jQuery 對 Ajax 操作進行了封裝, 在 jQuery 中最底層的方法時 $.ajax(), 第二層是 load(), $.get() 和 $.post(), 第三層是 $.getScript() 和 $.getJSON()       load() 方法       load() 方法是 jQuery 中最為簡單和常用的 Ajax 方法, 能載入遠端 HTML 程式碼並插入到 DOM 中. 它的結構是:   load(url[, data][,callback])       程式員只需要使用 jQuery 選取器為 HTML 片段指定目標位置, 然後將要載入的檔案的 url 做為參數傳遞給 load() 方法即可                                                                       如果只需要載入目標 HTML 頁面內的某些元素, 則可以通過 load() 方法的 URL 參數來達到目的. 通過 URL 參數指定選擇符, 就可以方便的從載入過來的 HTML 文檔中選出所需要的內容. load() 方法的 URL 參數的文法結構為 “url selector”(注意: url 和 選取器之間有一個空格)        傳遞方式: load() 方法的傳遞參數根據參數 data 來自動自定. 如果沒有參數傳遞, 採用 GET 方式傳遞, 否則採用 POST 方式        對於必須在載入完才能繼續的操作, load() 方法提供了回呼函數, 該函數有三個參數: 代表請求返回內容的 XMLHttpRequest 對象; 代表請求狀態的 textStatus 對象和XMLHttpRequest 對象。       $.get() (或$.post()) 方法       $.get() 方法使用 GET 方式來進行非同步請求。它的結構是: $.get(url[, data][, callback][, type])                        

java_web學習(16)Ajax