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 相关文章推荐
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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生成html分页列表的代码
2007/03/18 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
基于php-fpm的配置详解
2013/06/03 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
详解python中的json的基本使用方法
2016/12/21 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python实现决策树分类(2)
2018/08/30 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
python进行参数传递的方法
2020/05/12 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
联谊活动策划书
2014/01/26 职场文书
医院领导班子整改方案
2014/10/01 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
2015年话务员工作总结
2015/04/29 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
Python基础之进程详解
2021/05/21 Python