浅谈ajax
来源:互联网 发布:大势至usb软件 编辑:程序博客网 时间:2024/05/17 03:19
Ajax 回顾
最本质的 ajax 其实是这样的:
<code class="javascript hljs" data-origin="" function Ajax(){ " style="margin: 0px 2px; padding: 0.5em; display: block; border: 1px solid rgb(204, 204, 204); white-space: pre; border-radius: 3px; word-break: break-all; word-wrap: break-word; font-size: 18px; overflow-x: auto; color: rgb(248, 248, 248); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; background-color: rgb(0, 0, 0);">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; } } }}
<code class="javascript hljs" data-origin=""
jQuery 出现后,在发出Ajax请求时,jQuery 会帮我们确定取得数据的最佳方式。可用的方式包括标准的 XMLHttpRequest 对象、微软 ActiveX 的 XMLHTTP对象 或 script 标签。
<code class="javascript hljs" data-origin=""
由于不同请求使用的数据传输方式不一样,所以需要一个公共的接口与这些通信交互。为此,jqXHR 对象提供了这种接口在 XMLHttpRequest 对象可用的情况下,封装该对象的行为;在 XMLHttpRequest 对象不可用的情况下,则尽可能模拟它。jqXHR 提供给我们的属性和方法包括:
- <code class="javascript hljs" data-origin=""
包含返回数据的 .responseText或.responseXML;
- <code class="javascript hljs" data-origin=""
包含状态码和状态描述的 .status和.statusText;
- <code class="javascript hljs" data-origin=""
关于HTTP头部的 setRequestHeader/getRequestHeader;
- <code class="javascript hljs" data-origin=""
提早中断通信的.abort()
<code class="javascript hljs" data-origin=""
jQuery的所有 Ajax 方法都会有对象返回,只要把这个对象保存起来,随后就可以方便地使用这些属性和方法。
<code class="javascript hljs" data-origin=""
可以多次调用 .done()和.fail() 这两个方法,根据需要添加多个处理程序。如果把调用 $.ajax() 的结果保存在一个变量中,那么就可以考虑代码的可读性,在后面再添加处理程序。
<code class="javascript hljs" data-origin="" Promise 对象和 Deferred 对象
<code class="javascript hljs" data-origin=""
jQuery 1.5 以后,Ajax 函数($.ajax、$.get 及$.post)都会返回Promise 对象。Promise 对象代表一项有两种可能结果(成 功或失败)的任务,它还持有多个回调,出现不同结果时会分别触发相应的回调。
<code class="javascript hljs" data-origin=""
使用Promise 对象的最大优势仍然在于,它可以轻松从现有 Promise 对象 派生出新的 Promise 对象。
<code class="javascript hljs" data-origin=""
Deferred 就是 Promise!更准确地说,Deferred 是Promise 的超集,它 相比 Promise 是可以直接触发的。纯 Promise 实例只允许添加多个调用,而且必须由其他什么东西来触发这些调用。
<code class="javascript hljs" data-origin=""
它们的底层是 $.Callbacks.
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" // jQuery 1.4 " style="margin: 0px 2px; padding: 0.5em; display: block; border: 1px solid rgb(204, 204, 204); white-space: pre; border-radius: 3px; word-break: break-all; word-wrap: break-word; font-size: 18px; overflow-x: auto; color: rgb(248, 248, 248); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; background-color: rgb(0, 0, 0);"> // 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);
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" jQuery 1.5 修改了 Ajax 实现。修改后所有 Ajax 函数($.ajax、$.get 及$.post)现在都会返回 Promise(承诺)对象。
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" Promise 对象代表一项有两种可能结果(成功或失败)的任务,它还持有多个回调,出现不同结果时会分别触发相应的回调。
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" 简单总结一下,Promise 对象接受 3 种回调形式:done、fail 和 progress。 执行(resolve) Promise 对象时,运行的是 done 回调;拒绝(reject) Promise 对象时,运行的是fail 回调; 对处于挂起状态的Deferred 对象调用 notify 时,运行的是progress 回调.
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" 获得jQuery 中的Promise 对象:或者生成一个$.Deferred 实例,或者进行一次可返回 Promise 对象的 API 调用。
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" $.when 及其他能取用Promise 对象的jQuery 方法均支持非 Promise 对象作为参数。这些非Promise 参数会被当成因相应参数位置已赋值而执行的Promise 对象来处理。
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" 例如
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" $.when('foo')" style="margin: 0px 2px; padding: 0.5em; display: block; border: 1px solid rgb(204, 204, 204); white-space: pre; border-radius: 3px; word-break: break-all; word-wrap: break-word; font-size: 18px; overflow-x: auto; color: rgb(248, 248, 248); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; background-color: rgb(0, 0, 0);">$.when('foo')
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" 会生成一个因赋值'foo'而立即执行的 Promise 对象。 再譬如
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" var promise = $.Deferred().resolve('bar');" style="margin: 0px 2px; padding: 0.5em; display: block; border: 1px solid rgb(204, 204, 204); white-space: pre; border-radius: 3px; word-break: break-all; word-wrap: break-word; font-size: 18px; overflow-x: auto; color: rgb(248, 248, 248); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; background-color: rgb(0, 0, 0);">var promise = $.Deferred().resolve('bar');$.when('foo', promise)
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" 针对,动画也可以使用 promise,,jQuery 对象也可以有promise 方法 因此,如果想生成一个在抓取某些数据且已完成 #loading 动画之后执行的Promise 对象:
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" var fetching = $.get('/myData');" style="margin: 0px 2px; padding: 0.5em; display: block; border: 1px solid rgb(204, 204, 204); white-space: pre; border-radius: 3px; word-break: break-all; word-wrap: break-word; font-size: 18px; overflow-x: auto; color: rgb(248, 248, 248); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; background-color: rgb(0, 0, 0);">var fetching = $.get('/myData');$.when(fetching, $('#loading'));
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" 必须要在动画开始之后再执行 $.when 生成的那个 Promise 对象。如果#loading 的动画队列为空,则立即执行相应的 Promise 对象。
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" pipe 的原理为: "请针对这个 Promise(getPromise) 对象给我一个回调,我会归还一个 Promise (postPromise) 对象以表示回调运行的结果"
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" var getPromise = $.get('/query');
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" var postPromise = getPromise.pipe(function(data) { return $.post('/search', data); });
<code class="javascript hljs" data-origin=""
<code class="javascript hljs" data-origin="" <code class="javascript hljs" data-origin="" jQuery 1.8后 pipe 已经为不推荐用法,改推为 $.then.
<code class="javascript hljs" data-origin=""<code class="javascript hljs" data-origin=""
- 浅谈AJAX
- 浅谈Ajax
- 浅谈Ajax
- 浅谈ajax
- 浅谈Ajax
- 浅谈Ajax
- 浅谈Ajax
- Ajax浅谈
- 浅谈Ajax
- 浅谈ajax
- 浅谈ajax
- 浅谈AJAX
- 浅谈Ajax
- 浅谈AJAX
- 浅谈ajax
- 浅谈Ajax
- 浅谈ajax
- 浅谈Ajax
- iOS 10 开发适配系列 之 权限Crash问题
- 使用D2D出现的错误
- ActiveX获取JavaScript传递的二维数组
- Codeforces Round #378 (Div. 2)A.B.C
- MySQL的Innodb中的事务隔离级别和锁的关系
- 浅谈ajax
- 关于查看API文档取消网页导航问题
- PHPExcel 基本用法详解
- Unity角色残影特效
- 大话设计模式(Python版)--享元模式
- android常见的编译异常处理
- 应用挂载名称空间
- Java中字符串与数组,数组与list之间的转化,及字符串处理
- 人脸识别经典论文