文档章节

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

拉普拉斯婷
 拉普拉斯婷
发布于 2017/04/28 13:47
字数 586
阅读 14
收藏 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
深圳
$.ajax jsonp parsererror

场景重现 通过发起的跨越请求代码如下: 发起 ajax 跨域请求后... 咋一看我还以为是我代码哪里写漏了,检查过后,代码没问题. 同时把完整的请求,直接扔到浏览器地址栏里访问,响应是正常的. 但是...

taadis
2017/06/08
0
0
javascript跨域 jsonp详解

json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。 同源策...

梅超疯
2015/01/08
0
0
Jquery中AJAX参数详细介绍

在使用jquery的时候,我们经常用到jquery中对ajax的封装,下面对ajax函数的各参数详细说明和讲解,以便更好的理解和使用 $.get(url, data, callback,type) 和 $.post(url, data, callback, ...

凯文加内特
2015/01/28
0
0
jQuery 调用jsonp实现与原理

通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使用一种特别的方式来实现跨域,其中的原理是利用 <script> 元素的这个开放策略,具体后面谈。 1.客户端代码 <!DOCTYPE html PUB...

chailink
2013/12/29
0
0
JQuery AJAX 方法总结:

JQuery中主要AJax方法: 一、load: $(selector).load(url,[data],[callback]);从服务器中加载数据并将返回数据放入被选元素中。 参数含义: url : 为希望加载URL,可以将JQuery的选择器添加...

wait106427
2015/08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
49分钟前
1
0
AVA中CAS-ABA的问题解决方案AtomicStampedReference

了解CAS(Compare-And-Swap) CAS即对比交换,它在保证数据原子性的前提下尽可能的减少了锁的使用,很多编程语言或者系统实现上都大量的使用了CAS。 JAVA中CAS的实现 JAVA中的cas主要使用的是...

码代码的小司机
51分钟前
2
0
Android JNI开发系列(十三) JNI异常处理

JNI 异常处理 JNI异常与JAVA处理异常的区别 JAVA 有异常处理机制,而JNI没有 如果JAVA中异常没有捕获,后面的代码不会执行,JNI会执行 JAVA编译时的异常,是在方法显示的声明了某一个异常,编...

蔡小鹏
今天
2
0
简单介绍Java 的JAR包、EAR包、WAR包区别

WAR包 WAR(Web Archive file)网络应用程序文件,是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。War专用于Web方面。大部分的JAVA WEB工程,都是打成WAR包进行发布的。 War是...

Linux就该这么学
今天
3
0
Qt那些事0.0.7

在帮助文档(Overview - QML and C++ Integration)中随缘遇到一张图,是关于C++对象与QML整合介绍的,值得标记下来,虽然大部分功能也有所涉猎,但是还是留个记号,万一哪天我失忆了还想写Q...

Ev4n
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部