同源、跨域、jsonp(面试常问)

          提到跨域,就不得不说一下同源策略,同源策略是浏览器的一种安全策略,也就说a网站不能随便读取b网站的内容,试想一下,如果网站之间都可以随便读取互相的文件,比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

    所谓"同源"是指协议、端口号、域名相同,那么"跨域"就可以理解为不同源的网站之间的访问,最常见的应用是当我们调用ajax接口时如果不设置跨域浏览器会报错,这证明使用xmlHttpRequest对象不能发送跨域请求。

   有疑惑的小伙伴肯定会问,那我用a标签和script标签请求其他网站,是不是就是跨域了呢?

   这里要明白跨域是指在当前域下调用其他域下的东西,而链接则是直接跳转到对方的域下了,跟你之前的域名毫无关系。

   如果想从你的网站跨域去另一个网站拿到一些资源,有一个前提条件是另一个网站的服务器支持跨域,这个需要在服务端设置,不同服务端设置方法不一样,这里我们不多说,就看客户端跨域如何解决。

解决跨域最常见方法是jsonp方式,jsonp是jquery给我们封装的一个方法,使用方法如下:

$.ajax({
                   url:"http://api.map.baidu.com/telematics/v3/weather?ak=6tYzTvGZSYB5Oc2YGGOKt8&location=天津&output=json",
                   type:"get",
                   dataType:"jsonp",
                   success:function(data){
                       console.log(data);
                   }
               })

   上面代码是当我们调用外部的一个接口时,通过设置jquery的ajax方法里面的datatype属性的值为jsonp就可以成功调用这个接口了。

   现在当有人问起你如何解决跨域,你说用jsonp,这时候我相信不懂的人一定还是不懂,哈哈,人家会想jsonp是个什么鬼?

   这就告诉我们学东西要知其然而知其所以然,也许我们以为script标签只能引用本地文件,却不知script标签也可以发送请求,下面就是jsonp的原理

<body>
<input type="button" value="script 标签发送请求,接收数据">
<script>
        function getInfo(obj){
             console.log(obj.username);//拿到数据 张三.
        };
        document.querySelector("input").οnclick=function(){
               var script=document.createElement("script");
               //能发跨域请求,绝对能发不跨域的请求的
               script.src="05cross.php?callback=getInfo";//js 去解析,调用这个函数,就会在script 标签里面找这个函数。
               document.body.appendChild(script);
              /*通过js 去接收到数据.*/
              //现在的数据直接浏览器拿到之后按照js 的方式去解析,所以报错
        }
</script>
</body>

<?php
        //获取到的这个叫做getInfo
        $_call=$_GET["callback"];
        $data='{"username":"张三"}';
        echo $_call."(".$data.")";
        //返回到客户端就是getInfo({"username":"张三"})的调用结果
?>

jsonp跨域的原理
       1:使用script 标签发送请求,这个标签支持跨域访问
       2:在script 标签里面给服务器端传递一个 callback
       3:callback 的值对应到页面一定要定义一个全局函数(为什么是全局?因为服务端接收到callback函数后会返回页面中的script中去找,如果不写在全局作用域中根本找不到)
       4:服务端返回的是一个函数的调用。调用的时候会吧数据作为参数包在这个函数里面。

缺点:jsonp只能解决get方式的跨域

那如果要解决post方式的请求如何做呢?答案在这里:http://write.blog.csdn.net/mdeditor#!postId=60780480




  • 7
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值