浅谈ajax
Ajax 回顾
最本质的 ajax 其实是这样的:
function Ajax(){
var xmlHttpReq = null;
if (window.ActiveXObject){//IE5 IE6
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){
xmlHttpReq = new XMLHttpRequest();
}
if( xmlHttpReq != null ){
xmlHttpReq.open("GET","/echo/xml/",true); //采用异步方式
xmlHttpReq.onreadystatechange=RequestCallBack; // 回调
// get, send不出去,自觉置为 null
// open 里用 post,下面才可以 send(data)
xmlHttpReq.send(null);
}
function RequestCallBack(){ //一旦readyState值改变,将会调用这个函数
if( xmlHttpReq.readyState == 4 ){ // 依次 0,1,2,3,4
if( xmlHttpReq.status == 200 ){
// xmlHttpReq.responseText;
}
}
}
}
jQuery 出现后,在发出Ajax请求时,jQuery 会帮我们确定取得数据的最佳方式。可用的方式包括标准的 XMLHttpRequest 对象、微软 ActiveX 的 XMLHTTP对象 或 script 标签。
由于不同请求使用的数据传输方式不一样,所以需要一个公共的接口与这些通信交互。为此,jqXHR 对象提供了这种接口在 XMLHttpRequest 对象可用的情况下,封装该对象的行为;在 XMLHttpRequest 对象不可用的情况下,则尽可能模拟它。jqXHR 提供给我们的属性和方法包括:
- 包含返回数据的 .responseText或.responseXML;
- 包含状态码和状态描述的 .status和.statusText;
- 关于HTTP头部的 setRequestHeader/getRequestHeader;
- 提早中断通信的.abort()
jQuery的所有 Ajax 方法都会有对象返回,只要把这个对象保存起来,随后就可以方便地使用这些属性和方法。
可以多次调用 .done()和.fail() 这两个方法,根据需要添加多个处理程序。如果把调用 $.ajax() 的结果保存在一个变量中,那么就可以考虑代码的可读性,在后面再添加处理程序。
Promise 对象和 Deferred 对象
jQuery 1.5 以后,Ajax 函数($.ajax、$.get 及$.post)都会返回Promise 对象。Promise 对象代表一项有两种可能结果(成 功或失败)的任务,它还持有多个回调,出现不同结果时会分别触发相应的回调。
使用Promise 对象的最大优势仍然在于,它可以轻松从现有 Promise 对象 派生出新的 Promise 对象。
Deferred 就是 Promise!更准确地说,Deferred 是Promise 的超集,它 相比 Promise 是可以直接触发的。纯 Promise 实例只允许添加多个调用,而且必须由其他什么东西来触发这些调用。
它们的底层是 $.Callbacks.
// jQuery 1.4
// 回调函数大而全,很臃肿
$.get('/mydata', {
success: onSuccess,
failure: onFailure,
always: onAlways
});
// jQuery 1.5
// 优雅的分布式
var promise = $.get('/mydata');
promise.done(onSuccess);
promise.fail(onFailure);
promise.always(onAlways);
jQuery 1.5 修改了 Ajax 实现。修改后所有 Ajax 函数($.ajax、$.get 及$.post)现在都会返回 Promise(承诺)对象。
Promise 对象代表一项有两种可能结果(成功或失败)的任务,它还持有多个回调,出现不同结果时会分别触发相应的回调。
简单总结一下,Promise 对象接受 3 种回调形式:done、fail 和 progress。 执行(resolve) Promise 对象时,运行的是 done 回调;拒绝(reject) Promise 对象时,运行的是fail 回调; 对处于挂起状态的Deferred 对象调用 notify 时,运行的是progress 回调.
获得jQuery 中的Promise 对象:或者生成一个$.Deferred 实例,或者进行一次可返回 Promise 对象的 API 调用。
$.when 及其他能取用Promise 对象的jQuery 方法均支持非 Promise 对象作为参数。这些非Promise 参数会被当成因相应参数位置已赋值而执行的Promise 对象来处理。
例如
$.when('foo')
会生成一个因赋值'foo'而立即执行的 Promise 对象。 再譬如
var promise = $.Deferred().resolve('bar');
$.when('foo', promise)
针对,动画也可以使用 promise,,jQuery 对象也可以有promise 方法 因此,如果想生成一个在抓取某些数据且已完成 #loading 动画之后执行的Promise 对象:
var fetching = $.get('/myData');
$.when(fetching, $('#loading'));
必须要在动画开始之后再执行 $.when 生成的那个 Promise 对象。如果#loading 的动画队列为空,则立即执行相应的 Promise 对象。
pipe 的原理为: "请针对这个 Promise(getPromise) 对象给我一个回调,我会归还一个 Promise (postPromise) 对象以表示回调运行的结果"
var getPromise = $.get('/query');
var postPromise = getPromise.pipe(function(data) { return $.post('/search', data); });
jQuery 1.8后 pipe 已经为不推荐用法,改推为 $.then.
浅谈ajax的更多相关文章
- 浅谈AJAX的基本原理和原生AJAX的基础用法
一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...
- 浅谈ajax的优点与缺点
AJAX (Asynchronous Javascript and XML) 是一种交互式动态web应用开发技术,该技术能提供富用户体验. 完全的AJAX应用给人以桌面应用的感觉.正如其他任何技术,A ...
- 浅谈Ajax 异步的几点细节
1.浏览器执行到Ajax代码的这行语句的时候,发出了一个HTTP请求,欲想请求服务器上的数据.服务器此时开始I/O,所谓的I/O就是磁盘的读写,需要花费一些时间,所以不会立即产生下行的HTTP报文: ...
- 浅谈AJAX基本实现流程
1.js中ajax实现流程: (1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法.URL及验证信息. (3) 设置 ...
- 浅谈ajax同步、异步的问题
最近实习的时候看到过firefox的同步.异步的警告,想着概念不是那么清楚,于是整理了一下ajax同步异步方面的知识.我是小白,做个笔记. 首先就是概念问题,ajax根据async进行区分同步和异步过 ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- 浅谈Websocket、Ajax轮询和长轮询(long polling)
浅谈Websocket.Ajax轮询和长轮询(long p0ll) 最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下. 1.什么是Websocket W ...
- 浅谈jQuery中的Ajax
浅谈jQuery中的Ajax 一.前言 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post ...
随机推荐
- angularJS绑定数据时自动转义html标签
angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...
- 常用js代码集
<img src="{:url('publics/verify')}" onclick="this.src='{:url('publics/verify')}'&q ...
- Design Tiny URL
Part 1: 前言: 最近看了一些关于短址(short URL)方面的一些博客,有些博客说到一些好的东西,但是,也不是很全,所以,这篇博客算是对其它博客的一个总结吧. 介绍: 短址,顾名思义,就是把 ...
- js加载完所有的图片,适合电子相册哦~~~~
有些时候要一口气加载完所有的图片,所以代码就要这么写.... var imgArray = [ 'http://s16.mogucdn.com/p1/160202/upload_ifqwcmlcmyy ...
- MySQL 日期、时间转换函数
MySQL 日期.时间转换函数:date_format(date,format), time_format(time,format) 能够把一个日期/时间转换成各种各样的字符串格式.它是 str_to ...
- Java 判断时间是否在指定天数之内
import java.util.Date; import java.text.SimpleDateFormat; public class WriteForBlog { static private ...
- WINFORM时间控件(DATATIMEPICKER)的显示格式设置
将DateTimePicker控件拖出来后打开属性,找到Format属性,选择Costum选项: 然后找到CustomFormat属性,按照你要显示的格式来输入,示例如下: 若系统时间为:2016年1 ...
- DOM对象—选中执行效果
---恢复内容开始--- 例如我们注册时,一些法律条例,我们是否同意决定着能否注册.在选择同意或不同意时出现的效果. 先在body里做一个按钮和选项框. <input type="ch ...
- 让textarea完全显示文章并且不滚动、不可拖拽、不可编辑
textarea { width: 100%; border: none; outline: none; resize: none; overflow: hidden; padding-bottom: ...
- PHP面试总结
从8月15号来到北京一直到今天,一月有余.来的这段时间一直准备笔试面试,大大小小的公司,乱七八糟面了10多家,近期才安顿下来.面试的这段时间感觉自己成长了不少.初来到这个陌生的城市一脸茫然,不会乘地铁 ...