jsonp
Ajax、同源策略、跨域
Ajax技术 Asynchronous JavaScript and XML (Ajax) 是Web2.0的关键技术。 Ajax允许在不干扰Web应用程序的显示和行为的情况下在后台进行数据检索。 使用XMLHttpRequest函数获取数据,它是一种API,允许客户端JavaScript 通过 HTTP 连接到远程服务器。 受浏览器限制,不允许跨域通信,即“同源策略限制” 同源策略 出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。 所有的浏览器都遵守同源策略,这个策略能够保证一个源的动态脚本不能读取或操作其他源的http响应和cookie,这就使浏览器隔离了来自不同源的内容,防止它们互相操作。 同源是指协议、域名和端口都一致的情况。 跨域 跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果
第三方解决跨域
开启HTTP的Access-Control-Allow-Origin参数 只有当目标页面的response中,包含了 Access-Control-Allow-Origin 这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。 Access-Control-Allow-Origin: http://run.jsbin.io # 允许 http://run.jsbin.io 跨域 Access-Control-Allow-Origin: * # * 表示允许任何域名跨域访问 nginx中解决跨域问题: add_header Access-Control-Allow-Origin *; # 可以接受所有的请求源(Origin),即接受所有跨域的请求。
JSONP
JSONP定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。 JSONP跨域的原理 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据,img、iframe、script等标签不受跨域影响,可以通过src属性请求到其他服务器上的数据 - JSONP 通过script标签不受跨域影响来实现跨域请求数据 - 正常地请求一个JSON数据,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。
实例
1 url(r'^jsonp$', views.jsonp), 2 url(r'^req/$', views.req)
1 def jsonp(request): 2 print(request.GET) 3 func = request.GET.get('callback', list) 4 return HttpResponse("%s(1000)" % func) 5 6 7 import requests 8 9 def req(request): 10 # requests模块可获取url数据 11 data = requests.get("https://www.sojson.com/open/api/weather/json.shtml?city=北京") 12 # 定义字符编码 13 data.encoding = "utf-8" 14 15 result = data.content.decode("utf-8") 16 print(result) 17 print(data.url) 18 return render(request, 'req.html', {'result': result})
1 <body> 2 3 <p class="xbt">test</p> 4 <p>{{ result }}</p> 5 6 <p><input type="button" onclick="Jsonp1();" value="jsonp接口"></p> 7 8 <p><input type="button" onclick="Ajax_jsonp();" value="ajax jsonp接口"></p> 9 10 <script type="text/javascript" src="/static/jquery-3.3.1.min.js"></script> 11 12 <script type="text/javascript"> 13 // 方法一: 14 function Jsonp1(){ 15 var tag = document.createElement('script'); 16 tag.src = "http://127.0.0.1:8000/blog01/jsonp?k1=v1&k2=v2&callback=Jsonp2"; 17 document.head.appendChild(tag); 18 document.head.removeChild(tag); 19 } 20 21 function Jsonp2(kwargs) { 22 console.log(kwargs) 23 } 24 25 // 方法二: 26 function Ajax_jsonp(){ 27 $.ajax({ 28 //<QueryDict: {'k1': ['v1'], 'k2': ['v2'], 'callback': ['Jsonp2'], '_': ['1531722424120']}> 29 url: 'http://127.0.0.1:8000/blog01/jsonp?k1=v1&k2=v2', 30 type: 'GET', 31 dataType: 'jsonp', // 数据类型 32 jsonp: 'callback1', // 回调函数参数 33 jsonpCallback: 'Jsonp2', // 回调函数 34 success: function (data, statusText, xmlHttpRequest) { 35 alert(data); 36 }, 37 error: function (error) { 38 console.log(123); 39 console.log(error); 40 } 41 }) 42 } 43 44 </script> 45 </body>