jQuery之Ajax
轉載鏈接：http://cargoj.iteye.com/blog/1008047
1 . jQuery幫助之Ajax請求（一）jQuery.ajax(options)
2 . jQuery幫助之Ajax請求（二）jQuery.get(url,[data],[callback]
3 . jQuery幫助之Ajax請求（三）jQuery.getJSON
4 . jQuery幫助之Ajax請求（四）jQuery.getScript(url,[callback])
5 . jQuery幫助之Ajax請求（五）jQuery.post
6 . jQuery幫助之Ajax請求（六）load(url,[data],[callback])
7 . jQuery幫助之Ajax其它（一）jQuery.ajaxSetup(options)
8 . jQuery幫助之Ajax其它（二）serialize()
9 . jQuery幫助之Ajax其它（三）serializeArray()
?
1 . jQuery幫助之Ajax請求（一）jQuery.ajax(options)
引自:http://www.flywe.net/article/javascript/jQuery_ajax.html
?????????????jQuery.ajax(options)
??????通過 HTTP 請求加載遠程數據。
??????jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。
??????$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該對象，但特殊情況下可用于手動終止請求。
??????$.ajax() 只有一個參數：參數 key/value 對象，包含各配置及回調函數信息。詳細參數選項見下。
??????注意： 如果你指定了 dataType 選項，請確保服務器返回正確的 MIME 信息，(如 xml 返回 "text/xml")。錯誤的 MIME 類型可能導致不可預知的錯誤。見Specifying the Data Type for AJAX Requests 。
??????注意：如果dataType設置為"script"，那么所有的遠程(不在同一域名下)的POST請求都將轉化為GET請求。(因為將使用DOM的script標簽來加載)
??????jQuery 1.2 中，您可以跨域加載 JSON 數據，使用時需將數據類型設置為 JSONP。使用JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。數據類型設置為 "jsonp" 時，jQuery 將自動調用回調函數。
??????返回值：XMLHttpRequest
??????參數：options (可選) : AJAX 請求設置。所有選項都是可選的。
??????選項：
??????async (Boolean) : (默認: true) 默認設置下，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為 false。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。
??????beforeSend (Function) : 發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數。Ajax 事件。?
?程序代碼
function (XMLHttpRequest) {????this; // 調用本次AJAX請求時傳遞的options參數
}
??????cache (Boolean) : (默認: true,dataType為script時默認為false) jQuery 1.2 新功能，設置為 false 將不會從瀏覽器緩存中加載請求信息。
??????complete (Function) : 請求完成后回調函數 (請求成功或失敗時均調用)。參數： XMLHttpRequest 對象和一個描述成功請求類型的字符串。Ajax 事件。
????this; // 調用本次AJAX請求時傳遞的options參數
}??
??????contentType (String) : (默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數應用場合。
??????data (Object,String) : 發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。
??????dataFilter (Function) :給Ajax返回的原始數據的進行預處理的函數。提供data和type兩個參數：data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
????// 對Ajax返回的原始數據進行預處理
????return data // 返回處理后的數據
}
??????dataType (String) : 預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作為回調函數參數傳遞，可用值：
"html": 返回純文本 HTML 信息；包含 script 元素。
"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了"cache"參數
"json": 返回 JSON 數據 。
"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。
"text": 返回純文本字符串
??????error (Function) : (默認: 自動判斷 (xml 或 html)) 請求失敗時調用時間。參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的錯誤對象。Ajax 事件。
????// 通常 textStatus 和 errorThrown 之中
????// 只有一個會包含信息
????this; // 調用本次AJAX請求時傳遞的options參數
}??
??????global (Boolean) : (默認: true) 是否觸發全局 AJAX 事件。設置為 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的Ajax 事件。
??????ifModified (Boolean) : (默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。
??????jsonp (String) : 在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，比如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。
??????password (String) : 用于響應HTTP訪問認證請求的密碼。
??????processData (Boolean) : (默認: true) 默認情況下，發送的數據將被轉換為對象(技術上講并非字符串) 以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。
??????scriptCharset (String) : 只有當請求時dataType為"jsonp"或"script"，并且type是"GET"才會用于強制修改charset。通常在本地和遠程的內容編碼不同時使用。
??????success (Function) : 請求成功后回調函數。參數：服務器返回數據，數據格式。Ajax 事件。
????// data 可能是 xmlDoc, jsonObj, html, text, 等等...
????this; // 調用本次AJAX請求時傳遞的options參數
}
??????timeout (Number) : 設置請求超時時間（毫秒）。此設置將覆蓋全局設置。
??????type (String) : (默認: "GET") 請求方式 ("POST" 或 "GET")， 默認為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 Delete 也可以使用，但僅部分瀏覽器支持。
??????url (String) : (默認: 當前頁地址) 發送請求的地址。
??????username (String) : 用于響應HTTP訪問認證請求的用戶名。
??????示例：
??????加載并執行一個 JS 文件。
??????jQuery代碼：
??type: "GET",
??url: "test.js",
??dataType: "script"
});??
??????保存數據到服務器，成功時顯示信息。
??????jQuery代碼：
?? type: "POST",
?? url: "some.php",
?? data: "name=John&location=Boston",
?? success: function(msg){
???? alert( "Data Saved: " + msg );
?? }
});
??????裝入一個 HTML 網頁最新版本。
??????jQuery代碼：
??url: "test.html",
??cache: false,
??success: function(html){
????$("#results").append(html);
??}
});
??????同步加載數據。發送請求時鎖住瀏覽器。需要鎖定用戶交互操作時使用同步方式。
??????jQuery代碼：
??url: "some.php",
??async: false
}).responseText;
??????發送 XML 數據至服務器。設置 processData 選項為 false，防止自動轉換數據格式。
??????jQuery代碼：
$.ajax({
?? url: "page.php",
?? processData: false,
?? data: xmlDocument,
?? success: handleResponse
});
2 . jQuery幫助之Ajax請求（二）jQuery.get(url,[data],[callback]
?
?jQuery.get(url,[data],[callback])
??????通過遠程 HTTP GET 請求載入信息。
??????這是一個簡單的 GET 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
??????返回值：XMLHttpRequest
??????參數：
??????url (String) : 待載入頁面的URL地址。
??????data (Map) : (可選)待發送 Key/value 參數。
??????callback (Function) : (可選)載入成功時回調函數。
??????示例：
??????請求 test.php 網頁，忽略返回值。
??????jQuery代碼：
??????請求 test.php 網頁，傳送2個參數，忽略返回值。
??????jQuery代碼：
??????顯示 test.php 返回值(HTML 或 XML，取決于返回值)。
??????jQuery代碼：
??alert("Data Loaded: " + data);
});
??????顯示 test.cgi 返回值(HTML 或 XML，取決于返回值)，添加一組請求參數。
??????jQuery代碼：
??function(data){
????alert("Data Loaded: " + data);
??});
3 . jQuery幫助之Ajax請求（三）jQuery.getJSON
?
?jQuery.getJSON(url,[data],[callback])
??????通過 HTTP GET 請求載入 JSON 數據。
??????在 jQuery 1.2 中，您可以通過使用JSONP 形式的回調函數來加載其他網域的JSON數據，如 "myurl?callback=?"。jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。
??????注意：此行以后的代碼將在這個回調函數執行前執行。
??????返回值：XMLHttpRequest
??????參數：
??????url (String) : 發送請求地址。
??????data (Map) : (可選)待發送 Key/value 參數。
??????callback (Function) : (可選)載入成功時回調函數。
??????示例：
??????從 Flickr JSONP API 載入 4 張最新的關于貓的圖片。
??????HTML 代碼：
??????jQuery代碼：
function(data){
??$.each(data.items, function(i,item){
????$("<img/>").attr("src",
item.media.m).appendTo("#images");
????if ( i == 3 ) return false;
??});
});
??????從 test.js 載入 JSON 數據并顯示 JSON 數據中一個 name 字段數據。
??????jQuery代碼：
??alert("JSON Data: " + json.users[3].name);
});
??????從 test.js 載入 JSON 數據，附加參數，顯示 JSON 數據中一個 name 字段數據。
??????jQuery代碼：
??alert("JSON Data: " + json.users[3].name);
});
4 . jQuery幫助之Ajax請求（四）jQuery.getScript(url,[callback])
?
??jQuery.getScript(url,[callback])
??????通過 HTTP GET 請求載入并執行一個 JavaScript 文件。
??????jQuery 1.2 版本之前，getScript 只能調用同域 JS 文件。 1.2中，您可以跨域調用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步執行腳本。如果通過 getScript 加入腳本，請加入延時函數。
??????返回值：XMLHttpRequest
??????參數：
??????url (String) : 待載入 JS 文件地址。
??????callback (Function) : (可選)成功載入后回調函數。
??????示例：
??????載入 jQuery 官方顏色動畫插件 成功后綁定顏色變化動畫。
??????HTML 代碼：
<div class="block"></div>
??????jQuery代碼：
function(){
??$("#go").click(function(){
????$(".block").animate( { backgroundColor: 'pink' }, 1000)
??????.animate( { backgroundColor: 'blue' }, 1000);
??});
});
??????加載并執行 test.js。
??????jQuery代碼：
??????加載并執行 test.js ，成功后顯示信息。
??????jQuery代碼：
??alert("Script loaded and executed.");
});
5 . jQuery幫助之Ajax請求（五）jQuery.post
?
?jQuery.post( url, [data], [callback], [type] )
??????通過遠程 HTTP POST 請求載入信息，使用POST方式來進行異步請求。
??????這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
??????返回值：XMLHttpRequest
??????參數：
??????url (String) : 發送請求的URL地址。
??????data (Map) : (可選)要發送給服務器的數據，以 Key/value 的鍵值對形式表示。
??????callback (Function) : (可選) 載入成功時回調函數(只有當Response的返回狀態是success才是調用該方法)。
?????? type : (String) : (可選)官方的說明是：Type of data to be sent。其實應該為客戶端請求的類型(JSON,XML,等等)
??????示例：
??????Ajax.aspx：
Response.Write("{result: '" + Request["Name"] + ",你好！(這消息來自服務器)'}");
jQuery
??????代碼：
????????function (data, textStatus){
????????????// data 可以是 xmlDoc, jsonObj, html, text, 等等.
????????????//this; // 這個Ajax請求的選項配置信息，請參考jQuery.get()說到的this
????????????alert(data.result);
????????}, "json");
這里設置了請求的格式為"json"：
如果你設置了請求的格式為"json"，此時你沒有設置Response回來的ContentType 為：Response.ContentType = "application/json"; 那么你將無法捕捉到返回的數據。
注意一下，alert(data.result); 由于設置了Accept報頭為“json”，這里返回的data就是一個對象，并不需要用eval()來轉換為對象。
6 . jQuery幫助之Ajax請求（六）load(url,[data],[callback])
?
?load(url,[data],[callback])
??????載入遠程 HTML 文件代碼并插入至 DOM 中。
??????默認使用 GET 方式 - 傳遞附加參數時自動轉換為 POST 方式。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector"。請查看示例。
??????返回值：jQuery
??????參數：
??????url (String) : 待裝入 HTML 網頁網址。
??????data (Map) : (可選)發送至服務器的 key/value 數據。
??????callback (Callback) : (可選) 載入成功時回調函數。
??????示例：
??????加載文章側邊欄導航部分至一個無序列表。
??????HTML 代碼:
??????
<ul id="links"></ul>
??????jQuery 代碼:
??????
??????加載 feeds.html 文件內容。
??????jQuery 代碼:
??????
??????同上，但是以 POST 形式發送附加參數并在成功時顯示信息。
?????? jQuery 代碼:
??????
?? alert("The last 25 entries in the feed have been loaded");
});
7 . jQuery幫助之Ajax其它（一）jQuery.ajaxSetup(options)
?
引自:http://www.flywe.net/article/javascript/%20jQuery_ajaxSetup.html
?jQuery.ajaxSetup(options)
??????設置全局 AJAX 默認選項。
??????參數見 '$.ajax' 說明。
??????返回值：jQuery
??????參數：
??????options (可選) :??選項設置。所有設置項均為可選設置。
??????示例：
??????設置 AJAX 請求默認地址為 "/xmlhttp/"，禁止觸發全局 AJAX 事件，用 POST 代替默認 GET 方法。其后的 AJAX 請求不再設置任何選項參數。
??????jQuery 代碼:
??????
??url: "/xmlhttp/",
??global: false,
??type: "POST"
});
$.ajax({ data: myData });
8 . jQuery幫助之Ajax其它（二）serialize()
?
serialize()
??????序列表表格內容為字符串。
??????返回值：jQuery
??????示例：
??????序列表表格內容為字符串，用于 Ajax 請求。
?
????? jQuery 代碼:
?????? $("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
9 . jQuery幫助之Ajax其它（三）serializeArray() serializeArray()
??????序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 數據結構數據。
??????返回值：jQuery
??????示例：
??????取得表單內容并插入到網頁中。
var fields = $("select, :radio").serializeArray(); jQuery.each( fields, function(i, field){$("#results").append(field.value + " "); });
總結
以上是生活随笔為你收集整理的jQuery之Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： grep 显示包含两个关键字_linux
- 下一篇： java激励_激励干个人java的不足之