1 Ajax操作

1.1 $.ajax

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

$.ajax(url,[settings]);通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)。jQuery 底層 AJAX 實(shí)現(xiàn)。簡(jiǎn)單易用的高層實(shí)現(xiàn)見 $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對(duì)象。大多數(shù)情況下你無(wú)需直接操作該函數(shù)，除非你需要操作不常用的選項(xiàng)，以獲得更多的靈活性。最簡(jiǎn)單的情況下，$.ajax()可以不帶任何參數(shù)直接使用。注意，所有的選項(xiàng)都可以通過(guò)$.ajaxSetup()函數(shù)來(lái)全局設(shè)置。

$.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('出問(wèn)題了！');
}
function completeCallback(xhr, status){
    console.log('Ajax請(qǐng)求已結(jié)束。');
}

上面代碼的對(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ù)，通常用來(lái)對(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ù)類型。
• 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ù)器返回的數(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ù)。如果過(guò)了這個(gè)時(shí)間，請(qǐng)求還沒(méi)有返回，則自動(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ù)。

這些參數(shù)之中，url可以獨(dú)立出來(lái)，作為ajax方法的第一個(gè)參數(shù)。也就是說(shuō)，上面代碼還可以寫成下面這樣。

$.ajax('/url/to/json',{
  type: 'GET',
  dataType: 'json',
  success: successCallback,
  error: errorCallback
})

作為向服務(wù)器發(fā)送的數(shù)據(jù)，data屬性也可以寫成一個(gè)對(duì)象。

$.ajax({
  url: '/remote/url',
  data: {
    param1: 'value1',
    param2: 'value2',
    ...
  }
});
// 相當(dāng)于
$.ajax({
    url: '/remote/url?param1=value1&param2=value2...'
}});

1.2 簡(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)前元素之中。

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

1.2.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));
});

get方法和post方法的參數(shù)相同，第一個(gè)參數(shù)是服務(wù)器網(wǎng)址，該參數(shù)是必需的，其他參數(shù)都是可選的。第二個(gè)參數(shù)是發(fā)送給服務(wù)器的數(shù)據(jù)，第三個(gè)參數(shù)是操作成功后的回調(diào)函數(shù)。

上面的post方法對(duì)應(yīng)的ajax寫法如下。

$.ajax({
    type: 'POST',
    url: '/data/save',
    data: {name: 'Rebecca'},
    dataType: 'json',
    success: function (resp){
      console.log(JSON.parse(resp));
    }
});

1.2.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);
});

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

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

1.2.3 $.getScript()

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

$.getScript('/static/js/myScript.js', function() {
    functionFromMyScript();
});

上面代碼先從服務(wù)器加載myScript.js腳本，然后在回調(diào)函數(shù)中執(zhí)行該腳本提供的函數(shù)。

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 ); // Success
  console.log( jqxhr.status ); // 200
});

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

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

1.3 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ā)出，即沒(méi)有還未完成ajax請(qǐng)求。
• .ajaxStop()：所有ajax請(qǐng)求完成之后。
• .ajaxSuccess()：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);
});

1.4 返回值

ajax方法返回的是一個(gè)deferred對(duì)象，可以用then方法為該對(duì)象指定回調(diào)函數(shù)（詳細(xì)解釋參見《deferred對(duì)象》一節(jié)）。

$.ajax({
  url: '/data/people.json',
  dataType: 'json'
}).then(function (resp){
  console.log(resp.people);
})

1.5 中文亂碼

1.5.1 解決方法一

js文件中使用encodeURI()方法。

var url = "Validate.jsp?id=" + encodeURI(encodeURI(idField.value));   

2.在后臺(tái)中對(duì)傳遞的參數(shù)進(jìn)行URLDecoder解碼

String username = URLDecoder.decode(request.getParameter("id"),"UTF-8")

1.5.2 解決方法二

當(dāng)網(wǎng)站頁(yè)面不是utf-8編碼時(shí)，ajax提交的中文便會(huì)變成亂碼。

解決方法如下：找到j(luò)query.js里的contentType:application/x-www-form-urlencoded，將它改成contentType:application/x-www-form-urlencoded; charset=UTF-8就可以了。

原因：未指定charset時(shí)，jquery使用ISO-8859-1，ISO8859-1，通常叫做Latin-1。Latin-1包括了書寫所有西方歐洲語(yǔ)言不可缺少的附加字符。jquery的ajax根本沒(méi)有考慮到國(guó)際化的問(wèn)題，而使用了歐洲的字符集，所以傳遞中文時(shí)才會(huì)出現(xiàn)亂碼

到此這篇關(guān)于jQuery中$.ajax()方法的具體使用的文章就介紹到這了,更多相關(guān)jQuery $.ajax()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論