jQuery学习笔记之 Ajax操作篇(三) - 过程处理


Posted in Javascript onJune 23, 2014

观察函数

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

当 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操作篇(三) - 过程处理

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

$(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

JSONP 即 JSON 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操作篇(三) - 过程处理

数据获取成功。

Javascript 相关文章推荐
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 #Javascript
a标签click和href执行顺序探讨
Jun 23 #Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 #Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 #Javascript
jquery用data方法获取某个元素上的事件
Jun 23 #Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 #Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 #Javascript
You might like
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
PHP常用的三种设计模式
2017/02/17 PHP
js的一些常用方法小结
2011/06/29 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
解读python logging模块的使用方法
2018/04/17 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python excel转换csv代码实例
2019/08/26 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
党委班子对照检查材料
2014/08/19 职场文书
个人年终总结结尾
2015/03/06 职场文书
导游词之襄阳古城
2019/09/27 职场文书
Redis基本数据类型String常用操作命令
2022/06/01 Redis