尚硅谷_Ajax_学习笔记
什么是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_学习笔记的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 尚硅谷_jQuery_学习笔记
- 下一篇: Github 完整学习教程