Ajax實現

    一、知識儲備

    1、json

    由於使用Ajax發送的大多是json數據，所以我們需要先了解一下json是什么。首先json指的是一種輕量級的數據交換格式，它所支持的數據類型是JavaScript數據類型的一個子集，它支持數字，字符串，布爾值，類列表，類字典，null，json數據只支持雙引號，json字符串由單引號包裹。

 

    2、JavaScript的序列化與反序列化

    序列化：JSON.stringify()

    反序列化：JSON.parse()

 

  二、jQuery實現Ajax

     語法：$.ajax()

     參數：

請求參數：
url #當前請求的地址 type #當前請求的方式 data #當前請求要發送的數據 processData #是否對data中的數據做編碼處理 contentType #當前請求發送的數據類型
traditional #當data中有數組是使用，為true時直接將數組發送到服務端，為false時進行深層次迭代

響應參數：
dataType #預期服務端返回的數據類型，可用的值有：html｜xml｜json｜text｜script

 

   三、Ajax發POST請求攜帶Django的CSRFTOKEN的方法

1、通過Django模板語言獲取csrftoken,並設置相應鍵值對 $.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf_token }}' }, }); 2、通過jQuery.cookie獲取csrftoken並設置到請求頭中 <script src="jquery.cookie.js路徑' %}"></script> $.ajax({ headers:{"X-CSRFToken":$.cookie('csrftoken')}, }) 3、獲取csrftoken標簽生成的input標簽的value值，並設置相應鍵值對 {% csrf_token %} $.ajax({ data:{csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),

 })

 

    四、jQueryd的serialize()方法

#serialize()方法用於自動獲取需要提交的表單數據並序列化
1、直接找到表單對象，對所有數據序列化 $('form').serialize() 2、對指定的表單數據進行序列化 $(':text,select').serialize()

 

   五、Ajax通過FormData發送文件

#FormDta可以發送任意類型的數據
var formdata=new FormData();   #創建FormData對象
 formdata.append("upload_file",$()[0].files[])  #向FormData對象中添加鍵值對，document對象的files方法獲取文件對象列表，第一個對象就是當前准備上傳的文件
 $.ajax({data:formdata,contentType:false,processData:false}) #添加到data中發送

 

   六、JavaScript實現Ajax

   1、創建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; }

 

     2、創建與服務器的連接

var xmlHttp = createXMLHttpRequest(); xmlHttp.open("GET", "/ajax_get/?a=1", true);　 #第一個參數為請求方式，第二個參數為請求的服務器地址，第三個參數表示是否異步請求，默認不傳值為true

 

     3、發送請求

1、get請求 xmlHttp.send(null); #get請求沒有請求體數據，但是需要發送null，否則會引起火狐瀏覽器無法正常發送 2、post請求 xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)；  #設置請求頭，form表單會默認這個鍵值對不設定，Web服務器會忽略請求體的內容。
xmlHttp.send(“username=yuan&password=123”) #設置請求體數據

 

     4、接收服務器響應

      XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態發生變化時被調用，而XMLHttpRequest對象一共有5種狀態分別是0：初始化未完成狀態，只是創建了XMLHttpRequest對象，還未調用open()方法；1：請求已開始，open()方法已調用，但還沒調用send()方法；2：請求發送完成狀態，send()方法已調用；3：開始讀取服務器響應；4：讀取服務器響應結束。onreadystatechange事件只會在除0以外的狀態下觸發。 

#狀態碼和響應內容只有在狀態4才能獲取到
xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert(xmlHttp.responseText); } };

 

 

      七、同源策略的概念

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

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

 

     

      八、JSONP的概念與實現

     jsonp是實現跨域請求的一種方法，利用的是script標簽的src屬性具有無視同源策略的特性，將需要訪問的非同源地址放在script標簽的src屬性中進行訪問，非同源站點的視圖函數則響應一個指定回調函數的字符串，並將json數據作為回調函數的參數一起返回給請求方。

     

    jsonp的JavaScript實現 

#請求方頁面
<button onclick="f()">sendAjax</button>

<script>
    #創建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) } #將需要調用的回調函數通過url傳參的方式傳遞給響應方視圖函數 function f(){ addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func") } </script>
 #響應方視圖函數 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)))

 

      jQuery實現

     

1、getJSON方法實現
#url的后面必須添加一個callback參數，callback后面的那個問號是內部自動生成的一個回調函數名
<button onclick="f()">sendAjax</button>

<script>

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

2、Ajax實現
 #用自定義回調函數處理響應，jsonp定義回調函數的鍵，jsonpCallback定義回調函數的值即回調函數函數名
<script>

    function f(){
          $.ajax({
                url:"http://127.0.0.1:7766/SendAjax/",
                dataType:"jsonp",
                jsonp: 'callbacks',           
                jsonpCallback:"SayHi"
           });

       }

    function SayHi(arg){
                alert(arg);
            }

</script>



<script>
    #用Ajax的success回調函數處理響應

    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>