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

观察函数

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

当 Ajax 请求开始且尚未进行其他传输时,会触发 ajaxStart 的回调函数。
当最后一次活动请求终止时,则会执行通过 ajaxStop 注册的回调函数。
由于观察函数具备全局性,所以需要使用 $(document) 来调用。我们通过使用 Ajax 方法取得一个图片的例子来测试两个函数:
当前页面为:

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

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

<img src="avatar.jpg" />

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

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

此时我们可以使用 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');
 });

此时点击按钮后:

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

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

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

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
过程处理
,以便于您获取更多的相关知识。

时间: 2024-10-24 19:30:54

jQuery学习笔记之 Ajax操作篇(三) - 过程处理_jquery的相关文章

jQuery学习笔记之 Ajax操作篇(一) - 数据加载_jquery

加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为: <div></div> <button>load</button> 同目录下的 test.html 文件内容为: <span>test</span> 我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上: $('button').click(function() { $('div').load('test.

jQuery学习笔记之 Ajax操作篇(二) - 数据传递_jquery

请求数据 我们可以使用 GET.POST 两种方式向后端请求数据,这里以 PHP 为例,假设有测试页面 age.php,用于返回年龄信息,内容为: if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') { echo '23'; } 当前页面内容为: <div> <a href="age.php">stephen</a> <span>age : <

jQuery学习笔记之DOM操作、事件绑定(2)

jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git --------------------学习目录------------------------ 4.DOM操作(节点增删改查) 节点查找:节点分为三种类型:元素节点.属性节点.文本节点 创建节点 创建元素节点 使用 jQuery

jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)

JqGrid相关操作备忘 方法列表 1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选

Jquery 学习笔记(三)240多个jQuery插件

Jquery 学习笔记(三) -240多个jQuery插件 2009年11月30日二 作者:   邦畿千里   概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是-写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). jQuery 是一个快速的,简洁的 javaScript

jQuery学习笔记之jQuery的Ajax(3)

jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ---------------------------- 6.0 jQuery ajax 浏览器给我们提供的XMLHttpRequest的作用是来发送http请求. js代码发送一个http的请求 XMLHttpRequest的四步:创建对象.注册监听.建立连接.发送数据 异步交互的6个方法(发送http请求) ajax()

jQuery学习笔记之概念(1)

jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuery的Ajax ------------------------------------------------ 前言:当前流行的JavaScript库有: jQuery.MooTools.Prototype.Dojo.YUI.EXT_JS.DWR 1.概念: 核心库.UI和插件等. jQuery是继

jQuery学习笔记之入门_jquery

最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下: 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: $('#info').val('Hello World!'); 嗯,可以看

jQuery学习笔记之插件开发(4)

jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用的功能定义为函数,然后绑定到jQuery对象上,从而成为jQuery对象的一个扩展方法. 目前,大部分jQuery插件都是这种类型的插件,由于这种插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器的优势.有很多jQuery内部方法,也是