- 这里提到了JSONP,那有人就问了,它同JSON有什么区别不同和区别呢,接下我们就来看看,百度百科有以下说明:
'''
1. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成(网络传输速度快)。 2. JSONP(JSON with Padding)是JSON的 一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的`<script>` 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。 3. 我们知道,由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。若要跨域请求出于安全性考虑是不行的,但是我们发现,Web页面上调用js文件时则不受是否跨域的影响,而且拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>,这时候,聪明的程序猿就想到了变通的方法,如果要进行跨域请求, 通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据,然后包装成script脚本回传,着不就突破同源策略的限制,解决了跨域访问的问题了么。
第一种jQuery实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>后台获取的结果</h1> {{ result }} <h1>js直接获取结果</h1> <input type="button" value="获取数据" onclick="getContent();" /> <div id="container"></div> <script src="/static/jquery-1.8.2.js"></script> <script> function getContent(){ $.ajax({ url: 'http://www.jxntv.cn/data/jmd-jxtv2.html', type: 'POST', dataType: 'jsonp', //数据格式为jsonp jsonp: 'callback', //函数变量名 jsonpCallback: 'list' //函数名称 }) } function list(arg){ console.log(arg); } </script> </body> </html>
第二种XMLHttpRequest实现的
function getContent(){ var xhr = new XMLHttpRequest(); xhr.open('GET','http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2'); xhr.onreadystatechange = function(){ console.log(xhr.responseText); }; xhr.send(); var tag = document.createElement('script'); tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403'; document.head.appendChild(tag); document.head.removeChild(tag);
Python后端代码
def jsonp(request): func = request.GET.get('callback') content = '%s(100000)' %(func,) return HttpResponse(content)
来源:https://www.cnblogs.com/wspblog/p/6435378.html