JQuery系列（4） - AJAX方法

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请求已结束。');
}

上面代码的对象参数有多个属性，含义如下：

• 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));
});

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

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