深入源码分析使用jQuery连续发起jsonp请求失败的原因
jQuery的 jsonp 大家应该是十分熟悉了。
曾遇到过这样的需求
1、希望请求几个相似的内容添加到页面
2、请求的内容一定时间内是固定不变的,希望做个缓存。
于是脑子一拍写下了类似这样的代码
for(var i = 0; i < 3; i++){
$.ajax({
url:'.../return.php?num='+i,
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'dosome',
cache: true
}).done(function(re){
console.log(re);
}).fail(function(){
console.log('fail');
});
}
结果却总是只有一个成功并报错
Uncaught TypeError: dosome is not a function
百思不得其解,不是有一个成功了吗?dosome怎么就不是函数了?
无奈之下花了大心思和时间在localhost上研究了jQuery的jsonp原理。
设置服务器返回如下
<?php
echo 'dosome("num='.$_GET['num'].'");';
?>
得到返回如下
仔细翻看源码,在1.11.3版本发现
原来每次jsonp请求,jQuery都自动先把callbackName函数注册到window,又在返回后把window[ callbackName ]改回来。
于是同步执行完for循环发送请求后,处理第一个返回时就把window[ callbackName ]改成了 undefined,后续的返回都无法处理了。
我一阵郁闷,反正这个函数也没执行什么,不改回去不行吗?
可惜,我还是太天真,其实不改回去也一样无法正常得到想要的结果的。
个人理解,jQuery的jsonp原理大致如下
每次jsonp请求,都是新建一个处理函数把返回内容赋值到局部变量responseContainer,然后在调用注册的回调函数以对应的局部变量responseContainer[0]为参数执行。
当使用不同的处理函数名时,一切相安无事(当我们不写jsonpCallback时,jQuery会自动生成唯一不同的函数名)。就如同上面的dosome1,2,3,各自引用并处理。
而使用同样的函数名时,循环时window['dosome']顺序被赋值,最终指向最后一个处理函数(如图中红线),其他的都被回收了。第一个返回时执行,把内容赋值到最后一个局部变量。
这样,第一个请求会拿不到返回内容从而fail,而最后一个请求的回调却处理了不是自己请求的内容。
深入源码分析使用jQuery连续发起jsonp请求失败的原因的更多相关文章
- FastAdmin 源码分析:jQuery 含逗号的选择器
FastAdmin 源码分析:jQuery 含逗号的选择器 在 FastAdmin 你常常会看到以下 jQuery 选择器的代码. if ($(".datetimepicker", ...
- jQuery源码分析之=>jQuery的定义
最近写前段的代码比较多,jQuery是用的最多的一个对象,但是之前几次看了源码,都没搞清楚jQuery是怎么定义的,今天终于看明白怎么回事了.记录下来,算是一个新的开始吧. (文中源码都是jQuery ...
- zookeeper源码分析之四服务端(单机)处理请求流程
上文: zookeeper源码分析之一服务端启动过程 中,我们介绍了zookeeper服务器的启动过程,其中单机是ZookeeperServer启动,集群使用QuorumPeer启动,那么这次我们分析 ...
- jQuery1.11源码分析(7)-----jQuery一些基本的API
这篇文章比较繁杂,主要就是把jQuery源码从上到下列出来,看我的注释就好了. jQuery源码对各种加载器做了处理. //阅读这个源码是请先了解一下概念,即时函数,工厂模式 (function( g ...
- jQuery1.11源码分析(6)-----jQuery结构总揽
(在看以下内容之前请先对原型链有一定的了解,比如:prototype是对象还是函数?) 在看jQuery的其他源码之前,必须对jQuery的数据结构有一定的了解. jQuery的核心很简单,jQuer ...
- 【SpringCloud Eureka源码】从Eureka Client发起注册请求到Eureka Server处理的整个服务注册过程(下)
目录 一.Spring Cloud Eureka Server自动配置及初始化 @EnableEurekaServer EurekaServerAutoConfiguration - 注册服务自动配置 ...
- 2.SpringMVC源码分析:DispatcherServlet的初始化与请求转发
一.DispatcherServlet的初始化 在我们第一次学Servlet编程,学java web的时候,还没有那么多框架.我们开发一个简单的功能要做的事情很简单,就是继承HttpServlet,根 ...
- jQuery源码分析系列(34) : Ajax - 预处理jsonp
上一章大概讲了前置过滤器和请求分发器的作用,这一章主要是具体分析每种对应的处理方式 $.ajax()调用不同类型的响应,被传递到成功处理函数之前,会经过不同种类的预处理(prefilters). 预处 ...
- jQuery1.11源码分析(8)-----jQuery调用Sizzle引擎的相关API
之所以把这部分放在这里,是因为这里用到了一些基本API,前一篇介绍过后才能使用. //jQuery通过find方法调用Sizzle引擎 //jQuery通过find方法调用Sizzle引擎 jQuer ...
随机推荐
- 如何用分析函数找出EMP表中每个部门工资最高的员工
EMP表是Oracle测试账户SCOTT中的一张雇员表,首先,我们来看看emp表的数据 SQL> select * from emp; EMPNO ENAME JOB MGR HIREDATE ...
- Key Components and Internals of Spring Boot Framework--转
原文地址:http://www.journaldev.com/7989/key-components-and-internals-of-spring-boot-framework In my prev ...
- PhotoShop常用快捷键
Photoshop常用快捷键: 图01 图02 图03 图04 图05 快捷键 PS快捷键是Photoshop为了提高绘图速度定义的快捷方式,它用一个或几个简单的字母来代替常用的命令. 多种工具共用一 ...
- CSS命名
CSS命名规范 CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:n ...
- Css定位总结
CSS position static 默认值,没有定位.元素框正常生成.块级元素生成一个矩形框,作为文档流(normal flow)的一部分,行内元素则会创建一个或多个行框,置于其父元素中.to ...
- Javascript 布尔操作符总结
在一门编程语言中,布尔操作符的重要性堪比相等操作符.如果没有测试两个值关系的能力,那么诸如if...else和循环之类的语句就不会有用武之地了.在像javascript这样弱类型语言更有其妙用,让我们 ...
- 暴力枚举 + 24点 --- hnu : Cracking the Safe
Cracking the Safe Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit u ...
- asp.net网站优化经验之谈
最近公司一个项目上线后,经常崩溃,于是开始重视性能问题,在网上看到了许多相关文章,整理下发了上来.以备参考. 在用ASP.NET开发网站的时候,性能是永远需要考虑和关注的问题,性能不仅仅只是程序代码执 ...
- Ajax学习笔记1之第一个Ajax应用程序
代码 <head> <title>An Ajax demo</title> <script src="../js/jquery-1.4.1.js&q ...
- 奔跑的歌颂 diskgenius 找回了20G数据
2.0同学家的电脑不慎重装系统,结果默认重新分区.其他倒没什么数据,就是几千张记录孩子成长的照片最为珍贵.为了找回数据,用U盘启动,使用Diskgenius全部找回,在此奔歌一下.