jQuery 中的 Ajax


jquery-ajax.png

load() 方法

使用示例:

$("#temp").load("wheather_report.html");  // 加载指定URL
$("#temp").load("wheather_report.html #temperature"); // 接在指定片段
$("#temp").load("wheather_report.html", "zipcode=02134");  // 查询参数
$("#temp").load("wheather_report.html", {zipcode: 02134, units: 'F'}); // POST请求

load() 方法还支持回调函数,如果没有指定额外数据,回调函数作为第二个参数,否在作为第三个参数传入。

jQuery Ajax 状态码:

  • success
  • notmodified
  • error
  • timeout
  • parseerror

Ajax 工具函数

  • jQuery.getScript() 加载并执行 JavaScript 代码
  • jQuery.getJSON() 加载 URL 并解析为 JSON,然后将解析结果传入指定回调函数
  • jQuery.get() 通过 GET 请求获取数据
  • jQuery.post() 通过 POST 请求获取数据

load() 方法一样,上述方法都是异步的。

jQuery.getScript()

jQuery.getScript("http://example.com/js/widget.js");
// 使用加载的类库,回调函数只能在请求成功时调用
jQuery.getScript("http://example.com/js/widget.js", function(){
    $("div").my_plugin();
});

同源情况下 jQuery.getScript() 返回 XMLHttpRequest 对象,对于跨域请求,获取不到返回值。

jQuery.getJSON()

jQuery.getJSON() 只有在传入了回调函数时才有用:

jQuery.getJSON("data.json", function(data)) {
    
}

load() 方法一样,jQuery.getJSON() 支持传入数据对象作为第二个参数。

jQuery.getJSON() 可用于处理 JSONP 请求。

jQuery.get() 和 jQuery.post()

这两个方法除了使用的请求方式不一样,其他都一样,支持四个参数:

  • 请求URL
  • 返回状态码
  • XMLHttpRequest对象
  • 请求数据类型:支持 text、html、xml、script、json、jsonp

jQuery.ajax()函数

上述所有 Ajax 工具函数最终都会调用 jQuery.ajax() 函数,这是整个类库中最复杂的函数,该函数只接受一个选项对象参数,用于指明所有细节:

jQuery.ajax({
    type: "GET",
    url: url,
    data: null,
    dataType: "script",
    success: callback
});

我们还可以在调用上面的方法之前通过 jQuery.ajaxSetup() 进行一些初始化设置:

jQuery.ajaxSetup({
    timeout: 2000,
    cache: false
});

指定上面的配置后这两个选项到值将作用于所有 Ajax 请求,包括 jQuery.get()load() 等高级工具。

通用选项

  • type:HTTP请求方法
  • url:请求URL
  • data:请求数据
  • dataType:响应数据的预期类型
  • contentType:HTTP Content-Type,默认是 application/x-www-form-urlencoded
  • timeout:请求超时时间(单位:毫秒)
  • cache:基于浏览器的缓存
  • ifModified:上次请求后URL内容是否有改变
  • global:是否触发Ajax请求过程中的事件,默认是true

回调

  • context:回调函数调用时的上下文对象,也就是this引用的对象
  • beforeSend:Ajax 请求发送到服务器之前调用的回调函数,该函数返回false,请求会取消
  • success:Ajax请求完成时调用的回调函数,返回的数据类型取决于 dataType 选项
  • error:Ajax请求失败时调用的回调函数
  • complete:Ajax请求完成时调用的回调函数,无论成功或失败

不常用的选项和钩子

  • async:Ajax 请求是同步还是异步,默认是异步
  • dataFilter:制定一个函数用来过滤或预处理服务器返回的数据
  • jsonp:设置 dataType 选项为 jsonp 时,url 或 data 选项通常会包含一个「jsonp=?」的参数,如果没有的话,通过此选项指定的名字插入一个,默认值是「callback」
  • jsonpCallback:通常,jQuery 会根据当前时间为 JSONP 生成一个唯一的回调函数名,如果想用自己来指定这个函数名的话,通过此选项进行配置,但是这么做会阻止 jQuery 在触发正常事件时调用 successcomplete 回调。
  • processData:设置 data 选项为对象时,jQuery 通常会根据「application/x-www-form-urlencoded」格式将其转化为字符串,如果想忽略此转化,可以将该选项值设置为 false
  • scriptCharset:指定 <script> 元素的 charset 属性值
  • tranditional
  • username,password:请求需要密码验证,可以通过指定用户名和密码来操作
  • xhr:指定一个工厂函数来获取 XMLHttpRequest 对象

Ajax事件

可以使用 bind() 方法和上图中第二列的事件类型来注册自定义的 Ajax 事件,也可以使用第三列中的事件注册方法来注册(类似 click、hover)。

由于 Ajax 事件是自定义事件,由 jQuery 而非浏览器提供,因此传递的 Event 对象不是很有用,不过这些事件(ajaxStart、ajaxStop除外)在触发时都带有额外参数,第一个是 XMLHttpRequest 对象,第二个是选项对象,对 ajaxError 事件而言,还有第三个额外参数 Error 对象。

ajaxStart、ajaxStop 事件与其他四个事件不同,首先它们没有回调函数,其次它们没有额外参数,用于表示与 Ajax 相关的网络活动开始和停止。当 jQuery 开始发起一个新的 Ajax 请求时会触发 ajaxStart 事件,当最后一个挂起的 Ajax 请求完成并且 jQuery 不再执行任何网络活动时,会触发 ajaxStop 事件。这一对事件可用来显示/隐藏某些「加载中...」的动画或网络活动的图标:

$("#loading_animation").bind({
    ajaxStart: function() { $(this).show(); },
    ajaxStop: function() { $(this).hide(); },
});

通常,这些事件都会全局触发,可以绑定当任何元素上,但前四个事件在调用 jQuery.ajax() 时设置了 context 选项的话,会在 context 元素上触发。

最后,需要记住可以通过设置 global 选项为 false 来阻止 jQuery 触发任何 Ajax 相关事件,包括 context 上的事件。


Vote Vote Cancel Collect Collect Cancel

<< 上一篇: 动画效果

>> 下一篇: 工具函数