细说 jQuery Ajax操作篇(三) – 过程处理


对于 jQuery 通过 Ajax 方式传递数据时,我们还可以在过程中进行一定的处理,以便达到我们的需求。

观察函数

ajaxStartajaxStop 函数可以用来作为观察函数,我们可以使用观察函数的回调函数来做相应的处理。

  • Ajax 请求开始且尚未进行其他传输时,会触发 ajaxStart 的回调函数。
  • 当最后一次活动请求终止时,则会执行通过 ajaxStop 注册的回调函数。

由于观察函数具备全局性,所以需要使用 $(document) 来调用。我们通过使用 Ajax 方法取得一个图片的例子来测试两个函数:
当前页面为:

<div></div>
<button>load</button>

细说 jQuery Ajax操作篇(三) - 过程处理

同目录下的 test.html 内容为:

<img src="avatar.jpg" />

点击按钮后希望载入图像:

  $('button').click(function() {
    $('div').load('test.html');
  });

细说 jQuery Ajax操作篇(三) - 过程处理

此时我们可以使用 ajaxStartajaxStop 函数来增加提示:

  $(document).ajaxStart(function() {//
    alert('load a picture');
  }).ajaxStop(function() {
    alert('show a picture');
  });
  $('button').click(function() {
    $('div').load('test.html');
  });

此时点击按钮后,再图像载入前先提示 load a picture,载入后提示 show a picture

错误处理

最常用的方式是全局的 ajaxError 方法,以上例为例,如果我们像一个不存在的页面发送数据请求:

  $(document).ajaxError(function() {//
    alert('load failed!');
  });
  $('button').click(function() {
    $('div').load('noexsited.html');
  });

此时点击按钮后:

细说 jQuery Ajax操作篇(三) - 过程处理

对于非 load 方法,还可以使用 fail 方法来连缀处理:

  $('button').click(function() {
    $.get('noexsited.html', function(data) {

    }).fail(function(jqXHR) {
      alert('status is ' + jqXHR.status);
    });
  });

细说 jQuery Ajax操作篇(三) - 过程处理

JSONP

JSONPJSON with padding,填充式 JSON,利用的是 <script> 标签可以跨域获取 Javascript 文件的思路,故可以跨域获取 JSON 数据。
JSONP 的格式是把标准 JSON 文件包装在一对圆括号中,圆括号又前置一个任意字符串。这个字符串,即所谓的 P,由请求数据的客户端来决定。
同样是上例的按钮,首先我们将外域页面 otherdomain.com/index.php 内容设置为:

<?php
$data = '{ "name": "stephenlee", "sex": "male" }';
echo $_GET['callback'] .'('. $data .')';

我们使用特殊的占位符 ? 来实现跨域获取 JSON 数据:

  $('button').click(function() {
    $.getJSON('otherdomain.com/index.php?callback=?', function(data) {
      console.log(data);
    });
  });

细说 jQuery Ajax操作篇(三) - 过程处理

数据获取成功。

参考

http://book.douban.com/subject/24669823/


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>