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入门之动态加载树代码
Apr 09 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 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&amp;&amp;mysql)一
2006/10/09 PHP
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
laravel5.6实现数值转换
2019/10/23 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python smallseg分词用法实例分析
2015/05/28 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python 列表理解及使用方法
2017/10/27 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python numpy数组中的复制知识解析
2020/02/03 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
如何提高MySql的安全性
2014/06/19 面试题
意向协议书范本
2014/04/23 职场文书
优质服务活动实施方案
2014/05/02 职场文书
锦旗标语大全
2014/06/23 职场文书
九年级英语教学反思
2016/02/15 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android