同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同源策略，它是由Netscape提出的一個著名的安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行。若是非同源，那麼在請求數據時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。javascript
示例：
項目1:html
==================================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的按鈕時，發送了請求，可是會發現報錯以下：java
已攔截跨源請求：同源策略禁止讀取位於 http://127.0.0.1:8002/SendAjax/ 的遠程資源。（緣由：CORS 頭缺乏 'Access-Control-Allow-Origin'）
可是注意，項目2中的訪問已經發生了，說明是瀏覽器對非同源請求返回的結果作了攔截jquery
Jsonp
jsonp是json用來跨域的一個東西。原理是經過script標籤的跨域特性來繞過同源策略ajax
咱們發現經過script標籤能夠實現跨域請求django
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
藉助script標籤，實現跨域請求，示例：json
# =============================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>