admin管理员组

文章数量:1516870

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 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/web/1686608290a16507.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。