Ajax跨域請求 同源策略與Jsonp
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪個頁面的，即檢查是否同源，只有和百度同源的腳本才會被執行。如果非同源，那麽在請求數據時，瀏覽器會在控制臺中報一個異常，提示拒絕訪問。
示例：
項目1:
==================================http://127.0.0.1:8001項目的index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h3>pro1的首頁</h3>
<button class="b2">send a request</button>
<script>
$(".b2").click(function () {
$.ajax({
url:"http://127.0.0.1:8002/ajax_send/", // 瀏覽器的同源策略的原因，AJax無法發送跨域請求
success:function (data) {
alert(data)
}
})
});
==================================http://127.0.0.1:8001項目的views
from django.shortcuts import render,HttpResponse
def index(request):
return render(request,"index.html")
def ajax_send(request):
return HttpResponse("項目1的數據")
項目2
==================================http://127.0.0.1:8002項目的index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h3>pro2的首頁</h3>
<button class="b2">send a request</button>
<script>
$(".b2").click(function () {
$.ajax({
url:"/ajax_send/",
success:function (data) {
alert(data)
}
})
})
</script>
</body>
</html>
==================================http://127.0.0.1:8002項目的views
from django.shortcuts import render,HttpResponse
def index(request):
return render(request,"index.html")
def ajax_send(request):
return HttpResponse("項目2的數據")
當點擊項目1的按鈕時，發送了請求，但是會發現報錯如下：
已攔截跨源請求：同源策略禁止讀取位於 http://127.0.0.1:8002/SendAjax/ 的遠程資源。（原因：CORS 頭缺少 ‘Access-Control-Allow-Origin‘）
但是註意，項目2中的訪問已經發生了，說明是瀏覽器對非同源請求返回的結果做了攔截
Jsonp
jsonp是json用來跨域的一個東西。原理是通過script標簽的跨域特性來繞過同源策略
我們發現通過script標簽可以實現跨域請求
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
借助script標簽，實現跨域請求，示例：
# =============================http://127.0.0.1:8001/index
<button class="b2">send a request</button>
<script>
function foo(data){
alert(data)
}
</script>
<script src="http://127.0.0.1:8002/SendAjax/?callback=foo"></script>
# =============================http://127.0.0.1:8002/
def ajax_send(request):
func=request.GET.get("callback")
print("func",func)
print("項目2........")
res={"name":"alex"}
import json
return HttpResponse("%s(‘%s‘)"%(func,json.dumps(res)))
這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：創建一個回調函數，然後在遠程服務上調用這個函數並且將JSON 數據形式作為參數傳遞，完成回調。
將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。
一般情況下，我們希望這個script標簽能夠動態的調用，而不是像上面因為固定在html裏面所以沒等頁面顯示就執行了，很不靈活。我們可以通過javascript動態的創建script標簽，這樣我們就可以靈活調用遠程服務了
function foo(s) {
console.log(s);
JSON.parse(s)
}
function kua_yu(url) {
// 生成 script標簽
var $ele_script=$("<script>");
$ele_script.attr("src",url);
$ele_script.attr("class","kuayu");
// 添加到body中
$("body").append($ele_script); // 發送請求
$(".kuayu").remove()
}
$(".b2").click(function () {
kua_yu( "http://127.0.0.1:8002/ajax_send/?callback=foo")
});
此處kua_yu函數用來生成script標簽，並在生成後再將他刪除，防止頁面上存在很多無意義的標簽，他接收一個url，用來確定請求的路徑
當點擊按鈕後就會調用kua_yu函數，並通過跨域請求返回的數據來調用foo函數，完成數據處理
jQuery對JSONP的實現
getJSON
jQuery框架也當然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法
8001的html改為：
//========================基於jquery的API實現跨域請求===================================
$(".b2").click(function () {
$.getJSON("http://127.0.0.1:8002/ajax_send/?callback=?",function (data) {
console.log(data);
})
});
jQuery的getJSON在處理callback=?時會生成一個隨機的函數名，當數據返回時，會直接調用後面的匿名函數function，裏面的data就是我們需要的數據
8002的views不改動。
結果是一樣的，要註意的是在url的後面必須添加一個callback參數，這樣getJSON方法才會知道是用JSONP方式去訪問服務，callback後面的那個問號是內部自動生成的一個回調函數名。
此外，如果說我們想指定自己的回調函數名，或者說服務上規定了固定回調函數名該怎麽辦呢？我們可以使用$.ajax方法來實現
$.ajax
8001的html改為：
$(".b2").click(function () {
$.ajax({
url:‘http://127.0.0.1:8002/ajax_send/‘,
dataType:"jsonp",
jsonp: ‘callback‘,
jsonpCallback:"SayHi"
});
});
function SayHi(arg){
alert(arg);
}
8002的views不改動。
當然，最簡單的形式還是通過回調函數來處理：
<script>
function f(){
$.ajax({
url:"http://127.0.0.1:8002/ajax_send/",
dataType:"jsonp", //必須有，告訴server，這次訪問要的是一個jsonp的結果。
jsonp: ‘callbacks‘, //jQuery幫助隨機生成的：callbacks="wner"
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>
Ajax跨域請求 同源策略與Jsonp