jsonp

时间 2019-11-19

标签 jsonp 栏目 JSON 繁體版

原文原文链接

Ajax、同源策略、跨域javascript

Ajax技术

　　Asynchronous JavaScript and XML (Ajax) 是Web2.0的关键技术。
　　Ajax容许在不干扰Web应用程序的显示和行为的状况下在后台进行数据检索。
　　使用XMLHttpRequest函数获取数据，它是一种API,容许客户端JavaScript 经过 HTTP 链接到远程服务器。
　　受浏览器限制，不容许跨域通讯，即“同源策略限制”

同源策略

　　出于安全方面的考虑，页面中的JavaScript没法访问其余服务器上的数据，即“同源策略”。
　　全部的浏览器都遵照同源策略，这个策略可以保证一个源的动态脚本不能读取或操做其余源的http响应和cookie，这就使浏览器隔离了来自不一样源的内容，防止它们互相操做。
　　同源是指协议、域名和端口都一致的状况。

跨域

    跨域就是经过某些手段来绕过同源策略限制，实现不一样服务器之间通讯的效果

第三方解决跨域html

开启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）,即接受全部跨域的请求。

JSONPjava

JSONP定义

	JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，经过这种模式能够实现数据的跨域获取。 

JSONP跨域的原理

	在同源策略下，在某个服务器下的页面是没法获取到该服务器之外的数据，img、iframe、script等标签不受跨域影响，能够经过src属性请求到其余服务器上的数据
		-  JSONP 经过script标签不受跨域影响来实现跨域请求数据
		-  正常地请求一个JSON数据，服务端返回的是一串JSON类型的数据，而咱们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

实例python

1     url(r'^jsonp$', views.jsonp),
2     url(r'^req/$', views.req)

url.py

 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})

views.py

 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>

req.html