jQuery對象上面還定義了Ajax方法（$.ajax()），用來處理Ajax操作。調用該方法后，瀏覽器就會向服務器發出一個HTTP請求。

$.ajax方法

$.ajax()的用法主要有兩種。

$.ajax(url[, options]) $.ajax([options])

上面代碼中的url，指的是服務器網址，options則是一個對象參數，設置Ajax請求的具體參數。

$.ajax({async: true,url: '/url/to/json',type: 'GET',data : { id : 123 },dataType: 'json',timeout: 30000,success: successCallback,error: errorCallback,complete: completeCallback,statusCode: {404: handler404,500: handler500} })function successCallback(json) {$('<h1/>').text(json.title).appendTo('body'); }function errorCallback(xhr, status){console.log('出問題了！'); }function completeCallback(xhr, status){console.log('Ajax請求已結束。'); } View Code

上面代碼的對象參數有多個屬性，含義如下：

• accepts：將本機所能處理的數據類型，告訴服務器。
• async：該項默認為true，如果設為false，則表示發出的是同步請求。
• beforeSend：指定發出請求前，所要調用的函數，通常用來對發出的數據進行修改。
• cache：該項默認為true，如果設為false，則瀏覽器不緩存返回服務器返回的數據。注意，瀏覽器本身就不會緩存POST請求返回的數據，所以即使設為false，也只對HEAD和GET請求有效。
• complete：指定當HTTP請求結束時（請求成功或請求失敗的回調函數，此時已經運行完畢）的回調函數。不管請求成功或失敗，該回調函數都會執行。它的參數為發出請求的原始對象以及返回的狀態信息。
• contentType：發送到服務器的數據類型。　　//發送服務器的數據類型，請求返回的數據類型是由dataType指定！！！
• context：指定一個對象，作為所有Ajax相關的回調函數的this對象。
• crossDomain：該屬性設為true，將強制向相同域名發送一個跨域請求（比如JSONP）。
• data：向服務器發送的數據，如果使用GET方法，此項將轉為查詢字符串，附在網址的最后。
• dataType：向服務器請求的數據類型，可以設為text、html、script、json、jsonp和xml。
• error：請求失敗時的回調函數，函數參數為發出請求的原始對象以及返回的狀態信息。
• headers：指定HTTP請求的頭信息。
• ifModified：如果該屬性設為true，則只有當服務器端的內容與上次請求不一樣時，才會發出本次請求。
• jsonp：指定JSONP請求“callback=?”中的callback的名稱。
• jsonpCallback: 指定JSONP請求中回調函數的名稱。
• mimeType：指定HTTP請求的mime type。
• password：指定HTTP認證所需要的密碼。
• statusCode：值為一個對象，為服務器返回的狀態碼，指定特別的回調函數。
• success：請求成功時的回調函數，函數參數為服務器傳回的數據、狀態信息、發出請求的原始對象。
• timeout: 等待的最長毫秒數。如果過了這個時間，請求還沒有返回，則自動將請求狀態改為失敗。
• type：向服務器發送信息所使用的HTTP動詞，默認為GET，其他動詞有POST、PUT、DELETE。
• url：服務器端網址。這是唯一必需的一個屬性，其他屬性都可以省略。
• username：指定HTTP認證的用戶名。
• xhr：指定生成XMLHttpRequest對象時的回調函數。

$.ajax簡便寫法

ajax方法還有一些簡便寫法。

• $.get()：發出GET請求。
• $.getScript()：讀取一個JavaScript腳本文件并執行。
• $.getJSON()：發出GET請求，讀取一個JSON文件。
• $.post()：發出POST請求。
• $.fn.load()：讀取一個html文件，并將其放入當前元素之中。

一般來說，這些簡便方法依次接受三個參數：url、數據、成功時的回調函數。

?

（1）$.get()，$.post()

這兩個方法分別對應HTTP的GET方法和POST方法。

$.get('/data/people.html', function(html){$('#target').html(html); });$.post('/data/save', {name: 'Rebecca'}, function (resp){console.log(JSON.parse(resp)); }); View Code

?get方法和post方法的參數相同，第一個參數是服務器網址，該參數是必需的，其他參數都是可選的。第二個參數是發送給服務器的數據，第三個參數是操作成功后的回調函數。

?

（2）$.getJSON()

ajax方法的另一個簡便寫法是getJSON方法。當服務器端返回JSON格式的數據，可以用這個方法代替$.ajax方法。

$.getJSON('url/to/json', {'a': 1}, function(data){console.log(data); });

?

上面的代碼等同于下面的寫法。

（3）$.getScript()

$.getScript方法用于從服務器端加載一個腳本文件。

getScript的回調函數接受三個參數，分別是腳本文件的內容，HTTP響應的狀態信息和ajax對象實例。

$.getScript( "ajax/test.js", function (data, textStatus, jqxhr){console.log( data ); // test.js的內容console.log( textStatus ); // Successconsole.log( jqxhr.status ); // 200 });

?

getScript是ajax方法的簡便寫法，因此返回的是一個deferred對象，可以使用deferred接口。

jQuery.getScript("/path/to/myscript.js").done(function() {// ... }).fail(function() {// ... });

?

（4）$.fn.load()

$.fn.load不是jQuery的工具方法，而是定義在jQuery對象實例上的方法，用于獲取服務器端的HTML文件，將其放入當前元素。由于該方法也屬于ajax操作，所以放在這里一起講。

$('#newContent').load('/foo.html');

$.fn.load方法還可以指定一個選擇器，將遠程文件中匹配選擇器的部分，放入當前元素，并指定操作完成時的回調函數。

$('#newContent').load('/foo.html #myDiv h1:first',function(html) {console.log('內容更新！'); });

load方法可以附加一個字符串或對象作為參數，一起向服務器提交。如果是字符串，則采用GET方法提交；如果是對象，則采用POST方法提交

$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {console.log( "已經載入" ); });

上面代碼將{?limit:?25?}通過POST方法向服務器提交。

Ajax其它

ajax事件方法綁定

jQuery提供以下一些方法，用于指定特定的AJAX事件的回調函數。

• .ajaxComplete()：ajax請求完成。
• .ajaxError()：ajax請求出錯。
• .ajaxSend()：ajax請求發出之前。
• .ajaxStart()：第一個ajax請求開始發出，即沒有還未完成ajax請求。
• .ajaxStop()：所有ajax請求完成之后。
• .ajaxSuccess()：ajax請求成功之后。

下面是示例。

//Ajax請求指示器 $('#loading_indicator') .ajaxStart(function (){$(this).show();}) .ajaxStop(function (){$(this).hide();});//下面是處理Ajax請求出錯（返回404或500錯誤）的例子。 $(document).ajaxError(function (e, xhr, settings, error) {console.log(error); });

返回值

ajax方法返回的是一個deferred對象，可以用then方法為該對象指定回調函數.

詳細參見：JQuery系列（5） - Deferred對象

JSONP

由于瀏覽器存在“同域限制”，ajax方法只能向當前網頁所在的域名發出HTTP請求。但是，通過在當前網頁中插入script元素（<script>），可以向不同的域名發出GET請求，這種變通方法叫做JSONP（JSON with Padding）。

ajax方法可以發出JSONP請求，方法是在對象參數中指定dataType為JSONP。

$.ajax({url: '/data/search.jsonp',data: {q: 'a'},dataType: 'jsonp',success: function(resp) {$('#target').html('Results: ' + resp.results.length);} });)

JSONP的通常做法是，在所要請求的URL后面加在回調函數的名稱。ajax方法規定，如果所請求的網址以類似“callback=?”的形式結尾，則自動采用JSONP形式。所以，上面的代碼還可以寫成下面這樣。

$.getJSON('/data/search.jsonp?q=a&callback=?',function(resp) {$('#target').html('Results: ' + resp.results.length);} );

?

文件上傳

假定網頁有一個文件控件。

<input type="file" id="test-input">

方法1，將文件作為表單數據上傳：

var file = $('#test-input')[0].files[0]; var formData = new FormData();formData.append('file', file);$.ajax('myserver/uploads', {method: 'POST',contentType: false,processData: false,data: formData });

?

方法2，直接發送文件： var file = $('#test-input')[0].files[0];$.ajax('myserver/uploads', {method: 'POST',contentType: file.type,processData: false,data: file });

參考

【1】阮一峰?http://javascript.ruanyifeng.com/jquery/utility.html#toc2???

?

?

?

轉載于:https://www.cnblogs.com/ybtools/p/6819719.html

總結

以上是生活随笔為你收集整理的JQuery系列（4） - AJAX方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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