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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。