jsonp現實跨域Ajax CORS

瀏覽器有一個很重要的概念——同源策略(Same-Origin Policy)。所謂同源是指，域名，協議，端口相同。不一樣源的客戶端腳本(javascript、ActionScript)在沒明確受權的狀況下，不能讀寫對方的資源。可是服務器是返回資源和獲取到客服端的數據,只是瀏覽器阻止了

 

XMLHttpRequest遵循同源策略,咱們默認發送的請求都是同XMLHttpRequest對象發送的.

 

以下同源策略起做用:

 

JSONP就像是JSON+Padding同樣(Padding這裏咱們理解爲填充)
(JSON with Padding)是JSON的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。因爲同源策略，通常來講位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

 

注意:script  img  a  iframe標籤是容許的跨域請求的,不遵循同源策略

 

Jsonp原理利用script標籤獲取外部地址數據,獲取遠程數據的時候,返回後的數據必需要包裹一個script函數名,在本地script執行的時候,執行服務器返回的函數結個:

1 獲取數據

 Veiw代碼:

def jsopdata(request):
    return HttpResponse("數據返回成功")
    #return HttpResponse('func("數據返回成功")')



Html代碼:

<div id="content"></div>
<input type="button" value="測試3" onclick="jsonp3()">

<script>

function jsonp3() {
    var tag = document.createElement("script");
    tag.src = "http://www.a.com/jsopdata/";
    document.head.appendChild(tag);  //增長一個標籤;放到head裏面
    document.head.removeChild(tag);  //刪除一個標籤
} //利用script標籤打破瀏覽器的同源策略;這樣能貨到數據了

<script/>

script標籤獲取到服務器數據,但由於是script標籤裏面的內容,全部顯示以下錯誤,咱們須要遵循script語法

 

 

2 修改script代碼  和  view代碼 

  veiw代碼

def jsopdata(request):
    # return HttpResponse("數據返回成功")
    return HttpResponse('func("數據返回成功")')

Html代碼:

<div id="content"></div>
<input type="button" value="測試3" onclick="jsonp3()">

<script>

function jsonp3() {
    var tag = document.createElement("script");
    tag.src = "http://www.a.com/jsopdata/";
    document.head.appendChild(tag);  //增長一個標籤;放到head裏面
    document.head.removeChild(tag);  //刪除一個標籤
} //利用script標籤打破瀏覽器的同源策略;這樣能貨到數據了

function func(arg) {　　　　//執行服務器返回的函數
    console.log(arg);
     $("#content").html(arg)  //arg是服務器返回函數的內容
}

<script/>

 

3 經過jQuery中的Ajax方式訪問:

View代碼:

def jsopdata(request):
    # return HttpResponse("數據返回成功")
    return HttpResponse('func("數據返回成功")')

 

 

html代碼

<div id="content"></div>
<input type="button" value="測試1" onclick="jsonp1()">
<input type="button" value="測試2" onclick="jsonp2()">

<script>
function jsonp2() {
    $.ajax({
        url:"http://www.a.com/jsopdata/",
        type:"GET",   //只能用GET方式,若是改爲其餘的方式Jsonp會給你修改爲GET方式
        dataType:"jsonp",  //使用jsonp方式;也就是說指定jsonp方式後,不在使用XMLHttpRequst對像發送請求,而是按照上面內容寫的,經過建立scritp標籤來獲取內容,而後刪掉剛建立script標籤
        data:{'id':2},
        success:function (arg) {
            $("#content").html(arg)
        }

function func(arg) {     //這函數寫死了,也就是說服務器端必須返回帶有這個函數名和數據的內容,才能執行.須要寫活這塊看下面
    console.log(arg);
     $("#content").html(arg)
}

 <scprit />

 

4 須要寫活服務端的返回的函數

view代碼:

 

def jsopdata(request):

    f = request.GET.get("callback")
    print(f)
    # return HttpResponse("數據返回成功")
    return HttpResponse('%s("數據返回成功")' %(f))

 

html代碼:

 

<div id="content"></div>
<input type="button" value="測試1" onclick="jsonp1()">
<input type="button" value="測試2" onclick="jsonp2()">

 

 

function jsonp2() {
    $.ajax({
        url:"http://www.a.com/jsopdata/",   //這裏面不須要直接寫callback=func;否則返回數據會有問題.
        type:"GET",
        dataType:"jsonp",
        data:{'id':2},
        jsonp:"callback", 　　　　//至關於等於http://www.a.com/jsopdata/?callback        (鍵)
        jsonpCallback:'func',  　　//至關於等於http://www.a.com/jsopdata/?callback=func  (值)若是不寫會隨機生成字符串發送
        success:function (arg) {   //success:function func(arg)結果同樣
            $("#content").html(arg)

        }
    })
}



CORS:
發送時候瀏覽器提示:
　　已攔截跨源請求：同源策略禁止讀取位於http://127.0.0.1:8000/server/的遠程資源。（緣由：CORS 頭缺乏 'Access-Control-Allow-Origin'）

def index(request):
    repsone =  render(request,"index.html")
    repsone['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8000'   #容許這個地址請求經過便可 也能夠加*容許全部,列表也能夠加
    return  repsone

$("#run").click(function () {
    alert(123);
    $.ajax({
        url:'http://127.0.0.1:8000/server/',
        type:"get",
        success:function (data) {
            console.log(data)
        }
    })
})