Jsonp實現跨域訪問
阿新 • • 發佈：2018-03-01
turn latest dumps 填充 -c meta index itl add 
同源策略
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。
同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪個頁面的，即檢查是否同源，只有和百度同源的腳本才會被執行。如果非同源，那麽在請求數據時，瀏覽器會在控制臺中報一個異常，提示拒絕訪問。 示例 項目A:==================================http://127.0.0.1:8001項目的index<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button>ajax</button> {% csrf_token %} <script> $("button").click(function(){ $.ajax({ url:"http://127.0.0.1:8002/SendAjax/", type:"POST", data:{"username":"bender","csrfmiddlewaretoken":$("[name=‘csrfmiddlewaretoken‘]").val()}, success:function(data){ alert(data) } }) })</script> </body> </html> ==================================http://127.0.0.1:8001項目的views def index(request): return render(request,"index.html") def ajax(request): import json print(request.POST) return HttpResponse(json.dumps("hello"))
項目B:
==================================http://127.0.0.1:8002項目的index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button>sendAjax</button> {% csrf_token %} <script> $("button").click(function(){ $.ajax({ url:"/SendAjax/", type:"POST", data:{"username":"bender","csrfmiddlewaretoken":$("[name=‘csrfmiddlewaretoken‘]").val()}, success:function(data){ alert(data) } }) }) </script> </body> </html> ==================================http://127.0.0.1:8002項目的views def index(request): return render(request,"index.html") from django.views.decorators.csrf import csrf_exempt @csrf_exempt def SendAjax(request): import json return HttpResponse(json.dumps("hello2"))
當點擊項目1的按鈕時，發送了請求，但是會發現報錯如下：
已攔截跨源請求：同源策略禁止讀取位於 http://127.0.0.1:8002/SendAjax/ 的遠程資源。（原因：CORS 頭缺少 ‘Access-Control-Allow-Origin‘）。
但是註意，項目2中的訪問已經發生了，說明是瀏覽器對非同源請求返回的結果做了攔截。
Jsonp
借助script標簽，實現跨域請求：
# =============================http://127.0.0.1:8001/index <button>ajax</button> {% csrf_token %} <script> function func(name){ alert(name) } </script> <script src="http://127.0.0.1:8002/SendAjax/"></script> # =============================http://127.0.0.1:8002/ from django.views.decorators.csrf import csrf_exempt @csrf_exempt def SendAjax(request): import json print("++++++++") # dic={"k1":"v1"} return HttpResponse("func(‘yuan‘)") # return HttpResponse("func(‘%s‘)"%json.dumps(dic))
這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：創建一個回調函數，然後在遠程服務上調用這個函數並且將JSON 數據形式作為參數傳遞，完成回調。
將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。
jQuery對JSONP的實現
getJSON
jQuery框架也當然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法
<button onclick="f()">sendAjax</button> <script> function f(){ $.getJSON("http://127.0.0.1:8002/SendAjax/?callbacks=?",function(arg){ alert("hello"+arg) }); } </script>8001修改如下，8002不變
結果是一樣的，要註意的是在url的後面必須添加一個callback參數，這樣getJSON方法才會知道是用JSONP方式去訪問服務，callback後面的那個問號是內部自動生成的一個回調函數名。
此外，如果說我們想指定自己的回調函數名，或者說服務上規定了固定回調函數名該怎麽辦呢？我們可以使用$.ajax方法來實現
$.ajax
<script> function f(){ $.ajax({ url:"http://127.0.0.1:7766/SendAjax/", dataType:"jsonp", jsonp: ‘callbacks‘, jsonpCallback:"SayHi" }); } function SayHi(arg){ alert(arg); } </script>8001修改如下，8002不變
<script> function f(){ $.ajax({ url:"http://127.0.0.1:8002/SendAjax/", dataType:"jsonp", //必須有，告訴server，這次訪問要的是一個jsonp的結果。 jsonp: ‘callbacks‘, //jQuery幫助隨機生成的：callbacks="隨機字符創" success:function(data){ alert("hi "+data) } }); } </script>回調函數版
jsonp: ‘callbacks‘就是定義一個存放回調函數的鍵，jsonpCallback是前端定義好的回調函數方法名‘SayHi‘，server端接受callback鍵對應值後就可以在其中填充數據打包返回了;
jsonpCallback參數可以不定義，jquery會自動定義一個隨機名發過去，那前端就得用回調函數來處理對應數據了。利用jQuery可以很方便的實現JSONP來進行跨域訪問。
註意 JSONP一定是GET請求
<input type="button" onclick="AjaxRequest()" value="跨域Ajax" /> <div id="container"></div> <script type="text/javascript"> function AjaxRequest() { $.ajax({ url: ‘http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403‘, type: ‘GET‘, dataType: ‘jsonp‘, jsonp: ‘callback‘, jsonpCallback: ‘list‘, success: function (data) { $.each(data.data,function(i){ var item = data.data[i]; var str = "<p>"+ item.week +"</p>"; $(‘#container‘).append(str); $.each(item.list,function(j){ var temp = "<a href=‘" + item.list[j].link +"‘>" + item.list[j].name +" </a><br/>"; $(‘#container‘).append(temp); }); $(‘#container‘).append("<hr/>"); }) } }); } </script>跨域應用
Jsonp實現跨域訪問