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

 

 

 

　　

　　

posted @ 2018-07-16 18:37  ︻◣_蝸犇り~  阅读(155)  评论(0)  编辑  收藏  举报