关于跨域和JSONP的一些理解

最新推荐文章于 2024-06-05 09:02:44 发布

Zheng_lucky

最新推荐文章于 2024-06-05 09:02:44 发布

阅读量434

点赞数

分类专栏： JS 文章标签： JS JSONP 跨域

本文链接：https://blog.csdn.net/Zheng_lucky/article/details/87347167

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

面试的时候，遇到一些比较多问JSONP的，给新手党做一些总结吧，有不对的地方，欢迎大神的指正。

使用背景：
浏览器有同源策略，同源策略是一种约定，是浏览器基本的安全功能，同源就是指协议和域名和端口三者相同。
同源策略会限制cookie，localStorage等存储性能和DOM节点，以及拦截ajax的响应等等
需要在不同协议或者不同域名或者不同端口下进行访问的时候就是跨域。
例如：http://www.baidu.com:8000/这个地址，前面的HTTP就是协议，www.baidu.com时候域名，8000是端口号。

JSONP的原理
同源策略下有几个标签不受限制，分别是

	<img src="" alt="" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src=""></script>

JSONP的跨域就是利用了script标签不受限制的原理

JSONP的优缺点
优点：兼容性好，简单易用，能用来解决主流浏览器的跨域访问问题
缺地：只支持get方法，不能使用post方法，有一定的局限性

JSONP的使用
给大家贴一个在别的博客上面看到的JSONP的使用代码（链接在后面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP</title>
</head>
<body>
    <input type="text" id="song" name="">
    <input type="button" id="song_search" value="歌曲搜索" name="">
    <br />
    <div style="width:200px;height:230px;background:pink" id="song_list"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
       var searchJsonCallback=function(data){
        //遍历查询结果
            var alb_html='';
            for(var i in data.list){
                alb_html+='<span>专辑：</span><div style="color:black">'+data.list[0].albumname+'</div>';
            }
            $("#song_list").html(alb_html);
        };
        $("#song_search").on("click",function(){
            var keyword=$("#song").val();
            if(keyword==undefined||keyword==""){
                alert("歌曲搜索不能为空");
                return false;
            }else{
                var url = "http://cgi.music.soso.com/fcgi-bin/fcg_search_xmldata.q?source=10&w="+keyword+"&perpage=1&ie=utf-8";
                // 创建script标签，设置其属性
                var script = document.createElement('script');
                script.setAttribute('src', url);
                // 把script标签加入head，此时调用开始
                document.getElementsByTagName('head')[0].appendChild(script); 
            }
            
        });  

 </script> 
</body>
</html>

点击按钮触发后会动态创建一个script标签，然后把跨域的地址赋值给这个标签的src属性，还要在地址中向服务器传递回调函数的函数名称，这个名称不可以自己随意定义，是和服务端用于包裹返回数据的名称是一致的，创建好了以后会触发这个回调函数，回调中的形参就是返回的数据，这样就完成了跨域获取数据

文中代码的文章链接：https://segmentfault.com/a/1190000009577990?utm_source=tag-newest#articleHeader5

Zheng_lucky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于跨域和JSONP的一些理解

面试的时候，遇到一些比较多问JSONP的，给新手党做一些总结吧，有不对的地方，欢迎大神的指正。使用背景：浏览区有同源策略，同源策略是一种约定，是浏览器基本的安全功能，同源就是指协议和域名和端口三者相同。同源策略会限制cookie，localStorage等存储性能和DOM节点，以及拦截ajax的响应等等需要在不同协议或者不同域名或者不同端口下进行访问的时候就是跨域。例如：http://w...
复制链接

扫一扫