JQuery系列 - AJAX方法

Posted 水手哥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery系列 - 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请求已结束。‘);
}
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 ); // Success
  console.log( jqxhr.status ); // 200
});

 

getScript是ajax方法的简便写法,因此返回的是一个deferred对象,可以使用deferred接口

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

 

 

 

 

参考

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

 

 

 

 

 

 

以上是关于JQuery系列 - AJAX方法的主要内容,如果未能解决你的问题,请参考以下文章

ajax系列之用jQuery的ajax方法向服务器发出get和post请求

Javascript代码片段在drupal中不起作用

几个非常实用的JQuery代码片段

基于jQuery的ajax系列之用FormData实现页面无刷新上传

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升