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>