码迷,mamicode.com
首页 > Web开发 > 详细

ajax跨域请求解决方案

时间:2017-11-05 20:04:31      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:跨域请求   功能   跨域   策略   内容   协议   src   设置   回调函数   

大家好,今天我们学习了js的跨域请求的解决方案,由于JS中存在同源策略,当请求不同协议名,不同端口号、不同主机名下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理!

方案一、后台PHP进行设置,

前台无需任何设置,在后台被请求的PHP文件中,写入一条header

header("Access-Control-Allow-Origin:*");

表示允许那些域名请求这个PHP文件*表示所有域名都允许

这是最佳的解决方案,因为是在后台进行设置,不对外公开,所以更加安全,

方案二、使用src请求+JSONP实现跨域

* ①拥有src属性的标签自带跨域功能,所有可以使用script标签的src属性请求后台数据。

* <script src="http://127.0.0.1/json/php" type="text/javascript" charset="utf-8"> </ script>

* ②由于src在加载数据成功后,会直接将加载内容放入到script标签中,

* 所以后台直接返回JSON字符串将不能再script标签中解析。。

* 因此后台应该返回给前台一个回调函数名,并将json字符串作为参数调用

* 从后台PHP文件中国返回:echo "callBack({$json})";

③前台接收到返回的回调函数时,回调函数将直接在script标签中调用,因此需要声明这样一个回调函数,作为请求成功的回调。

eg:

$.ajax({
                method:"post",
                url:"http://127.0.0.1/json/php",
                dataType:"jsonp",
                success:function(data){
                    console.log(data);
                    console.log($str[1].name)
                }
            
            });

方案三、JQuery的AJax实现JSONP

①在ajax请求是,设置datatype为"jsonp"

②后台返回是,依然需要返回回调函数。但是,ajax在发送请求是惠默认使用get请求回调函数名发给后台,后台可以使用echo $_GET[‘callback‘]取出回调函数名,这样前台可以使用ajax的success函数作为成功的回调。

echo "{$_GET[‘callback‘]}({$str})";

③后台返回以后,Ajax依然可以使用success作为成功的回调函数;

success:function(data){}

当然后台也可以随便返回一个回调函数名,echo"callBack({$str})",

前台只要请求成功,就会自动调用这个函数。类似以第二条的②③步

<script src="http://127.0.0.1/json/php" type="text/javascript" charset="utf-8">

ajax跨域请求解决方案

标签:跨域请求   功能   跨域   策略   内容   协议   src   设置   回调函数   

原文地址:http://www.cnblogs.com/zhangxinlei/p/7788273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!