Java程序員之JS(一) 之 JQuery.ajax
背景：緊着如今項目的須要，先從JQuery.ajax出發，主要需求是經過 js 調用Java 代碼，從而適應如今的項目。php
先從幾個概念開始講解：html
一. 什麼是Deferred python
Deferred 對象是由.Deferred構造的， .Deferred被實現爲簡單工廠模式。它是用來解決JS中的異步編程，遵循 Common Promise/A規範，實現此規範的還有when.js 和 dojo. jquery
Deferred 對象在 JQuery 1.5被引入，用來解決 Ajax 異步優化問題，正是因爲 Deferred 的 引入，Ajax 相關代碼可讀性大大提升，替代了回調函數的概念。ajax
詳細講解請查看轉載文: 讀jQuery之二十（Deferred對象）--(轉)正則表達式
二. 什麼是 Promise (中文「承諾」) 編程
Promise 是規範； Promise 規範的代碼只有100多行，實際 Promise 只有100行代碼；現現在高版本的瀏覽器已經原生實現了 Promise。json
下面是 Promise/A++規範：api
1. 一個Promise可能有三種狀態：等待(pengding)、已完成(fulled)、已拒絕(rejected);跨域
2. 一個Promise的狀態只可能從「等待」轉到「完成」態或者「拒絕」態，不能逆向轉化，同時「完成」態和「拒絕」態不能相互轉換；
3. promise 必須實現 then 方法(能夠說then就是promise的核心)，並且then 必須返回一個promise, 同一個promise 的then能夠調用屢次，而且毀掉的執行順序和他們被調用的順序一致；
4. then 方法接受兩個參數，第一個參數是成功時的毀掉，在promise由「等待」態轉換到「完成」態時調用，另外一個是失敗時的回調，在promise由「等待」態轉換到「拒絕」態時調用。同時，then能夠接受另外一個 promise 傳入，也接受一個「類then」的對象或方法，即thenable對象；
詳細講解請查看轉載文: JavaScript Promise啓示錄--（轉）
三. jQuery.ajax() 函數詳解
jQuery.ajax() 用於經過後臺HTTP請求加載遠程數據；
jQuery.ajax() 函數是 jQuery封裝的 AJAX技術，經過該函數咱們無需刷新當前頁面便可獲取遠程服務器上的數據；
jQuery.ajax() 函數屬於全局的Ajax 函數(也能夠理解爲靜態函數)；
語法
jQuery 1.0 新增該靜態函數。jQuery.ajax()函數有如下兩種用法：
用法一：jQuery.ajax( [ settings ] ] )
用法二：jQuery.ajax( url [, settings ] ] )。jQuery 1.5 新增支持該用法
用法二是用法一的變體，它只是將參數對象settings中的可選屬性url單獨提取出來做爲一個獨立的參數。
參數
url：String類型 URL請求字符串。
settings： 可選/Object類型一個Object對象，其中的每一個屬性用來指定發送請求所需的額外參數設置。
參數settings是一個對象，jQuery.ajax()能夠識別該對象的如下屬性(它們都是可選的)：
| 參數 | 類型 | 描述 |
| accepts | Object | 默認值：取決於dataType 屬性； 說明：發送的內容類型請求頭，用於告訴服務器——瀏覽器能夠接收服務器返回何種類型的響應; |
| async | Boolean | 默認值：true； 說明：指示是不是異步請求。同步請求將鎖定瀏覽器，直到獲取到遠程數據後才能執行其餘操做； |
| beforeSend | Function | 說明：指定在請求發送前須要執行的回調函數。該函數還有兩個參數：其一是jqXHR對象，其二是當前settings對象。這是一個Ajax事件，若是該函數返回false，將取消本次ajax請求。 |
| cache | Boolean | 默認值：true(dataType爲'script'或'jsonp'時，則默認爲false)； 說明：指示是否緩存URL請求。若是設爲false將強制瀏覽器不緩存當前URL請求。該參數只對HEAD、GET請求有效(POST請求自己就不會緩存)。 |
| complete | Function/Array |
說明：指定請求完成(不管成功或失敗)後須要執行的回調函數。該函數還有兩個參數：一個是jqXHR對象，一個是表示請求狀態的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。這是一個Ajax事件。從jQuery 1.5開始，該屬性值能夠是數組形式的多個函數，每一個函數都將被回調執行。 |
| contents | Object | 1.5新增；說明：一個以"{字符串:正則表達式}"配對的對象，用來肯定jQuery將如何解析響應，給定其內容類型； |
| contentType | String | 默認值：'application/x-www-form-urlencoded; charset=UTF-8'。 說明：使用指定的內容編碼類型將數據發送給服務器。W3C的XMLHttpRequest規範規定charset始終是UTF-8，你若是將其改成其餘字符集，也沒法強制瀏覽器更改字符編碼。 |
| context | Object | 說明：用於設置Ajax相關回調函數的上下文對象(也就是函數內的this指針)。 |
| converters | Object | 1.5新增； 默認值：{'* text': window.String, 'text html': true, 'text json': jQuery.parseJSON, 'text xml': jQuery.parseXML}。 說明：一個數據類型轉換器。每一個轉換器的值都是一個函數，用於返回響應轉化後的值。 |
| crossDomain | Boolean | 1.5新增；默認值：同域請求爲false，跨域請求爲true； 說明：指示是不是跨域請求，若是你想在同一域中強制跨域請求(如JSONP形式)，請設置爲true。例如，這容許服務器端重定向到另外一個域。 |
| data | 任意類型 | 說明：發送到服務器的數據，它將被自動轉爲字符串類型。若是是GET請求，它將被附加到URL後面。 |
| dataFilter | Function | 說明：指定處理響應的原始數據的回調函數。該函數還有兩個參數：其一表示響應的原始數據的字符串，其二是dataType屬性字符串。 |
| dataType | String |
默認值：jQuery智能猜想，猜想範圍(xml、 json、 script或html)； 說明：指定返回的數據類型。該屬性值能夠爲：
|
| error | Function/Array |
說明：指定請求失敗時執行的回調函數。該函數有3個參數：jqXHR對象、 請求狀態字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 錯誤信息字符串(響應狀態的文本描述部分，例如'Not Found'或'Internal Server Error')。這是一個Ajax事件。跨域腳本和跨域JSONP請求不會調用該函數。 |
| global | Boolean | 默認值：true。 |
| headers | Object | 默認值：{}; 說明：以對象形式指定附加的請求頭信息。請求頭X-Requested-With: XMLHttpRequest將始終被添加，固然你也能夠在此處修改默認的XMLHttpRequest值。headers中的值能夠覆蓋beforeSend回調函數中設置的請求頭(意即beforeSend先被調用)。 1 $.ajax({ 2 url: "my.php" , 3 headers: { 4 "Referer": "http://www.365mini.com" // 有些瀏覽器不容許修改該請求頭
5 ,"User-Agent": "newLine" // 有些瀏覽器不容許修改該請求頭
6 ,"X-Power": "newLine"
7 ,"Accept-Language": "en-US"
8 } 9 });
|
| ifModified | Boolean | 默認值：false; 說明：容許當前請求僅在服務器數據改變時獲取新數據(如未更改，瀏覽器從緩存中獲取數據)。它使用HTTP頭信息Last-Modified來判斷。從jQuery 1.4開始，他也會檢查服務器指定的'etag'來肯定數據是否已被修改。 |
| isLocal | Boolean | 1.5.1新增；默認值：取決於當前的位置協議。 |
| jsonp | String | 說明：重寫JSONP請求的回調函數名稱。該值用於替代"url?callback=?"中的"callback"部分。 |
| jsonpCallback | String/Function |
說明：爲JSONP請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。 從jQuery 1.5開始，你也能夠指定一個函數來返回所需的函數名稱。 |
| mimeType | String | 1.5.1新增；說明：一個 mime 類型，用於覆蓋 XHR 的 mime 類型； |
| password | String | 說明：用於響應 HTTP 訪問認證請求的密碼； |
| processData | Boolean | 默認值：true; 說明：默認狀況下，經過data屬性傳遞進來的數據，若是是一個對象(技術上講，只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。若是要發送 DOM樹信息或其它不但願轉換的信息，請設置爲false。 |
| scriptCharset | String | 說明：設置該請求加載的腳本文件的字符集。只有當請求時dataType爲"jsonp"或"script"，而且type是"GET"纔會用於強制修改charset。這至關於設置<script>標籤的charset屬性。一般只在當前頁面和遠程數據的內容編碼不一樣時使用。 |
| statusCode | Object | 1.5新增； 默認值：{}； 說明：一組數值的HTTP代碼和函數構成的對象，當響應時調用了相應的代碼。例如： 1 $.ajax({ 2 url: a_not_found_url , 3 statusCode: { // 當響應對應的狀態碼時，執行對應的回調函數
4 404: function() { 5 alert( "找不到頁面" ); 6 }, 7 200: function(){ 8 alert("請求成功"); 9 } 10 } 11 });
|
| success | Function/Array | 說明：指定請求成功後執行的回調函數。該函數有3個參數：請求返回的數據、響應狀態字符串、jqXHR對象。從jQuery 1.5開始，該屬性值能夠是數組形式的多個函數，每一個函數都將被回調執行 |
| timeout | Number | 說明：設置請求超時的毫秒值； |
| traditional | Boolean | 說明：若是你但願使用傳統方式來序列化參數，將該屬性設爲true。 |
| type | String | 默認值："GET"; 說明：請求類型，能夠爲'POST'或'GET'。注意：你也能夠在此處使用諸如'PUT'、'DELETE'等其餘請求類型，但它們不被全部瀏覽器支持； |
| url | String | 默認值：當前目標URL；說明：請求的目標URL； |
| username | String | 說明：用於響應HTTP訪問認證請求的用戶名 |
| xhr | Function | 默認值：在IE下是ActiveXObject(若是可用)，在其餘瀏覽器中是XMLHttpRequest。 |
| xhrFields | Object | 1.5.1新增；說明：一個具備多個"字段名稱-字段值"對的對象，用於對本地XHR對象進行設置。一對「文件名-文件值」在本機設置XHR對象。例如，若是須要，你能夠用它來爲跨域請求設置XHR對象的withCredentials屬性爲true。
1 $.ajax({ 2 url: a_cross_domain_url, 3 xhrFields: { // 將XHR對象的withCredentials設爲true
4 withCredentials: true
5 } 6 });
注意： 1、若是你的全部AJAX請求都須要設置settings中某些參數，你可使用jQuery.ajaxSetup()函數進行全局設置，而無需在每次執行jQuery.ajax()時分別設置。 2、在jQuery 1.4(含)以前，選項參數complete、succes、error等Ajax事件的回調函數的第3個參數不是通過jQuery封裝的jqXHR對象，而是原生的XMLHttpRequest對象。
|
返回值
jQuery.ajax()函數的返回值爲jqXHR類型，返回當前該請求的jqXHR對象(jQuery 1.4及之前版本返回的是原生的XMLHttpRequest對象)。
事例 & 說明
若是沒有給jQuery.ajax()指定任何參數，則默認請求當前頁面，而且不對返回數據進行處理。
jQuery.ajax()函數的settings對象中，經常使用的屬性有：url、type、async、data、dataType、success、error、complete、beforeSend、timeout等。
請參考下面這段初始HTML代碼：
1 <div id="content"></div>
如下是與函數相關的jQuery示例代碼，以演示函數的具體用法：jQuery.ajax()jQuery.ajax()
$.ajax({ url: "jquery_ajax.php" , type: "POST" , data: "name=codeplayer&age=18" , success: function( data, textStatus, jqXHR ){ // data 是返回的數據 // textStatus 可能爲"success"、"notmodified"等 // jqXHR 是通過jQuery封裝的XMLHttpRequest對象 alert("返回的數據" + data); } }); $.ajax({ url: "jquery_ajax.php?page=1&id=3" , type: "POST" // jQuery會自動將對象數據轉換爲 "name=codeplayer&age=18&uid=1&uid=2&uid=3" , data: { name:"codeplayer", age:18, uid: [1, 2, 3] } // 請求成功時執行 , success: function( data, textStatus, jqXHR ){ alert("返回的數據" + data); } // 請求失敗時執行 , error: function(jqXHR, textStatus, errorMsg){ // jqXHR 是通過jQuery封裝的XMLHttpRequest對象 // textStatus 可能爲： null、"timeout"、"error"、"abort"或"parsererror" // errorMsg 可能爲： "Not Found"、"Internal Server Error"等 alert("請求失敗：" + errorMsg); } }); // 將url單獨提取出來做爲第一個參數(jQuery 1.5+才支持) $.ajax("jquery_ajax.php?action=type&id=3", { dataType: "json" // 返回JSON格式的數據 , success: function( data, textStatus, jqXHR ){ // 假設返回的字符串數據爲{ "name": "CodePlayer", age: 20 } // jQuery已幫咱們將該JSON字符串轉換爲對應的JS對象，能夠直接使用 alert( data.name ); // CodePlayer } }); $.ajax( { // 注意這裏有個參數callback=? url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21" , async: false // 同步請求，發送請求後瀏覽器將被鎖定，只有等到該請求完成(不管成功或失敗)後，用戶才能操做，js代碼纔會繼續執行 , dataType: "jsonp" // 返回JSON格式的數據 , success: function( data, textStatus, jqXHR ){ // 假設返回的字符串數據爲{ "site_name": "CodePlayer", "site_desc": "專一於編程開發技術分享" } // jQuery已幫咱們將該JSON字符串轉換爲對應的JS對象，能夠直接使用 alert( data.site_desc ); // 專一於編程開發技術分享 } }); $.ajax( { // 加載指定的js文件到當前文檔中 url: "http://code.jquery.com/jquery-1.8.3.min.js" , dataType: "script" });
以上jQuery.ajax()部分參考：http://www.365mini.com/page/jquery_ajax.htm
四. 將 Deferred 和 Promise 運用在jQuery.ajax()應用實例
jQuery 發送的全部 Ajax 請求，內部都會經過 $.ajax() 函數來實現。一般沒有必要直接調用這個函數，可使用已經封裝好的幾個簡便方法，如 .load()、$.get() 、getJSON()、getScript()和post() 。若是你須要用到那些不經常使用的選項，那麼， $.ajax()使用起來更靈活。
概念說明
jqXHR 對象：從 jQuery 1.5開始，$.ajax() 返回 jqXHR 對象，改對象是瀏覽器原生的 XMLHttpRequert 對象的一個超集。例如他包含 reponseText 和 reponseXML 屬性，以及一個 getResponseHeader() 方法。當傳輸機制不是XMLHttpRequeet時 (例如，一個JSONP請求腳本，返回一個腳本 tag 時)，jqXHR 對象儘量的模擬原生的XHR功能。
從 jQuery 1.5 開始， $.ajax() 返回的 jqXHR 對象實現了 Promise接口，使它擁有了Promise 的全部屬性，方法和行爲，爲了讓回調函數的名稱統一，便於在 $.ajax() 中使用。jqXHR 也提供 .error()、.success() 和 .complete() 方法。這些方法都帶有一個參數，改參數是一個函數，此函數在 $.ajax() 請求結束時被調用，而且這個函數接收的參數，與調用 $.ajax() 函數時的參數是一致的。這將容許你在一次請求時，對多個回調函數進行賦值，甚至容許你在請求已經完成後，對回調函數進行賦值(若是該請求已經完成，則回調函數會被馬上調用).
- jqXHR.done(function(data, textStatus, jqXHR){});
一個可供選擇的 success 回調選項的構造函數， .done() 方法取代了jqXHR.success()方法。
- jqXHR.fail(function(jqXHR, textStatus, errorThrown){});
一種可供選擇的 error 回調選項的構造函數， .fail() 方法取代了.error()方法。
- jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThown){});
一種可供選擇的 complete 回調選項的構造函數， .always() 方法取代 .complete()方法。
在響應一個成功的請求後，改函數的參數和.done的參數是相同的：data, textStatus, 和 jqXHR 對象。對於失敗的請求，參數和 .fail() 的參數是相同的：jqXHR對象，textStatus, 和 errorThown。
- jqXHR.then(function(data, textStatus, jqXHR){}, function(jqXHR, textStatus, errorThown){})；
包含了 .done() 和 .fail() 方法的功能，(從jQuery1.8開始)容許底層被操做。
推薦使用的注意事項：jqXHR.success(), jqXHR.error() 和 jqXHR.complete() 回調從 jQuery 1.8開始被棄用。他們講最終被取消，您的代碼應作好準備，使用 jqXHR.done()、 jqXHR.fail() 和jqXHR.always() 代替。
1 // Assign handlers immediately after making the request, 2 // and remember the jqxhr object for this request 3 var jqxhr = $.ajax( "example.php" ) 4 .done(function() { alert("success"); }) 5 .fail(function() { alert("error"); }) 6 .always(function() { alert("complete"); }); 7 8 // perform other work here ... 9 10 // Set another completion function for the request above 11 jqxhr.always(function() { alert("second complete"); });
this 在全部的回調中的引用，是這個對象在傳遞給.ajax的設置中上下文，若是沒有指定 context (上下文)，this 引用的是 Ajax 設置的自己。
爲了向後兼容 XMLHttpRequest， 一jqXHR 對象將公開下列屬性和方法：
- readyState
- status
- statusText
- responseXML and/or responseText 當底層的請求分別做出 XML和/或文本響應
- setRequestHeader(name, value) 從標準出發，經過替換舊的值爲新的值，而不是替換的新值到舊值
- getAllResponseHeaders()
- getReponseHeader()
- abort()
事例 & 說明
1). load(url, [data], [callback]) -- 返回值 jQuery：載入遠程HTML文件代碼並插入至 DOM 中；
- url: 待裝入 HTML 網頁網址(必填參數)；
- data: 發送至服務器的 key/value數據(在jquery 1.3中也能夠接受一個字符串)(可選參數)；
- callback: 載入成功時回調函數(可選參數)；
默認狀況使用 GET 方式 - 傳遞附加參數時自動轉換爲 POST 方式。
1 //一個參數 默認爲"GET"方式 2 $("#links").load("/Main_Page #p-Getting-Started li"); 3 4 //data有數據以後，變爲"SET"方式 5 $("#feeds").load("feeds.php", {limit: 25}, function(){ 6 alert("The last 25 entries in the feed have been loaded"); 7 });
2). jQuery.get(url, [data], [callback], [type]) -- 返回值XMLHttpRequest: 經過遠程 HTTP GET請求載入信息。
- URL: 待載入頁面的URL地址(必填參數)；
- data: 待發送 key/value 參數(可選參數)；
- callback: 載入成功時回調函數(可選參數)；
- type: 返回內容格式， xml、html、script、json、text、_default(可選參數)。
這是一個簡單的get 請求功能以取代複雜 $.ajax()。請求成功時可調用回調函數。若是須要在出錯時執行函數，則使用 $.ajax。
1 //一個參數(請求 text.php頁面, 忽略返回值) 2 $.get("test.php"); 3 4 //兩個參數(請求 text.php頁面, 忽略返回值) 5 $.get("test.php", { name: "John", time: "2pm" } ); 6 7 $.get("test.php", function(data){ 8 alert("Data Loaded: " + data); 9 }); 10 11 //三個參數(顯示 test.cgi 返回值(HTML 或 XML，取決於返回值)，添加一組請求參數) 12 $.get("test.cgi", { name: "John", time: "2pm" }, 13 function(data){ 14 alert("Data Loaded: " + data); 15 });
3). jQuery.getJSON(url, [data], [callback]) -- 返回XMLHttpRequest: 經過HTTP Get 載入Json 數據。
- url: 發送請求地址(必填參數)；
- data: 待發送 Key/value 參數(可選參數)；
- callback: 載入成功時回調函數(可選參數)；
在 jQuery 1.2 中，您能夠經過使用JSONP形式的回調函數來加載其餘網域的JSON數據，如 "myurl?callback=?"。jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。 注意：此行之後的代碼將在這個回調函數執行前執行。
-
1 //從 Flickr JSONP API 載入 4 張最新的關於貓的圖片。 2 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ 3 $.each(data.items, function(i,item){ 4 $("<img/>").attr("src", item.media.m).appendTo("#images"); 5 if ( i == 3 ) return false; 6 }); 7 }); 8 9 //從 test.js 載入 JSON 數據並顯示 JSON 數據中一個 name 字段數據 10 $.getJSON("test.js", function(json){ 11 alert("JSON Data: " + json.users[3].name); 12 }); 13 14 //從 test.js 載入 JSON 數據，附加參數，顯示 JSON 數據中一個 name 字段數據。 15 $.getJSON("test.js", { name: "John", time: "2pm" }, function(json){ 16 alert("JSON Data: " + json.users[3].name); 17 });
4). jQuery.getScript(url, [callback]) -- 返回XMLHttpRequest：經過 HTTP GET 請求載入並執行一個 JavaScript 文件。
- url: 待載入 JS 文件地址。
- callback: 成功載入後回調函數。
jQuery 1.2 版本以前，getScript 只能調用同域 JS 文件。 1.2中，您能夠跨域調用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局做用域中同步執行腳本。若是經過 getScript 加入腳本，請加入延時函數。
1 //載入 <a title="http://jquery.com/plugins/project/color" class="external text" href="http://jquery.com/plugins/project/color">jQuery 官方顏色動畫插件</a> 成功後綁定顏色變化動畫。 2 3 HTML 代碼: 4 <button id="go">» Run</button> 5 <div class="block"></div> 6 7 jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){ 8 $("#go").click(function(){ 9 $(".block").animate( { backgroundColor: 'pink' }, 1000) 10 .animate( { backgroundColor: 'blue' }, 1000); 11 }); 12 }); 13 14 15 //加載並執行 test.js 16 $.getScript("test.js"); 17 18 //加載並執行 test.js ，成功後顯示信息。 19 $.getScript("test.js", function(){ 20 alert("Script loaded and executed."); 21 });
5). jQuery.post(url, [data], [callback], [type]) -- 返回XMLHttpRequest：經過遠程 HTTP POST 請求載入信息。
- url:發送請求地址。
- data:待發送 Key/value 參數。
- callback:發送成功時回調函數。
- type:返回內容格式，xml, html, script, json, text, _default。
這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回調函數。若是須要在出錯時執行函數，請使用 $.ajax。
1 //請求 test.php 網頁，忽略返回值 2 $.post("test.php"); 3 4 //請求 test.php 頁面，並一塊兒發送一些額外的數據（同時仍然忽略返回值）： 5 $.post("test.php", { name: "John", time: "2pm" } ); 6 7 //向服務器傳遞數據數組（同時仍然忽略返回值）： 8 $.post("test.php", { 'choices[]': ["Jon", "Susan"] }); 9 10 //使用 ajax 請求發送表單數據： 11 $.post("test.php", $("#testform").serialize()); 12 13 //輸出來自請求頁面 test.php 的結果（HTML 或 XML，取決於所返回的內容）： 14 $.post("test.php", function(data){ 15 alert("Data Loaded: " + data); 16 }); 17 18 //向頁面 test.php 發送數據，並輸出結果（HTML 或 XML，取決於所返回的內容）： 19 $.post("test.php", { name: "John", time: "2pm" }, 20 function(data){ 21 alert("Data Loaded: " + data); 22 }); 23 24 //得到 test.php 頁面的內容，並存儲爲 XMLHttpResponse 對象，並經過 process() 這個 JavaScript 函數進行處理： 25 $.post("test.php", { name: "John", time: "2pm" }, 26 function(data){ 27 process(data); 28 }, "xml"); 29 30 31 //得到 test.php 頁面返回的 json 格式的內容: 32 $.post("test.php", { "func": "getNameAndTime" }, 33 function(data){ 34 alert(data.name); // John 35 console.log(data.time); // 2pm 36 }, "json");
6. jQuery.ajax(url,[settings]) -- 返回值XMLHttpRequest --經過 HTTP 請求加載遠程數據
jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 對象。大多數狀況下你無需直接操做該函數，除非你須要操做不經常使用的選項，以得到更多的靈活性。
最簡單的狀況下，$.ajax()能夠不帶任何參數直接使用。
注意，全部的選項均可以經過$.ajaxSetup()函數來全局設置。
1 //保存數據到服務器，成功時顯示信息。 2 $.ajax({ 3 method: "POST", 4 url: "some.php", 5 data: { name: "John", location: "Boston" } 6 }).done(function( msg ) { 7 alert( "Data Saved: " + msg ); 8 }); 9 10 //裝入一個 HTML 網頁最新版本。 11 $.ajax({ 12 url: "test.html", 13 cache: false 14 }).done(function( html ) { 15 $("#results").append(html); 16 }); 17 18 //發送 XML 數據至服務器。設置 processData 選項爲 false，防止自動轉換數據格式 19 var xmlDocument = [create xml document]; 20 var xmlRequest = $.ajax({ 21 url: "page.php", 22 processData: false, 23 data: xmlDocument 24 }); 25 26 xmlRequest.done(handleResponse); 27 28 //發送id做爲數據發送到服務器， 保存一些數據到服務器上， 並通一旦它的完成知用戶。 若是請求失敗，則提醒用戶。 29 var menuId = $("ul.nav").first().attr("id"); 30 var request = $.ajax({ 31 url: "script.php", 32 method: "POST", 33 data: {id : menuId}, 34 dataType: "html" 35 }); 36 37 request.done(function(msg) { 38 $("#log").html( msg ); 39 }); 40 41 request.fail(function(jqXHR, textStatus) { 42 alert( "Request failed: " + textStatus ); 43 }); 44 45 //載入並執行一個JavaScript文件. 46 $.ajax({ 47 method: "GET", 48 url: "test.js", 49 dataType: "script" 50 });
- 1. Java程序員談一談-----java程序員成長之路
- 2. Asp.Net+JQuery.Ajax之$.post
- 3. Java程序員之Spring(一) 入門
- 4. 程序員進階之一
- 5. 程序員的「非程序員」之路
- 6. 程序員之戀
- 7. 程序員之路
- 8. 程序員之禪
- 9. php程序員轉java程序員之痛
- 10. Java全棧程序員之09：IDEA+GitHub
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • Java 8 Stream 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Java程序員談一談-----java程序員成長之路
- 2. Asp.Net+JQuery.Ajax之$.post
- 3. Java程序員之Spring(一) 入門
- 4. 程序員進階之一
- 5. 程序員的「非程序員」之路
- 6. 程序員之戀
- 7. 程序員之路
- 8. 程序員之禪
- 9. php程序員轉java程序員之痛
- 10. Java全棧程序員之09：IDEA+GitHub