同源:同一个域名下不同文件或文件夹之间的访问
跨域:不同域名下之间文件或文件夹之间的访问
通用的一个跨域策略叫jsonp,但不仅仅是jsop能实现跨域,使用iframe,window.name,src,json都可以实现跨域
cors toggle谷歌插件打开可以忽略跨域,仅仅测试使用.
跨域的两种方式
1. 客户端使用jsonp
2. 服务端使用("Access-Control-Allow-Origin: http://www.requesting-page.com")请求头。
但是以上两种都不完美,我们最好使用服务端代理
原理
jsonp:本质是利用了script标签的src属性具有跨域的特性,通过src请求服务器,服务器返回一个函数的调用,来执行本地的JS代码。相当于本地定义好了一个JS脚本,服务器返回一个脚本,只不过这个脚本是个调用脚本
本地JS
[AppleScript] 纯文本查看 复制代码 function a(){
console.log(123);
}
服务器返回的js
[AppleScript] 纯文本查看 复制代码 a();
AJAX跨域实例
客户端代码
[AppleScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="跨域请求"/>
<script src="jquery.min.js">
</script>
<script>
function method(data){//12行
console.log(data);
}
</script>
<script>
$('input').on('click',function () {
$.ajax({
url:"server.php",
success:function(data){
console.log("方法的实际参数是"+data);
method(data);//调用12行方法
},
dataType:"jsonp"
});
});
</script>
</body>
</html>
服务端代码
[AppleScript] 纯文本查看 复制代码 $obj = "{'name':'张三'}";
$cb = $_GET['callback'];
echo $cb."(".$obj.")";
|