什么是Ajax

Ajax的技術的產生

• Ajax被認為是(Asynchronous JavaScript and XML的縮寫）?，F在，允許瀏覽器與服務器通信而無須刷新當前頁面的技術都被叫做Ajax.
• “Ajax”這個名字是在2005年2月，Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中創造。
• 而Ajax這項技術，是Google在Google Labs發布Google Maps和Google Suggest后真正為人所認識。

Ajax：一種不用刷新整個頁面便可與服務器通訊的辦法

圖1 Web的傳統模型?？蛻舳讼蚍掌靼l送一個請求，服務器返回整個頁面，如此反復

圖2 在Ajax模型中，數據在客戶端與服務器之間獨立傳輸。服務器不再返回整個頁面

不用刷新整個頁面便可與服務器通訊的辦法：
- Flash
- Java applet
- 框架：如果使用一組框架構造了一個網頁，可以只更新其中一個框架，而不必驚動整個頁面
- 隱藏的iframe
- XMLHttpRequest：該對象是對 JavaScript 的一個擴展，可使網頁與服務器進行通信。是創建 Ajax 應用的最佳選擇。實際上通常把 Ajax 當成 XMLHttpRequest 對象的代名詞

Ajax的工作原理圖

Ajax工具包

Ajax并不是一項新技術，它實際上是幾種技術，每種技術各盡其職，以一種全新的方式聚合在一起

• 服務器端語言：服務器需要具備向瀏覽器發送特定信息的能力。Ajax與服務器端語言無關。

• XML (eXtensible Markup Language，可擴展標記語言) 是一種描述數據的格式。Aajx 程序需要某種格式化的格式來在服務器和客戶端之間傳遞信息，XML 是其中的一種選擇

• XHTML（eXtended Hypertext Markup Language,使用擴展超媒體標記語言）和 CSS（Cascading Style Sheet,級聯樣式單）標準化呈現；

• DOM（Document Object Model,文檔對象模型）實現動態顯示和交互；

• 使用XMLHTTP組件XMLHttpRequest對象進行異步數據讀取

• 使用JavaScript綁定和處理所有數據

Ajax的缺陷

AJAX不是完美的技術。使用AJAX，它的一些缺陷不得不權衡一下：

• 由 Javascript 和 AJAX 引擎導致的瀏覽器的兼容
• 頁面局部刷新，導致后退等功能失效。
• 對流媒體的支持沒有FLASH、Java Applet好。
• 一些手持設備（如手機、PDA等）支持性差。

---

XMLHttpRequest的概述

• XMLHttpRequest 最早是在IE5中以ActiveX組件的形式實現的。非 W3C 標準.
• 創建XMLHttpRequest對象（由于非標準所以實現方法不統一）
  
  • Internet Explorer把XMLHttpRequest實現為一個ActiveX對象
  • 其他瀏覽器（Firefox、Safari、Opera…）把它實現為一個本地的JavaScript對象。
  • XMLHttpRequest在不同瀏覽器上的實現是兼容的，所以可以用同樣的方式訪問XMLHttpRequest實例的屬性和方法，而不論這個實例創建的方法是什么。

創建XMLHttpRequest對象

為了每次寫Ajax的時候都節省一點時間，可以把對象檢測的內容打包成一個可復用的函數：

說明：對window.XMLHttpRequest的調用會返回一個對象或null，if語句會把調用返回的結果看作是true或false（如果返回對象則為true，返回null則為false）。如果XMLHttpRequest對象存在，則把 xhr 的值設為該對象的新實例。如果不存在，就去檢測 ActiveObject 的實例是否存在，如果答案是肯定的，則把微軟 XMLHTTP 的新實例賦給 xhr

XMLHttpRequest的方法

XMLHttpRequest的屬性

發送請求

利用XMLHttpRequest 實例與服務器進行通信包含以下3個關鍵部分：

• 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.
• 完整的 Ajax 的 GET 請求示例：
  

setRequestHeader(header,value)

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

接收響應

用 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

• 服務器發送的每一個響應也都帶有首部信息。三位數的狀態碼是服務器發送的響應中最重要的首部信息，并且屬于超文本傳輸協議中的一部分。
• 常用狀態碼及其含義：
  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

優點：

• XML 是一種通用的數據格式。
• 不必把數據強加到已定義好的格式中，而是要為數據自定義合適的標記。
• 利用 DOM 可以完全掌控文檔。

缺點：

• 如果文檔來自于服務器，就必須得保證文檔含有正確的首部信息。若文檔類型不正確，那么 responseXML 的值將是空的。
• 當瀏覽器接收到長的 XML 文件后， DOM 解析可能會很復雜

JSON

• JSON（JavaScript Object Notation）一種簡單的數據格式，比xml更輕巧。JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON數據不需要任何特殊的API或工具包。

• JSON的規則很簡單：對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值’對”之間使用“,”（逗號）分隔。

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 小結

優點：

• 作為一種數據傳輸格式，JSON 與 XML 很相似，但是它更加靈巧。
  JSON 不需要從服務器端發送含有特定內容類型的首部信息。

缺點：

• 語法過于嚴謹
• 代碼不易讀
• eval 函數存在風險

HTML

解析 HTML

• HTML 由一些普通文本組成。如果服務器通過 XMLHttpRequest 發送 HTML， 文本將存儲在 responseText 屬性中。
• 不必從 responseText 屬性中讀取數據。它已經是希望的格式，可以直接將它插入到頁面中。
• 插入 HTML 代碼最簡單的方法是更新這個元素的 innerHTML 屬性。

HTML 小結

優點：

• 從服務器端發送的 HTML 代碼在瀏覽器端不需要用 JavaScript 進行解析。
• HTML 的可讀性好。
• HTML 代碼塊與 innerHTML 屬性搭配，效率高。

缺點：

• 若需要通過 AJAX 更新一篇文檔的多個部分，HTML 不合適
  innerHTML 并非 DOM 標準。

對比小結

• 若應用程序不需要與其他應用程序共享數據的時候, 使用 HTML 片段來返回數據時最簡單的

• 如果數據需要重用, JSON 文件是個不錯的選擇, 其在性能和文件大小方面有優勢

• 當遠程應用程序未知時, 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() 方法即可

load() 方法 — 細節

• 如果只需要加載目標 HTML 頁面內的某些元素, 則可以通過 load() 方法的 URL 參數來達到目的. 通過 URL 參數指定選擇符, 就可以方便的從加載過來的 HTML 文檔中選出所需要的內容. load() 方法的 URL 參數的語法結構為 “url selector”(注意: url 和 選擇器之間有一個空格)
• 傳遞方式: load() 方法的傳遞參數根據參數 data 來自動自定. 如果沒有參數傳遞, 采用 GET 方式傳遞, 否則采用 POST 方式
• 對于必須在加載完才能繼續的操作, load() 方法提供了回調函數, 該函數有三個參數: 代表請求返回內容的 data; 代表請求狀態的 textStatus 對象和 XMLHttpRequest 對象

$.get() (或$.post()) 方法

• $.get()方法使用 GET 方式來進行異步請求. 它的結構是: $.get(url[, data][, callback][, type]);

• $.get() 方法的回調函數只有兩個參數: data 代表返回的內容, 可以是 XML 文檔, JSON 文件, HTML 片段等; textstatus 代表請求狀態, 其值可能為: succuss, error, notmodify, timeout 4 種.
• $.get() 和 $.post() 方法時 jQuery 中的全局函數, 而 find() 等方法都是對 jQuery 對象進行操作的方法

序列化元素

• jQuery 為準備 “發送到服務器的 key/value 數據” 提供了一個簡化的方法: serialize(). 該方法作用于一個 jQuery 對象, 能將 DOM 元素內容序列化為字符串, 用于 Ajax 請求.
  

• 使用 serialize() 方法可以自動完成對參數的 url 編碼

• 因為該方法作用于 jQuery 對象, 所以不光只要表單能使用, 其它選擇器選取的元素也能使用它.

演示：驗證日期

日期驗證的關鍵：

• Java 正則表達式類： java.util.regex.Pattern
• JAVA日期驗證 正則表達式,包括潤二月：

總結

以上是生活随笔為你收集整理的尚硅谷_Ajax_学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。