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这个方法
最新文章
- xamarin android ListView手动分组
- SQL知识整理一:触发器、存储过程、表变量、临时表
- js 常见混乱
- BZOJ3485 : [Baltic2012]peaks
- js 去掉input标签中的百分号【%】
- 实现ScrollView中包含ListView,动态设置ListView的高度
- Windows Azure 设置虚拟机静态外网IP地址
- Jquery post 传递数组给asp.net mvc方法
- js限制文本框只能输入数字
- 秒杀多线程第二篇 多线程第一次亲热接触 CreateThread与_beginthreadex本质差别
- JavaScript闭包的一些理解
- js 关键字 in
- BI服务器配置与客户端情况
- 牛客网小a的旅行计划
- jQuery 方式模拟提交表单
- Logstash Introduction
- tensorflow的save和restore
- canvas制作完美适配分享海报
- HQL中的Like查询需要注意的地方
- 鸟哥私房菜vim常用命令