第四天 進入AJAX學習
Ajax(Asynchronous JavaScript and XML)使用腳本操縱HTTP的Web應用架構。
jQuery對Ajax的操作進行了封裝。常用方法如下。
|
Load()方法 |
load()可以遠程載入HTML並插入到DOM中。結構爲： load(url [,data] [,callback]) · url(String):服務端資源的url。 · data(Obejct):發送到服務器的key/value數據 · callback(Function):請求完成時(無論成功或失敗)的回調函數，在響應數據已經加載到包裝集元素之後被調用。傳入這個函數的參數是響應文本、狀態碼、以及xhr實例。 |
|
get()方法
|
.get()使用GET進行異步請求。服務器的狀態和應用的模型數據不受GET操作的影響。無論進行多少次GET操作，返回的結果是完全一致的。 $.get()結構爲： $.get(url [, data] [, callback] [, type]) $.get()參數說明： · url(String):請求的服務器端資源的url · data(Object):以key/value的形式構造查詢字符串追加到url · callback(Function):在請求成功(success)時被調用。將請求結果和狀態傳遞給該方法。 · type(String):服務器端返回內容的格式。 · GET請求會將參數跟在url後進行傳遞，GET對傳輸的數據大小有限制(通常不大於2kb)，GET方式請求的數據會被瀏覽器緩存，這種情況可能帶來安全問題。 |
|
post()方法
|
.post()發送到服務器的數據可以用來修改應用的模型狀態。例如，可以添加或刪除信息。 · POST請求則作爲HTTP消息的實體內容發送給Web服務器，使用POST方式傳遞的數據量比GET大得多(理論上不受限制)
|
|
getScript()方法
|
$.getScript()用來加載.js文件，與加載一個HTML片段一樣，js文件會自動執行。
|
|
getJson()方法 |
getJSON()用於加載JSON文件，用法與getScript()相同。
|
|
$.ajax()方法 |
$.ajax()是jquery最底層的實現。 $.ajax(options) 這個方法只包含了1個參數,這個參數裏面包含了$.ajax()所需要的請求設置以及回調函數，參數以key/value形式存在。 $.ajax()參數說明： · url(String):發送請求地址。 · type(String):請求方式(POST或GET)，默認爲GET。其他HTTP請求方法如PUT、DELETE，僅部分瀏覽器支持。 · data(Object或String):發送到服務器的數據。如果不是字符串，將自動轉換爲字符串格式。GET請求中將附加在url後。對象必須是key/value格式，例如{id:"xxyh", password:"123456"}轉換爲&id=xxyh&password=123456。如果是數組，將自動爲不同值對應同一個名稱。例如{name:["xxyh","dudu"]}轉換：&name=xxyh&name=dudu。 · dataType(String):預期服務器返回的數據類型。如果不指定，jquery將根據HTTP包MINE信息返回responseXML或responseText,並作爲回調函數參數傳遞。可用類型： o xml:返回XML文檔，可用jquery處理 o html:返回純文本HTML信息，包含的script標籤會插入DOM時執行。 o script:返回純文本JavaScript代碼。如果沒有設置cache參數，不會自動緩存結果。在遠程請求時(不在同一個域下)，所有POST請求都將轉爲GET請求。 o json:返回JSON數據。 o jsonp:JSONP格式。使用JSONP形式調用函數時，例如myurl?callback=?,jquery將自動替換後一個“?”爲正確的函數名，以執行回調函數。 o text:返回純文本字符串。 complete(Function):請求完成後回調函數(請求成功或失敗後均調用)。 參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。 function(XMLHttpRequest,textStatus){ this; // 調用本次Ajax請求時傳遞的options參數} success(Function):請求成功回調函數。有2個參數： 參數：由服務器返回，並根據dataType參數進行處理後的數據和描述狀態的字符串。 function(data, textStatus) { // data 可能是xmlDoc,jsonObj,html,text等 this; // 調用本次Ajax請求時傳遞的options參數} error(Function):請求失敗時被調用的函數。這個函數有3個參數，即XMLHttpRequest對象、錯誤信息和捕獲的錯誤對象 function(XMLHttpRequest, textStatus, errorThrown){ // 通常情況下textStatus和errorThrown只有一個包含信息 this; // 調用本次Ajax請求時傳遞的options參數} contentType(String):當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。 jsonp(String):在一個jsonp請求中重寫回調函數的名字。用來替代在“callback=?”這種GET或POST請求中URL參數裏的“callback”部分，例如{jsonp:'onJsonPLoad'}會導致將“onJsonPLoad=?”傳給服務器。
|
|
AJAX代碼調用示例： $.ajax()方式：（dataType：xml） $.ajax({
$.ajax()方式：（dataType：html） $.ajax({
$.ajax()方式：（dataType：script） $.ajax({
$.ajax()方式：（dataType：json） $.ajax({ |
|