jQuery對(duì)象上面還定義了Ajax方法（$.ajax()），用來處理Ajax操作。調(diào)用該方法后，瀏覽器就會(huì)向服務(wù)器發(fā)出一個(gè)HTTP請(qǐng)求。

$.ajax方法

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

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

上面代碼中的url，指的是服務(wù)器網(wǎng)址，options則是一個(gè)對(duì)象參數(shù)，設(shè)置Ajax請(qǐng)求的具體參數(shù)。

$.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請(qǐng)求已結(jié)束。'); } View Code

上面代碼的對(duì)象參數(shù)有多個(gè)屬性，含義如下：

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

$.ajax簡(jiǎn)便寫法

ajax方法還有一些簡(jiǎn)便寫法。

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

一般來說，這些簡(jiǎn)便方法依次接受三個(gè)參數(shù)：url、數(shù)據(jù)、成功時(shí)的回調(diào)函數(shù)。

?

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

這兩個(gè)方法分別對(duì)應(yīng)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方法的參數(shù)相同，第一個(gè)參數(shù)是服務(wù)器網(wǎng)址，該參數(shù)是必需的，其他參數(shù)都是可選的。第二個(gè)參數(shù)是發(fā)送給服務(wù)器的數(shù)據(jù)，第三個(gè)參數(shù)是操作成功后的回調(diào)函數(shù)。

?

（2）$.getJSON()

ajax方法的另一個(gè)簡(jiǎn)便寫法是getJSON方法。當(dāng)服務(wù)器端返回JSON格式的數(shù)據(jù)，可以用這個(gè)方法代替$.ajax方法。

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

?

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

（3）$.getScript()

$.getScript方法用于從服務(wù)器端加載一個(gè)腳本文件。

getScript的回調(diào)函數(shù)接受三個(gè)參數(shù)，分別是腳本文件的內(nèi)容，HTTP響應(yīng)的狀態(tài)信息和ajax對(duì)象實(shí)例。

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

?

getScript是ajax方法的簡(jiǎn)便寫法，因此返回的是一個(gè)deferred對(duì)象，可以使用deferred接口。

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

?

（4）$.fn.load()

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

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

$.fn.load方法還可以指定一個(gè)選擇器，將遠(yuǎn)程文件中匹配選擇器的部分，放入當(dāng)前元素，并指定操作完成時(shí)的回調(diào)函數(shù)。

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

load方法可以附加一個(gè)字符串或?qū)ο笞鳛閰?shù)，一起向服務(wù)器提交。如果是字符串，則采用GET方法提交；如果是對(duì)象，則采用POST方法提交

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

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

Ajax其它

ajax事件方法綁定

jQuery提供以下一些方法，用于指定特定的AJAX事件的回調(diào)函數(shù)。

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

下面是示例。

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

返回值

ajax方法返回的是一個(gè)deferred對(duì)象，可以用then方法為該對(duì)象指定回調(diào)函數(shù).

詳細(xì)參見：JQuery系列（5） - Deferred對(duì)象

JSONP

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

ajax方法可以發(fā)出JSONP請(qǐng)求，方法是在對(duì)象參數(shù)中指定dataType為JSONP。

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

JSONP的通常做法是，在所要請(qǐng)求的URL后面加在回調(diào)函數(shù)的名稱。ajax方法規(guī)定，如果所請(qǐng)求的網(wǎng)址以類似“callback=?”的形式結(jié)尾，則自動(dòng)采用JSONP形式。所以，上面的代碼還可以寫成下面這樣。

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

?

文件上傳

假定網(wǎng)頁(yè)有一個(gè)文件控件。

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

方法1，將文件作為表單數(shù)據(jù)上傳：

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，直接發(fā)送文件： 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???

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/ybtools/p/6819719.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。