Ajax
跨域请求:两个不同域名之间的通讯。
Ajax受到浏览器的限制(安全性考虑)不允许跨域通信。
<script>
var req=new XMLHttpRequest();
req.open('get','.js'); //报错
req.send();
</script>
默认情况下浏览器采用同源策略:一个域下面的JS只能请求同一个域下面的文档内容,不能跨域请求。
解决方法一:src属性
使用标签的src属性,src属性是没有同源的限制的
<img src='.jpg' />
<script src='.js'></script>
解决方法二:PHP代理
A客户端
<script>
var req=new XMLHttpRequest();
req.open('post','./6-demo.php');
req.onreadystatechange=function(){if(req.readyState==4 && req.status==200){alert(req.responseText);}
}
req.send();
</script>
A服务器
<?php
echo file_get_contents('.php');
B服务器
<?php
echo '锄禾日当午';
小结:客户端有同源策略,服务器没有同源策略,我们可以使用服务器作为代理去跨域请求。
A服务器()
B服务器()
解决方法三:jsonp
jsonp=json+动态script。是一种非官方协议,为了解决JS的跨域请求
通过 <script> 的src属性引入跨域文件从而携带数据实现了数据的跨域访问。
代码实现
客户端代码(www.php.com)
<body>
<script>
function fun(data){alert(data);
}
window.onload=function(){document.getElementById('btn').onclick=function(){var script=document.createElement('script');script.src='.php?fn=fun'; //动态添加script的src属性document.body.appendChild(script);}
}
</script>
<input type="button" value="确定" id='btn'>
</body>
PHP代码()
<?php
$stu=array('tom','berry');
$data=json_encode($stu);
echo "{$_GET['fn']}($data)"; //拼接函数的调用
注意:
1、通过动态的添加script的src属性
2、传递的函数名和客户端定义的函数名要一致
3、跨域的服务器返回的是调用函数的形式
解决方法四:CORS实现跨域
设置允许接受的源
header('Access-Control-Allow-Origin:'); //允许php.com访问
CORS(Cross-Origin Resource Sharing)跨源资源共享:服务器在响应头中告知浏览器那些域请求限制,哪些域请求接受。
客户端代码()
<body>
<script>
window.onload=function(){document.getElementById('btn').onclick=function(){var req=new XMLHttpRequest();req.open('post','.php');req.onreadystatechange=function(){if(req.readyState==4)alert(req.responseText);}req.send()}
}
</script>
<input type="button" value="确定" id='btn'>
</body>
服务器端代码()
header('Access-Control-Allow-Origin:*'); //允许所有的域名访问
echo 'i am a boy';
Ajax
跨域请求:两个不同域名之间的通讯。
Ajax受到浏览器的限制(安全性考虑)不允许跨域通信。
<script>
var req=new XMLHttpRequest();
req.open('get','.js'); //报错
req.send();
</script>
默认情况下浏览器采用同源策略:一个域下面的JS只能请求同一个域下面的文档内容,不能跨域请求。
解决方法一:src属性
使用标签的src属性,src属性是没有同源的限制的
<img src='.jpg' />
<script src='.js'></script>
解决方法二:PHP代理
A客户端
<script>
var req=new XMLHttpRequest();
req.open('post','./6-demo.php');
req.onreadystatechange=function(){if(req.readyState==4 && req.status==200){alert(req.responseText);}
}
req.send();
</script>
A服务器
<?php
echo file_get_contents('.php');
B服务器
<?php
echo '锄禾日当午';
小结:客户端有同源策略,服务器没有同源策略,我们可以使用服务器作为代理去跨域请求。
A服务器()
B服务器()
解决方法三:jsonp
jsonp=json+动态script。是一种非官方协议,为了解决JS的跨域请求
通过 <script> 的src属性引入跨域文件从而携带数据实现了数据的跨域访问。
代码实现
客户端代码(www.php.com)
<body>
<script>
function fun(data){alert(data);
}
window.onload=function(){document.getElementById('btn').onclick=function(){var script=document.createElement('script');script.src='.php?fn=fun'; //动态添加script的src属性document.body.appendChild(script);}
}
</script>
<input type="button" value="确定" id='btn'>
</body>
PHP代码()
<?php
$stu=array('tom','berry');
$data=json_encode($stu);
echo "{$_GET['fn']}($data)"; //拼接函数的调用
注意:
1、通过动态的添加script的src属性
2、传递的函数名和客户端定义的函数名要一致
3、跨域的服务器返回的是调用函数的形式
解决方法四:CORS实现跨域
设置允许接受的源
header('Access-Control-Allow-Origin:'); //允许php.com访问
CORS(Cross-Origin Resource Sharing)跨源资源共享:服务器在响应头中告知浏览器那些域请求限制,哪些域请求接受。
客户端代码()
<body>
<script>
window.onload=function(){document.getElementById('btn').onclick=function(){var req=new XMLHttpRequest();req.open('post','.php');req.onreadystatechange=function(){if(req.readyState==4)alert(req.responseText);}req.send()}
}
</script>
<input type="button" value="确定" id='btn'>
</body>
服务器端代码()
header('Access-Control-Allow-Origin:*'); //允许所有的域名访问
echo 'i am a boy';