个人对js跨域的理解

最新推荐文章于 2024-01-11 14:51:31 发布

冬之松柏

最新推荐文章于 2024-01-11 14:51:31 发布

阅读量414

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/sinat_24393863/article/details/54235932

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

所谓跨域就是A网站的js脚本向B网站请求数据,处于安全考虑,浏览器不支持此种请求;

浏览器会依据同源策略,判断当前网页执行的脚本属于哪个域,如果不同源,则为跨域

所谓同源策略就是,同协议,同端口,同域名,不满足任何一种,都视为跨域.

http://lamp163.com/dir/index.html
http://lamp163.com/dir1/a.html 同源
https://lamp63.com/dir2/b.html 不同源
http://lamp163.com:81/dir3/c.html 不同源
http://lamp169.com/dir4/d.html 不同源

但是a script img iframe标签中 src 或 href属性天生能实现跨域,比如:

在www.test1.com的文件夹下建立一个文件1.html,代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域请求</title>
</head>
<body>
<h3>a/script/img 标签中 src 和 href属性天生能实现跨域</h3>
<a href="http://www.test2.com/2.txt">跨域跳转</a>
<img src="http://www.test2.com/2.jpg" alt="">
<script src='http://www.test2.com/2.js'></script>
</body>
</html>

执行1.html后,会显示2.txt,2.jpg,2.js里面的内容;

如果在1.html里面写了个js方法,test1,在2.js里面也可以直接调用,因为src默认支持跨域请求

如在1.html里面定义test1方法:

在2.js里面:test({'name':'zhangsan','age':21,'sex':'nan'});

执行1.html,控制台会输出:name---zhangsan age---21 sex---nan

在1.html里面:<script src='http://www.test2.com/2.js'></script>//请求www.test2.com服务器的js脚本，这个脚本调用当前服务器的函数,这就叫跨域请求.

当然还有一种跨域请求,1.html的js脚本可以直接从test2的php文件中获取数据,如下:
把这段代码放在1.html中<script type="text/javascript" src='http://www.test2.com/2.php?callback=test'></script>

在test2的2.php中实现代码如下:
<?php

$arr = array('name'=>'zhangsan','sex'=>'男','age'=>12);
$data = json_encode($arr);
echo $_GET['callback'].'('.$data.')';

?>

这样执行1.html,控制台会输出:name---zhangsan age---12 sex---男

以上是js脚本的跨域请求,那么ajax是如何实现跨域请求的呢?

在www.test1.com更改1.html代码如下:

<button>跨域请求</button>

<script type="text/javascript" src='./jquery-1.8.3.js'></script>
<script type="text/javascript">
function test(data){
// alert('请求test2服务器的js脚本，这个脚本调用当前服务器的函数');
// alert(data);
//遍历数据
for(var o =null in data){
console.log(o+'---'+data[o]+'<br>');
}
}

$('button').click(function(){
$.ajax({
url:'http://www.test2.com/2.php',//不同域下的文件
data:{'callback':'test'},//执行回调
dataType:'jsonp',
type:'get',
// success:function(mes){
// alert('test');//跨域请求不会调用这个回调函数只会调用 test回调
// }
})
})
</script>

执行结果:控制台会输出:name---zhangsan age---12 sex---男

注意:dataType此时的类型必须为jsonp,解释如下:

如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

冬之松柏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人对js跨域的理解

所谓跨域就是A网站的js脚本向B网站请求数据,处于安全考虑,浏览器不支持此种请求;浏览器会依据同源策略,判断当前网页执行的脚本属于哪个域,如果不同源,则为跨域所谓同源策略就是,同协议,同端口,同域名,不满足任何一种,都视为跨域.http://lamp163.com/dir/index.htmlhttp://lamp163.com/dir1/a.html 同源https
复制链接

扫一扫