文档章节

使用jQuery连续发起jsonp请求失败的原因

拉普拉斯婷
 拉普拉斯婷
发布于 2017/04/28 13:47
字数 586
阅读 13
收藏 0
点赞 0
评论 0

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,而最后一个请求的回调却处理了不是自己请求的内容。

本文转载自:http://www.cnblogs.com/lenghan/p/5777588.html

共有 人打赏支持
拉普拉斯婷
粉丝 0
博文 33
码字总数 5836
作品 0
深圳
Zepto.js简介(第二章)

接着上章的继续记录。 zepto 特点: 1、体积8kb 2、针对移动端的框架 3、语法同jquery大部分一样,都是$为核心函数 4、目前功能完善的框架体积最小的左右 zepto同jquery不同的API attr同pro...

张靖bibibi ⋅ 昨天 ⋅ 0

Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比

讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题。 这是一个典型的 B/S 模式。 PS. B/S结构(Browser/Ser...

梁音 ⋅ 06/19 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

JavaScript异步精讲,让你更加明白Js的执行流程!

JavaScript异步精讲,让你更加明白Js的执行流程! 问题点 什么是单线程,和异步有什么关系 什么是 event-loop jQuery的Deferred Promise 的基本使用和原理 async/await(和 Promise的区别、联...

推荐码发放 ⋅ 05/28 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 06/18 ⋅ 0

php中ajax跨域请求---小记

php中ajax跨域请求---小记 前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({   type:'get',   url:'http://wan.xxx.com/xxx.js',   success:functio...

thinkyoung ⋅ 2015/08/31 ⋅ 0

JAVAWeb对ajax中get与post的使用

JAVAWeb对ajax中get与post的使用 01.使用背景及ajax的介绍 在进行javaWeb的开发中难免会遇到异步请求的情况,为了使网站局部的信息发生变化,而不影响整个页面的话,博主知道的也只用ajax了。...

meiqi0538 ⋅ 04/04 ⋅ 0

Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵 ⋅ 前天 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈 ⋅ 04/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何将S/4HANA系统存储的图片文件用Java程序保存到本地

我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api.DATA ls_appl_object TYPE gos_s_obj.DA...

JerryWang_SAP ⋅ 31分钟前 ⋅ 0

Cube的构建过程

Cube 的构建方式有两种:全量构建和增量构建。两者的构建过程完全一样,区别在于构建时读取的数据源是全集还是子集。 Cube的构建步骤: 1.创建临时的 Hive 平表(从 Hive 读取数据)。 2.计算...

无精疯 ⋅ 35分钟前 ⋅ 0

云计算的选择悖论如何对待?

导读 人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云...

问题终结者 ⋅ 38分钟前 ⋅ 0

637. Average of Levels in Binary Tree - LeetCode

Question 637. Average of Levels in Binary Tree Solution 思路:定义一个map,层数作为key,value保存每层的元素个数和所有元素的和,遍历这个树,把map里面填值,遍历结束后,再遍历这个map,把每...

yysue ⋅ 53分钟前 ⋅ 0

IDEA配置和使用

版本控制 svn IDEA版本控制工具不能使用 VCS-->Enable Version Control Integration File-->Settings-->Plugins 搜索Subversion,勾选SVN和Git插件 删除.idea文件夹重新生成项目 安装SVN客户......

bithup ⋅ 今天 ⋅ 0

Hive函数

1.函数explode (一转多) create table hive_wc(sentence string); load data local inpath '/home/hadoop/data/hive-wc.txt' into table hive_wc; 结果: hive > select * from hive_wc; ......

GordonNemo ⋅ 今天 ⋅ 0

PE格式第三讲扩展,VA,RVA,FA的概念

作者:IBinary 出处:http://www.cnblogs.com/iBinary/ 版权所有,欢迎保留原文链接进行转载:) 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址 这边...

simpower ⋅ 今天 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 今天 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部