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 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
js检测用户输入密码强度
Oct 22 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
简单实现js倒计时功能
Feb 13 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
使用Sphinx对索引进行搜索
2013/06/25 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP实现懒加载的方法
2015/03/07 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python入门教程 python入门神图一张
2018/03/05 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
XML文档面试题
2015/08/05 面试题
实习生体会的自我评价范文
2013/11/28 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
中学生演讲稿
2014/04/26 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
离婚协议书标准格式
2014/10/04 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android