Django 【第十九篇】JS實現的ajax、同源策略和前端JSONP解決跨域問題

時間 2020-06-09

標籤 django 第十九篇實現 ajax 同源策略前端 jsonp 解決問題欄目 Python 简体版

原文原文鏈接

1、回顧jQuery實現的ajaxjavascript

首先說一下ajax的優缺點css

優勢：

AJAX使用Javascript技術向服務器發送異步請求；
AJAX無須刷新整個頁面；
由於服務器響應內容再也不是整個頁面，而是頁面中的局部，因此AJAX性能高；

jquery 實現的ajaxhtml

index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>

<button class="send_Ajax">send_Ajax</button>

<script>
      //$.ajax的兩種使用方式:

      //$.ajax(settings);
      //$.ajax(url,[settings]);


       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},

               success:function(data){
                   alert(data)
               },

                 //=================== error============

                error: function (jqXHR, textStatus, err) {

                        // jqXHR: jQuery加強的xhr
                        // textStatus: 請求完成狀態
                        // err: 底層經過throw拋出的異常對象，值與錯誤類型有關
                        console.log(arguments);
                    },

                 //=================== complete============

                complete: function (jqXHR, textStatus) {
                    // jqXHR: jQuery加強的xhr
                    // textStatus: 請求完成狀態 success | error
                    console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                    console.log('textStatus: %s', textStatus);
                },

                //=================== statusCode============
                statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                        console.log(arguments);  //注意：後端模擬errror方式：HttpResponse.status_code=500
                     },

                    '400': function () {
                    }
                }

           })

       })

</script>
</body>
</html>

Views.py

import json,time
 
def index(request):
 
    return render(request,"index.html")
 
def handle_Ajax(request):
 
    username=request.POST.get("username")
    password=request.POST.get("password")
 
    print(username,password)
    time.sleep(10)
 
    return HttpResponse(json.dumps("Error Data!"))

$.ajax參數

請求參數

######################------------data---------################

       data: 當前ajax請求要攜帶的數據，是一個json的object對象，ajax方法就會默認地把它編碼成某種格式
             (urlencoded:?a=1&b=2)發送給服務端；此外，ajax默認以get方式發送請求。

             function testData() {
               $.ajax("/test",{     //此時的data是一個json形式的對象
                  data:{
                    a:1,
                    b:2
                  }
               });                   //?a=1&b=2
######################------------processData---------################

processData：聲明當前的data數據是否進行轉碼或預處理，默認爲true，即預處理；if爲false，
             那麼對data：{a:1,b:2}會調用json對象的toString()方法，即{a:1,b:2}.toString()
             ,最後獲得一個［object，Object］形式的結果。
            
######################------------contentType---------################

contentType：默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。
             用來指明當前請求的數據編碼格式；urlencoded:?a=1&b=2；若是想以其餘方式提交數據，
             好比contentType:"application/json"，即向服務器發送一個json字符串：
               $.ajax("/ajax_get",{
             
                  data:JSON.stringify({
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",
                   type:"POST",
             
               });                          //{a: 22, b: 33}

             注意：contentType:"application/json"一旦設定，data必須是json字符串，不能是json對象

             views.py:   json.loads(request.body.decode("utf8"))


######################------------traditional---------################

traditional：通常是咱們的data數據有數組時會用到 ：data:{a:22,b:33,c:["x","y"]},
              traditional爲false會對數據進行深層次迭代；

響應參數

/*

dataType：  預期服務器返回的數據類型,服務器端返回的數據會根據這個值解析後，傳遞給回調函數。
            默認不須要顯性指定這個屬性，ajax會根據服務器返回的content Type來進行轉換；
            好比咱們的服務器響應的content Type爲json格式，這時ajax方法就會對響應的內容
            進行一個json格式的轉換，if轉換成功，咱們在success的回調函數裏就會獲得一個json格式
            的對象；轉換失敗就會觸發error這個回調函數。若是咱們明確地指定目標類型，就可使用
            data Type。
            dataType的可用值：html｜xml｜json｜text｜script
            見下dataType實例

*/

小練習：計算兩個數的和前端

方式一：這裏沒有指定contentType：默認是urlencode的方式發的java

index.htmlpython

<!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">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<h1>計算兩個數的和，測試ajax</h1>
<input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="ret">
<button class="send_ajax">sendajax</button>

<script>
    $(".send_ajax").click(function () {
         $.ajax({
            url:"/sendAjax/",
            type:"post",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},   
            data:{
                num1:$(".num1").val(),
                num2:$(".num2").val(),
            },
            success:function (data) {
               alert(data);
               $(".ret").val(data)
            }
        })
    })

</script>
</body>
</html>

views.pyjquery

def index(request):
    return render(request,"index.html")

def sendAjax(request):
    print(request.POST)
    print(request.GET)
    print(request.body)  
    num1 = request.POST.get("num1")
    num2 = request.POST.get("num2")
    ret = float(num1)+float(num2)
    return HttpResponse(ret)

方式二：指定conentType爲json數據發送：ajax

index2.htmldjango

<script>
    $(".send_ajax").click(function () {
         $.ajax({
            url:"/sendAjax/",
            type:"post",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},   //若是是json發送的時候要用headers方式解決forbidden的問題
            data:JSON.stringify({
                num1:$(".num1").val(),
                num2:$(".num2").val()
            }),
            contentType:"application/json",  //客戶端告訴瀏覽器是以json的格式發的數據，因此的吧發送的數據轉成json字符串的形式發送
            success:function (data) {
               alert(data);
               $(".ret").val(data)
            }
        })
    })

</script>

views.pyjson

def sendAjax(request):
    import json
    print(request.POST)  #<QueryDict: {}>
    print(request.GET)   #<QueryDict: {}>
    print(request.body)  #b'{"num1":"2","num2":"2"}'  注意這時的數據再也不POST和GET裏，而在body中
    print(type(request.body.decode("utf8")))  # <class 'str'>
    # 因此取值的時候得去body中取值，首先得反序列化一下
    data = request.body.decode("utf8")
    data = json.loads(data)
    num1= data.get("num1")
    num2 =data.get("num2")
    ret = float(num1)+float(num2)
    return HttpResponse(ret)

2、JS實現的ajax

一、AJAX核心（XMLHttpRequest）

其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。全部的異步交互都是使用XMLHttpServlet對象完成的。也就是說，咱們只須要學習一個Javascript的新對象便可。

var xmlHttp = new XMLHttpRequest()；（大多數瀏覽器都支持DOM2規範）

注意，各個瀏覽器對XMLHttpRequest的支持也是不一樣的！爲了處理瀏覽器兼容問題，給出下面方法來建立XMLHttpRequest對象：

function createXMLHttpRequest() {
        var xmlHttp;
        // 適用於大多數瀏覽器，以及IE7和IE更高版本
        try{
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // 適用於IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                // 適用於IE5.5，以及IE更早版本
                try{
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){}
            }
        }            
        return xmlHttp;
    }

二、使用流程

一、打開與服務器的鏈接（open）

當獲得XMLHttpRequest對象後，就能夠調用該對象的open()方法打開與服務器的鏈接了。open()方法的參數以下：

open(method, url, async)：

method：請求方式，一般爲GET或POST；
url：請求的服務器地址，例如：/ajaxdemo1/AServlet，若爲GET請求，還能夠在URL後追加參數；
async：這個參數能夠不給，默認值爲true，表示異步請求；

var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/?a=1", true);

二、發送請求

當使用open打開鏈接後，就能夠調用XMLHttpRequest對象的send()方法發送請求了。send()方法的參數爲POST請求參數，即對應HTTP協議的請求體內容，如果GET請求，須要在URL後鏈接參數。

注意：若沒有參數，須要給出null爲參數！若不給出null爲參數，可能會致使FireFox瀏覽器不能正常發送請求！

xmlHttp.send(null);

三、接收服務器的響應（5個狀態，4個過程）

當請求發送出去後，服務器端就開始執行了，但服務器端的響應尚未接收到。接下來咱們來接收服務器的響應。

XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態發生變化時被調用。下面介紹一下XMLHttpRequest對象的5種狀態：

0：初始化未完成狀態，只是建立了XMLHttpRequest對象，還未調用open()方法；
1：請求已開始，open()方法已調用，但還沒調用send()方法；
2：請求發送完成狀態，send()方法已調用；
3：開始讀取服務器響應；
4：讀取服務器響應結束。

onreadystatechange事件會在狀態爲1、2、3、4時引起。

　　下面代碼會被執行四次！對應XMLHttpRequest的四種狀態！

xmlHttp.onreadystatechange = function() {
            alert('hello');
        };

但一般咱們只關心最後一種狀態，即讀取服務器響應結束時，客戶端纔會作出改變。咱們能夠經過XMLHttpRequest對象的readyState屬性來獲得XMLHttpRequest對象的狀態。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                alert('hello');    
            }
        };

其實咱們還要關心服務器響應的狀態碼xmlHttp.status是否爲200，其服務器響應爲404，或500，那麼就表示請求失敗了。咱們能夠經過XMLHttpRequest對象的status屬性獲得服務器的狀態碼。

最後，咱們還須要獲取到服務器響應的內容，能夠經過XMLHttpRequest對象的responseText獲得服務器響應內容。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                alert(xmlHttp.responseText);    
            }
        };

須要注意的：

若是是post請求：

基於JS的ajax沒有Content-Type這個參數了，也就不會默認是urlencode這種形式了，須要咱們本身去設置

<1>須要設置請求頭：xmlHttp.setRequestHeader(「Content-Type」, 「application/x-www-form-urlencoded」)；
注意 :form表單會默認這個鍵值對不設定，Web服務器會忽略請求體的內容。

<2>在發送時能夠指定請求體了：xmlHttp.send(「username=yuan&password=123」)

基於jQuery的ajax和form發送的請求，都會默認有Content-Type，默認urlencode，

Content-Type:客戶端告訴服務端我此次發送的數據是什麼形式的
dataType:客戶端指望服務端給我返回我設定的格式

若是是get請求：

xmlhttp.open("get","/sendAjax/?a=1&b=2");

小練習：和上面的練習同樣，只是換了一種方式(能夠和jQuery的對比一下)

<script>
方式一=======================================
    //基於JS實現實現用urlencode的方式
    var ele_btn = document.getElementsByClassName("send_ajax")[0];
    ele_btn.onclick = function () {  //綁定事件
        alert(5555);
        //發送ajax:有一下幾步
        //（1）獲取XMLResquest對象
        xmlhttp = new XMLHttpRequest();
        //（2）鏈接服務器
        //get請求的時候，必用send發數據，直接在請求路徑裏面發
{#        xmlhttp.open("get","/sendAjax/?a=1&b=2");//open裏面的參數，請求方式，請求路徑#}
        //post請求的時候，須要用send發送數據
        xmlhttp.open("post","/sendAjax/");
        //設置請求頭的Content-Type
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //（3）發送數據
        var ele_num1 = document.getElementsByClassName("num1")[0];
        var ele_num2 = document.getElementsByClassName("num2")[0];
        var ele_ret = document.getElementsByClassName("ret")[0];
        var ele_scrf = document.getElementsByName("csrfmiddlewaretoken")[0];


        var s1 = "num1="+ele_num1.value;
        var s2 = "num2="+ele_num2.value;
        var s3 = "&csrfmiddlewaretoken="+ele_scrf.value;
        xmlhttp.send(s1+"&"+s2+s3);  //請求數據
        //（4）回調函數，success
        xmlhttp.onreadystatechange = function () {
            if (this.readyState==4&&this.status==200){
                alert(this.responseText);
                ele_ret.value = this.responseText
            }
        }
    }


方式二====================================================

{#    ===================json=============#}
    var ele_btn=document.getElementsByClassName("send_ajax")[0];
    ele_btn.onclick=function () {

        // 發送ajax

         // （1） 獲取 XMLHttpRequest對象
         xmlHttp = new XMLHttpRequest();

         //  (2) 鏈接服務器
        //  get
        //xmlHttp.open("get","/sendAjax/?a=1&b=2");

        //  post
        xmlHttp.open("post","/sendAjax/");

        // 設置請求頭的Content-Type
        var ele_csrf=document.getElementsByName("csrfmiddlewaretoken")[0];
        xmlHttp.setRequestHeader("Content-Type","application/json");
        xmlHttp.setRequestHeader("X-CSRFToken",ele_csrf.value);  //利用js的方式避免forbidden的解決辦法

        // （3） 發送數據
         var ele_num1 = document.getElementsByClassName("num1")[0];
        var ele_num2 = document.getElementsByClassName("num2")[0];
        var ele_ret = document.getElementsByClassName("ret")[0];


        var s1 = ele_num1.value;
        var s2 = ele_num2.value;
        xmlHttp.send(JSON.stringify(
            {"num1":s1,"num2":s2}
        )) ;   // 請求體數據
        // （4） 回調函數  success
        xmlHttp.onreadystatechange = function() {
            if(this.readyState==4 && this.status==200){
                console.log(this.responseText);
                ele_ret.value = this.responseText
            }
        };
    }

</script>

views.py

def sendAjax(request):
    num1=request.POST.get("num1")
    num2 = request.POST.get("num2")
    ret = float(num1)+float(num2)
    return HttpResponse(ret)

JS實現ajax小結

建立XMLHttpRequest對象；
    調用open()方法打開與服務器的鏈接；
    調用send()方法發送請求；
    爲XMLHttpRequest對象指定onreadystatechange事件函數，這個函數會在

    XMLHttpRequest的一、二、三、4，四種狀態時被調用；

    XMLHttpRequest對象的5種狀態，一般咱們只關心4狀態。

    XMLHttpRequest對象的status屬性表示服務器狀態碼，它只有在readyState爲4時才能獲取到。

    XMLHttpRequest對象的responseText屬性表示服務器響應內容，它只有在
    readyState爲4時才能獲取到！

總結：

- 若是"Content-Type"="application/json"，發送的數據是對象形式的{},須要在body裏面取數據，而後反序列化
= 若是"Content-Type"="application/x-www-form-urlencoded"，發送的是/index/?name=haiyan&agee=20這樣的數據，
  若是是POST請求須要在POST裏取數據，若是是GET，在GET裏面取數據

實例（用戶名是否已被註冊）

7.1　功能介紹

在註冊表單中，當用戶填寫了用戶名後，把光標移開後，會自動向服務器發送異步請求。服務器返回true或false，返回true表示這個用戶名已經被註冊過，返回false表示沒有註冊過。

客戶端獲得服務器返回的結果後，肯定是否在用戶名文本框後顯示「用戶名已被註冊」的錯誤信息！

7.2　案例分析

頁面中給出註冊表單；
在username表單字段中添加onblur事件，調用send()方法；
send()方法獲取username表單字段的內容，向服務器發送異步請求，參數爲username；
django 的視圖函數：獲取username參數，判斷是否爲「yuan」，若是是響應true，不然響應false

參考代碼：

<script type="text/javascript">
        function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
        }

        function send() {
            var xmlHttp = createXMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    if(xmlHttp.responseText == "true") {
                        document.getElementById("error").innerText = "用戶名已被註冊！";
                        document.getElementById("error").textContent = "用戶名已被註冊！";
                    } else {
                        document.getElementById("error").innerText = "";
                        document.getElementById("error").textContent = "";
                    }
                }
            };
            xmlHttp.open("POST", "/ajax_check/", true, "json");
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var username = document.getElementById("username").value;
            xmlHttp.send("username=" + username);
        }
</script>

//--------------------------------------------------index.html

<h1>註冊</h1>
<form action="" method="post">
用戶名：<input id="username" type="text" name="username" onblur="send()"/><span id="error"></span><br/>
密　碼：<input type="text" name="password"/><br/>
<input type="submit" value="註冊"/>
</form>


//--------------------------------------------------views.py
from django.views.decorators.csrf import csrf_exempt

def login(request):
    print('hello ajax')
    return render(request,'index.html')
    # return HttpResponse('helloyuanhao')

@csrf_exempt
def ajax_check(request):
    print('ok')

    username=request.POST.get('username',None)
    if username=='yuan':
        return HttpResponse('true')
    return HttpResponse('false')

3、同源策略與jsonp

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

同源策略，它是由Netscape提出的一個著名的安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行。若是非同源，那麼在請求數據時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。

jsonp（jsonpadding）

以前發ajax的時候都是在本身給本身的當前的項目下發

如今咱們來實現跨域發。給別人的項目發數據，

建立兩個項目，先來測試一下

項目一：

<body>
<h1>項目一</h1>
<button class="send_jsonp">jsonp</button>
<script>
    $(".send_jsonp").click(function () {
        $.ajax({
            url:"http://127.0.0.1:8080/ajax_send2/",   #去請求項目二中的url
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>
</body>

項目二：

=========================index.html=====================
<h1>項目二</h1>
<button class="send_jsonp">jsonp</button>
<script>
    $(".send_jsonp").click(function () {
        $.ajax({
            url:"/ajax_send2/",
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>
</body>

=========================views========================

from django.shortcuts import render,HttpResponse

# Create your views here.
def index(request):
    return render(request, "index.html")
def ajax_send2(request):
    print(222222)
    return HttpResponse("hello")

出現了一個錯誤，這是由於同源策略給限制了，這是遊覽器給咱們報的一個錯

(可是注意，項目2中的訪問已經發生了，說明是瀏覽器對非同源請求返回的結果作了攔截。)

注意：a標籤，form，img標籤，引用cdn的css等也屬於跨域（跨不一樣的域拿過來文件來使用），不是全部的請求都給作跨域，（爲何要進行跨域呢？由於我想用人家的數據，因此得去別人的url中去拿，藉助script標籤）

若是用script請求的時候也會報錯，當你你返回的數據是一個return Httpresponse（「項目二」）只是一個名字而已，js中若是有一個變量沒有聲明，就會報錯。就像下面的這樣了

<script src="http://127.0.0.1:8080/ajax_send2/">
    項目二
</script>

只有發ajax的時候給攔截了，因此要解決的問題只是針對ajax請求可以實現跨域請求

解決同源策源的兩個方法：

一、jsonp（將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。）

jsonp是json用來跨域的一個東西。原理是經過script標籤的跨域特性來繞過同源策略。

思考：這算怎麼回事？

<script src="http://code.jquery.com/jquery-latest.js"></script>

藉助script標籤，實現跨域請求，示例：

因此只是單純的返回一個也沒有什麼意義，咱們須要的是數據

以下：能夠返回一個字典，不過也能夠返回其餘的（簡單的解決了跨域，利用script）

項目一：

<body>
<h1>項目一</h1>
<button class="send_jsonp">jsonp</button>
<script>
    $(".send_jsonp").click(function () {
        $.ajax({
            url:"",
            success:function (data) {
                console.log(data)
            }
        })
    });

    function func(arg) {
        console.log(arg)
    }
</script>
<script src="http://127.0.0.1:8080/ajax_send2/"></script>
</body>

項目二：

def ajax_send2(request):
    import json
    print(222222)
    # return HttpResponse("func('name')")
    s = {"name":"haiyan","age":12}
    # return HttpResponse("func('name')")
    return HttpResponse("func('%s')"%json.dumps(s))   #返回一個func()字符串，正好本身的ajax裏面有個func函數，就去執行func函數了，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　arg就是傳的形參

這樣就會取到值了

這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：建立一個回調函數，而後在遠程服務上調用這個函數而且將JSON 數據形式做爲參數傳遞，完成回調。

將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。

可是以上的方式也有不足，回調函數的名字和返回的那個名字的一致。而且通常狀況下，咱們但願這個script標籤可以動態的調用，而不是像上面由於固定在html裏面因此沒等頁面顯示就執行了，很不靈活。咱們能夠經過javascript動態的建立script標籤，這樣咱們就能夠靈活調用遠程服務了。

解決辦法：javascript動態的建立script標籤

===========================jQuery實現=====================
{#    建立一個script標籤，讓他請求一次，請求完了刪除他#}
    //動態生成一個script標籤,直接能夠定義個函數，放在函數裏面
    function add_script(url) {
        var ele_script = $("<script>");
        ele_script.attr("src",url);
        ele_script.attr("id","script");
        $("body").append(ele_script);
        $("#script").remove()
    }
    $(".kuayu").click(function () {
       add_script("http://127.0.0.1:8080/ajax_send2/")
    });


</script>



==================js實現==========================

<button onclick="f()">sendAjax</button>

<script>
    function addScriptTag(src){
         var script = document.createElement('script');
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
         document.body.removeChild(script);
    }


    function func(name){
        alert("hello"+name)
    }

    function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/")
    }
</script>

爲了更加靈活，如今將你本身在客戶端定義的回調函數的函數名傳送給服務端，服務端則會返回以你定義的回調函數名的方法，將獲取的json數據傳入這個方法完成回調：

function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")
    }

將視圖views改成

def SendAjax(request):
 
    import json
 
    dic={"k1":"v1"}
 
    print("callbacks:",request.GET.get("callbacks"))   
    callbacks=request.GET.get("callbacks")   #注意要在服務端獲得回調函數名的名字
 
    return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))

4、jQuery對JSONP的實現

getJSON

jQuery框架也固然支持JSONP，可使用$.getJSON(url,[data],[callback])方法

<button onclick="f()">sendAjax</button>

<script>

    function f(){
          $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){
            alert("hello"+arg)
        });  匿名函數
    }
    
</script>

8002的views不改動。

結果是同樣的，要注意的是在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>

8002的views不改動。

固然，最簡單的形式仍是經過回調函數來處理：

<script>

    function f(){

            $.ajax({
               url:"http://127.0.0.1:7766/SendAjax/",
               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請求

5、應用

// 跨域請求實例
    $(".jiangxiTV").click(function () {

        $.ajax({
            url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403",
             dataType: 'jsonp',
             jsonp: 'callback',
             jsonpCallback: 'list',
             success:function (data) {
                 console.log(data.data);   //  [{},{},{},{},{},{}]
                 week_list=data.data;
                 
                 $.each(week_list,function (i,j) {
                     console.log(i,j);  // 1 {week: "週一", list: Array(19)}
                     s="<p>"+j.week+"列表</p>";
                     $(".show_list").append(s);

                     $.each(j.list,function (k,v) {  // {time: "0030", name: "通宵劇場六集連播", link: "http://www.jxntv.cn/live/jxtv2.shtml"}
                          a="<p><a href='"+v.link+"'>"+v.name+"</a></p>";
                          $(".show_list").append(a);
                     })
                 })
                 
             }
        })


    })