JSONP 跨域读取数据

最新推荐文章于 2021-10-01 16:30:20 发布

zheng_lan_fang

最新推荐文章于 2021-10-01 16:30:20 发布

阅读量819

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zheng_lan_fang/article/details/78209204

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

src:可以跨域

所以img 和 script 标签可以实现跨域

跨域读取数据
1.在本域下请求一个别的域名下的js，这个js会返回一些数据，可以在本域上获取，使用。
2.通过添加<script>标签来实现跨域。

实现：
//百度搜索js请求响应：jQuery1102015140022528893105_1507681428156({"q":"百度","p":false,"bs":"padstart","csor":"2","status":0,"g":[ { "q": "百度地图", "t": "n", "st": { "q": "百度地图", "new": 0 } }, { "q": "百度翻译", "t": "n", "st": { "q": "百度翻译", "new": 0 } },... ],"s":["百度地图","百度翻译","百度网盘","百度杀毒","百度卫士","百度文库","百度云盘","百度学术","百度贴吧","百度云"]});

//360搜索js请求响应： suggest_so({"query":"百度","ext":"eci=f7753152f369dc9f&nlpv=suggest_3.2.2","result":[{"word":"百度一下","resrc":"ori","source":""},{"word":"百度外卖","resrc":"ori","source":""},{"word":"百度云盘登陆入口","resrc":"ori","source":""},{"word":"百度云盘登录首页","resrc":"ori","source":""},{"word":"百度网盘登陆","resrc":"ori","source":""},{"word":"百度云","resrc":"ori","source":""},{"word":"百度地图","resrc":"ori","source":""}],"version":"3.2.2"});

//动态添加<script>标签
function f1() {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '/static/js/testjs.js';
    head.appendChild(script);
}

//以360为例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>360搜索</title>
    <script type="text/javascript">
        //360响应suggest_so(....)格式的数据，所以先创建一个这样的方法通过参数去取得数据
        function suggest_so(data) {
            //获取响应的数据
            console.log(data)
        }
    </script>
    //会调用事先定义好的suggest_so(data)
    //<script>的src中的参数可通过拼接的方式传递，也可以使用f1()动态的创建
    <script type="text/javascript" src="https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=百度"></script>
</head>
<body>
</body>
</html>

360响应的函数名是固定的，但是百度确是随机的，所以就要用到jsonp了。
JSONP跨域的原理解析： http://www.nowamagic.net/librarys/veda/detail/224
通过XMLHttpRequest实现的Ajax请求，不能向不同的域提交请求
jsonp:利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP，这项技术可以解决跨域提交Ajax请求的问题。
JSONP的优点是：

    它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；
    它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；
    并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：

它只支持GET请求而不支持POST等其它类型的HTTP请求；
它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

原理：

    首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。
    然后以 javascript 语法的方式，生成一个function， function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
    最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

//百度：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=js url后添加随机数&cb=jQuery110204350759381847842_1507708570394&_=1507708570413
$.ajax({
    url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    jsonp:'cb',
    dataType:'jsonp',
    data:{
        wd:$(obj).val()
    },
    success:function(data){
        $('#content').html('');
        var msg = '';
        $.each(data.s,function (index,item) {
            msg += "<li>" + item + "</li>"
        });
        $('#content').html(msg);
        console.log(data)
    }
})

jsonp:设置callback的别名，默认是callback，
jsonpCallback:设置callback的值，url里的callback='?'的?,默认自动生成jQuery随机数

jsonp:只接收js响应的是name(data...)这种格式的数据，否则会能够响应但是确不执行success的函数，出现parsererror：解析错误
如果传递的是个变量如：var info={data...},可以使用complete处理

跨域请求资源的方式
http://www.cnblogs.com/dojo-lzz/p/4265637.html

zheng_lan_fang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSONP 跨域读取数据

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。src:可以跨域所以img 和 script 标签可以实现跨域跨域读取数据1.在本域下请求一个别的域名下的js，这个js会返回一些数据，可以在本域上获取，使用。2.通过添加标签来实现跨域。实现：//百度搜索js请求响应：jQuery11020151400
复制链接

扫一扫