邯郸做移动网站价格表,wordpress伪静态教程,网站收录一般多久,网站自助建设平台同源和跨域
同源
同源策略是浏览器的一种安全策略#xff0c;所谓同源是指#xff0c;域名#xff0c;协议#xff0c;端口完全相同。 跨域问题的解决方案
从我自己的网站访问别人网站的内容#xff0c;就叫跨域。 出于安全性考虑#xff0c;浏览器不允许ajax跨域获取…同源和跨域
同源
同源策略是浏览器的一种安全策略所谓同源是指域名协议端口完全相同。 跨域问题的解决方案
从我自己的网站访问别人网站的内容就叫跨域。 出于安全性考虑浏览器不允许ajax跨域获取数据。 iframe处于安全性考虑浏览器的开发厂商已经禁止了这种方式。 JSONPscript 标签的 src 属性传递数据。
JSONP
JSONP(JSON with Padding)带补丁的 json本质是利用了 script src/script标签具有可跨域的特性由服务端返回一个预先定义好的JS函数的调用并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。
我们知道 html标签的 src 属性是支持跨域的 img srchttp://img.smyhvae.com/2016040101.jpg alt
jsonp 就是利用这个特性实现的跨域但用的是 script 标签。如下 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleDocument/title/headbody!-- jsonp 就是 利用 src实现的跨域 用的是 script标签 --script typetext/javascript srchttp://192.168.141.137/2018-02-28/myData.php/script/body/html
上方那一行的代码意思是刷新A服务器上的index页面后会去请求 B 服务器上的 myData.php 这个页面。而且请求的方式是 get 请求。
但是 B 服务器上的页面不是你想请求就可以请求的大家一起配合才可以。
具体实现步骤
需要首先声明的是jsonp 只能通过 GET 方式进行请求。
1A客户端的代码 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleDocument/title/headbody/body/htmlscript typetext/javascript// 定义 eatFood()方法function fn(data) {console.log(我被调用了哦);console.log(data);}/script!-- 使用 script标签 发送了 get请求 去到了一个 php页面 --script typetext/javascript srchttp://192.168.141.137/01.php?callback1fn/script
我们来分析上方代码中的最后一行的那个urlA 客户端请求的是 B服务器上的 01.php页面。url里有个callback1fn意思是callback1是A和B 之间的约定约定后将执行方法 fn。
其实fn方法已经在最后一行代码中执行了。只不过fn方法里的data数据是从 B 服务器中获取的。
2B服务器端的代码 ?php$mycallBack $_GET[callback1];$arr array(zhangsan,lisi,zhaoliu);echo $mycallBack.(.json_encode($arr).); //字符串拼接?
代码解释
第一行的callback1 是A和B之间的约定二者必须一致。
echo语句中输出的内容即要返回给A客户端的内容此内容会保存在 A 客户端的fn方法的data里。 data[0]指的是 zhangsan。
json_encode指的是将php对象转化为 json。
刷新A页面输出结果为 mycallBack([zhangsan,lisi,zhaoliu])
jQuery 中的 JSONP
我们知道jQuery 中发送 Ajax 请求格式是 $(#btn).click(function(){$.ajax({url:./data.php?callback1fn,dataType:jsonp,type:get,//jsonp:callback1, //传递给B服务器的回调函数的名字默认为 callback//jsonCallBack:fn //自定义的函数名称。默认为 jQuery 自动生成的随机函数名success:function(data){alert(data);//$(#showInfo).html(data);},error:function(e){console.log(e);}});});
那如果数据是 JSONP上方代码则改为 $(#btn).click(function(){$.ajax({url:./data.php?fn,dataType:text,type:get,success:function(data){alert(data);//$(#showInfo).html(data);},error:function(e){console.log(e);}});}); 参考链接
参考链接https://www.cnblogs.com/2050/p/3191744.html 希望各位可以点个赞点个关注这对up真的很重要谢谢大家啦
