js&jquery跨域详解jsonp,jquery并发大量请求丢失回调bug
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://70.32.92.74/b.js |
域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js |
主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js |
同一域名,不同二级域名(同上) | 不允许(cookie这种情况下也不允许访问) |
http://www.cnblogs.com/a.js http://www.a.com/b.js |
不同域名 | 不允许 |
这张表上已经说清楚了哪些情况允许通信,哪些不允许通信。
我们现在要解决的问题是将这些不允许变为允许。。。
JS跨域
1、为什么会有跨域?
简单的来说,在发送ajax请求的时候会遇到js跨域
大家都知道,发送ajax的时候会用到XMLHttpRequest这个对象,但是为了安全,浏览器对象做出了限制,不允许上表中的不允许情况通信。。。
所以,只要不使用XMLHttpRequest对象发送ajax请求,就不会出现跨域限制的问题。
2、不使用ajax发送请求,但是要达到局部刷新的效果怎么办?
假设请求的网页为本地的1.html
- <html>
- <head>
- </head>
- <body>
- </body>
- </html>
动态加载js
- var script = document.createElement("script");
- script.type = "text/javascript";
- script.src = "http://bbb.com";
- var head = document.getElementsByTagName("head")[0];
- head.insertBefore(script, head.firstChild);
这段代码执行完成后,会在head标签中加入http://bbb.com这个地址的响应内容,例:
如果http://bbb.com这个地址返回的是字符串123,那么当前调用页面的结果即为
<html>
<head>
<script src="http://bbb.com" type="text/JavaScript">
123
</script>
</head>
<body>
</body>
</html>
如果http://bbb.com这个地址返回的是test("ccc"),那么当前调用页面的结果即为
<html>
<head>
<script src="http://bbb.com" type="text/javascript">
test("ccc");
</script>
</head>
<body>
</body>
</html>
看到这里应该就明白了,其实这段动态加载js的代码只是把另一个页面的内容加载到本页面了
现在这个页面运行的时候会报错,缺少test方法,因为没有定义test就调用了,我们在本地的1.html加入test方法
- <html>
- <head>
- <script>
- function test(a){
- console.log(a);
- }
- var script = document.createElement("script");
- script.type = "text/javascript";
- script.src = "http://bbb.com";
- var head = document.getElementsByTagName("head")[0];
- head.insertBefore(script, head.firstChild);
- </script>
- </head>
- <body>
- </body>
- </html>
好了,1.html就是最终的样子,执行的顺序是:
1.先初始化test方法
2.创建script标签,加载http://bbb.com的内容,将返回结果插入到head标签
3.返回结果是test("ccc") 调用了test方法,就打印出来ccc了
3.能否不使用动态创建script的方式呢,怎么感觉没用?
完全可以。
- <html>
- <head>
- <script>
- function test(a){
- console.log(a);
- }
- </script>
- <script src="http://bbb.com" type="text/javascript" ></script>
- </head>
- <body>
- </body>
- </html>
这么写效果是一样的,并不是说一定要动态加载script标签才是跨域,这里是一个误区哦~
那为什么要使用动态加载script标签呢?
原因有两个:
1.src动态改变,不用写死。
2.异步加载。如果src需要加载的内容返回结果较慢,动态创建script标签是异步加载的不会出现阻塞。
js的跨域已经说清楚了吧,下面我们来看下jQuery的跨域
jquery跨域
$.ajax({
url: "http://bbb.com",
type: "get",
data:{p1:1,p2:2},
dataType: "jsonp",
jsonp: "callback",
success: function(aaa) {
console.log(aaa);
}
});
js跨域和jquery跨域有什么优缺点?
这种情况很常见,就是循环发送ajax请求么。
- // Clean-up function
- jqXHR.always(function() {
- // Set callback back to previous value
- window[ jsonpCallback ] = previous;
- // Call if it was a function and we have a response
- if ( responseContainer && jQuery.isFunction( previous ) ) {
- window[ jsonpCallback ]( responseContainer[ 0 ] );
- }
- });
1.callback被清除,所以有时候会报出找不到callback这个方法
js&jquery跨域详解jsonp,jquery并发大量请求丢失回调bug的更多相关文章
- 跨域详解之jsonp,底层的实现原理
分享一下跨域,不仅是因为现在的工作中遇到的越来越多,而且在面试中也经常被问到. 那么什么是跨域呢,我们来看官方给出的解释:浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的(所谓同源是指,域名 ...
- 跨域详解之-----Jsonp跨域
一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. 比如 ...
- ajax工作原理及jsonp跨域详解
一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...
- js跨域详解
跨域概念:Cross-origin resource sharing
- 纯 js 实现跨域接口调用 jsonp
开发「bufpay.com 个人即时到账收款平台」的时候,支付页面需要 poll轮询 查询订单状态. bufpay 支付接口如下: 接口地址:https://bufpay.com/api/pay/ai ...
- 【nginx】nginx解决跨域详解
使用场景:本地运行一个项目,但是要访问外域的api接口,存在跨域问题,解决方式有很多,但我尝试用nginx解决,搜索了网上文章后再加上尝试终于成功, 其中一些注意事项和大家分享一下. 一.window ...
- JavaScript中的跨域详解(二)
4.AJAX 同源政策规定,AJAX请求只能发给同源的网址,否则就报错. 除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制. JSONP WebSocket C ...
- JavaScript中的跨域详解(一)
同源策略 所谓的同源策略,指的是浏览器对不同源的脚本或者文本访问方式进行的限制. 所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可. 同源政策的目的,是为了保证用户信 ...
- JS JSOP跨域请求实例详解
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...
随机推荐
- 细说Linux权限
目录: 归属权与访问权 chmod:访问权限设置 chown:所属权限设置 umask:权限掩码 隐藏属性 chattr:写保护.误删保护 单独限权 setfacl 一.归属和访问权限简介 1.归属( ...
- mysqldump命令详解
1.数据备份的重要性: 保护公司的数据 网站的7x24提供服务 2.MySQL数据库备份: --all-databases , -A 导出全部数据库. mysqldump -uroot -p --al ...
- 读Zepto源码之操作DOM
这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1 ...
- GPU编程-Thread Hierarchy(3)
1. 如果处理的数据是二维的或者三维的,应该怎么办呢? 针对的,我们可以按照二维或者三维的方式,组织线程.老规矩,先代码.后解释 // Kernel definition __global__ voi ...
- Linux(Debian、Ubuntu、Deepin等)安装最新版Chrome Unstable
将下载源加入到系统的源列表 sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/ ...
- Sizzle 源码分析 (二)
在Sizzle函数中,如果能快速处理或者通过querySelector处理,那么就使用它处理.否则使用select函数处理 . select函数 select = Sizzle.select = fu ...
- (转)C++——std::string类的引用计数
1.概念 Scott Meyers在<More Effective C++>中举了个例子,不知你是否还记得?在你还在上学的时候,你的父母要你不要看电视,而去复习功课,于是你把自己关在房间里 ...
- java中调用本地动态链接库(*.DLL)的两种方式详解和not found library、打包成jar,war包dll无法加载等等问题解决办法
我们经常会遇到需要java调用c++的案例,这里就java调用DLL本地动态链接库两种方式,和加载过程中遇到的问题进行详细介绍 1.通过System.loadLibrary("dll名称,不 ...
- 《Python编程从入门到实践》第三章_列表简介
什么是列表呢? 官方说明就是由一些列按特点顺序排列的元素组成.其实可以看出很多个字符串的有序组合吧,里面的内容可以随时的删除,增加,修改. 下面这个就是一个列表,python打印列表的时候会将中括号和 ...
- c# networkcomms 3.0实现模拟登陆总结
最近项目需要做一个客户查询状态系统,当前上位机缺少服务功能,于是找到了networkcomms 开源框架,作为项目使用. 最新版networkcomms 下载地址:https://github.com ...