1.知識儲備

(1)json

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

(2)JavaScript的序列化與反序列化

序列化：JSON.stringify()

反序列化：JSON.parse()

2.jQuery實現Ajax

語法：$.ajax()

參數：

請求參數：url                  #當前請求的地址
type                 #當前請求的方式
data                 #當前請求要發送的數據
processData          #是否對data中的數據做編碼處理
contentType          #當前請求發送的數據類型traditional          #當data中有數組是使用，為true時直接將數組發送到服務端，為false時進行深層次迭代響應參數：dataType             #預期服務端返回的數據類型，可用的值有：html｜xml｜json｜text｜script

3.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(),
 })

4.jQueryd的serialize()方法

#serialize()方法用于自動獲取需要提交的表單數據并序列化
1、直接找到表單對象，對所有數據序列化
$('form').serialize()

2、對指定的表單數據進行序列化
$(':text,select').serialize()

5.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中發送

6.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);    
            }
        };

7.同源策略的概念

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

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

8.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>

以上就是動力節點小編介紹的"ajax實現的詳解"，希望對大家有幫助，想了解更多可查看AJAX教程，如有疑問，請在線咨詢，有專業老師隨時為您服務。