JSONP 跨域读取数据

来源：互联网发布：如何重新设置网络连接编辑：程序博客网时间：2024/06/05 16:32

由于浏览器同源策略，凡是发送请求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

阅读全文

0 0