1.知識儲備

(1)json

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

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

序列化：JSON.stringify()

反序列化：JSON.parse()

2.jQuery實現(xiàn)Ajax

語法：$.ajax()

參數(shù)：

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

3.Ajax發(fā)POST請求攜帶Django的CSRFTOKEN的方法

1、通過Django模板語言獲取csrftoken,并設(shè)置相應(yīng)鍵值對
$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});



2、通過jQuery.cookie獲取csrftoken并設(shè)置到請求頭中
<script src="jquery.cookie.js路徑' %}"></script>
$.ajax({
 
headers:{"X-CSRFToken":$.cookie('csrftoken')},
 
})


3、獲取csrftoken標(biāo)簽生成的input標(biāo)簽的value值，并設(shè)置相應(yīng)鍵值對
{% csrf_token %}
$.ajax({
data:{csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
 })

4.jQueryd的serialize()方法

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

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

5.Ajax通過FormData發(fā)送文件

#FormDta可以發(fā)送任意類型的數(shù)據(jù)
var formdata=new FormData();   #創(chuàng)建FormData對象

formdata.append("upload_file",$()[0].files[])  #向FormData對象中添加鍵值對，document對象的files方法獲取文件對象列表，第一個對象就是當(dāng)前準(zhǔn)備上傳的文件

$.ajax({data:formdata,contentType:false,processData:false})  #添加到data中發(fā)送

6.JavaScript實現(xiàn)Ajax

(1)創(chuàng)建XMLHttpRequest對象

function createXMLHttpRequest() {
        var xmlHttp;
        // 適用于大多數(shù)瀏覽器，以及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)創(chuàng)建與服務(wù)器的連接

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

(3)發(fā)送請求

1、get請求
xmlHttp.send(null);  #get請求沒有請求體數(shù)據(jù)，但是需要發(fā)送null，否則會引起火狐瀏覽器無法正常發(fā)送


2、post請求
xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)；  #設(shè)置請求頭，form表單會默認(rèn)這個鍵值對不設(shè)定，Web服務(wù)器會忽略請求體的內(nèi)容。
xmlHttp.send(“username=yuan&password=123”) #設(shè)置請求體數(shù)據(jù)

(4)接收服務(wù)器響應(yīng)

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

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

7.同源策略的概念

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響?？梢哉fWeb是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實現(xiàn)。

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

8.JSONP的概念與實現(xiàn)

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

jsonp的JavaScript實現(xiàn)

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

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


#響應(yīng)方視圖函數(shù)
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實現(xiàn)

1、getJSON方法實現(xiàn)
#url的后面必須添加一個callback參數(shù)，callback后面的那個問號是內(nèi)部自動生成的一個回調(diào)函數(shù)名
<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實現(xiàn)
 #用自定義回調(diào)函數(shù)處理響應(yīng)，jsonp定義回調(diào)函數(shù)的鍵，jsonpCallback定義回調(diào)函數(shù)的值即回調(diào)函數(shù)函數(shù)名
<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回調(diào)函數(shù)處理響應(yīng)

    function f(){

            $.ajax({
               url:"http://127.0.0.1:7766/SendAjax/",
               dataType:"jsonp",            //必須有，告訴server，這次訪問要的是一個jsonp的結(jié)果。
               jsonp: 'callbacks',          //jQuery幫助隨機生成的：callbacks="wner"
               success:function(data){
                   alert("hi "+data)
              }
         });

       }

</script>

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