首页 > 代码库 > Jsonp
Jsonp
在需要访问不同域的接口的数据的时候,一般有两种方式:
第一种:使用requests模块,在业务逻辑中直接访问别的域的接口,获取数据,然后将返回的数据显示到前端页面上;
这个时候,访问的流程是: 客户端-->server请求其他域的接口--->返回数据到server--->返回到客户端
import requests def req(request): response = requests.get(‘http://php.weather.sina.com.cn/xml.php?city=%B1%B1%BE%A9&password=DJOYnieT8234jlsK&day=0‘) # print(response.content) #字节 response.encoding = ‘utf-8‘ # print(response.text) #字符串 return render(request,‘req.html‘,{‘result‘:response.text})
第二种:使用js直接请求别的域的接口,获取数据,最长用的是jsonp;
<h1>后台获取的结果</h1> {{ result }} <h1>js获取的结果</h1> <input type="button" value="http://www.mamicode.com/获取数据" onclick="getContent();"> <div id="container"></div> <script> function getContent() { /* var xhr = new XMLHttpRequest(); xhr.open(‘GET‘,‘http://php.weather.sina.com.cn/xml.php?city=%B1%B1%BE%A9&password=DJOYnieT8234jlsK&day=0‘); xhr.onreadystatechange = function () { console.log(xhr.responseText); }; xhr.send() */ var tag = document.createElement(‘script‘); tag.src = http://www.mamicode.com/‘http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list_=145376870403‘; //在创建src属性的时候,就会发送请求>
jsonp请求的原理:浏览器具有同源策略,对于ajax请求,不接受不同域的数据,而对于script标签没有此约束,在创建script标签的src属性的时候,页面在加载src的链接的时候,也会执行(发送链接的请求)链接的地址,如果链接是http get的接口,会返回对应的数据,这样就实现了获取不同域的接口的数据的目的;
需要注意的是:接口返回的数据,一定要符合js格式,否则数据没有办法被处理,一般我们在src的get请求链接,会携带参数?callback=list,使用callback表示需要被返回的数据的格式,这样就可以在定义专门处理返回的数据的方法了; jsonp只能发送get请求,不能发送其他的请求;
使用jquery+jsonp请求数据如下:
function list(arg) { console.log(arg); } function getContent() { $.ajax({ url : ‘http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list_=145376870403‘, type : ‘POST‘, dataType: ‘jsonp‘, jsonp: ‘callback‘, jsonpCallback:‘list‘ }) }
第三种:cors:跨域资源共享,就是在server端设置响应头来实现的;
参考博客:http://www.cnblogs.com/wupeiqi/articles/5703697.html
Jsonp
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。