33)django-原生ajax,僞ajax

時間 2019-11-20

標籤 django 原生 ajax 欄目 Python 简体版

原文原文鏈接

一：概述

對於WEB應用程序：用戶瀏覽器發送請求，服務器接收並處理請求，而後返回結果，每每返回就是字符串（HTML），瀏覽器將字符串（HTML）渲染並顯示瀏覽器上。javascript

一、傳統的Web應用html

一個簡單操做須要從新加載全局數據java

二、AJAXjquery

AJAX，Asynchronous JavaScript and XML (異步的JavaScript和XML)，一種建立交互式網頁應用的網頁開發技術方案。ajax

異步的JavaScript：
使用【JavaScript語言】以及相關【瀏覽器提供類庫】的功能向服務端發送請求，當服務端處理完請求以後，【自動執行某個JavaScript的回調函數】。
PS：以上請求和響應的整個過程是【偷偷】進行的，頁面上無任何感知。

XML
XML是一種標記語言，是Ajax在和後臺交互時傳輸數據的格式之一

利用AJAX能夠作：
一、註冊時，輸入用戶名自動檢測用戶是否已經存在。
二、登錄時，提示用戶名密碼錯誤
三、刪除數據行時，將行ID發送到後臺，後臺在數據庫中刪除，數據庫刪除成功後，在頁面DOM中將數據行也刪除。數據庫

二：原生Ajax

ajax主要就是使用【XmlHttpRequest】對象來完成請求的操做，該對象在主流瀏覽器中均存在(除早起的IE)，Ajax首次出現IE5.5中存在（ActiveX控件）。json

　　一、XmlHttpRequest對象介紹瀏覽器

　　XmlHttpRequest對象的主要方法：服務器

a. void open(String method,String url,Boolen async)
   用於建立請求
    
   參數：
       method： 請求方式（字符串類型），如：POST、GET、DELETE...
       url：    要請求的地址（字符串類型）
       async：  是否異步（布爾類型）
 
b. void send(String body)
    用於發送請求
 
    參數：
        body： 要發送的數據（字符串類型）
 
c. void setRequestHeader(String header,String value)
    用於設置請求頭
 
    參數：
        header： 請求頭的key（字符串類型）
        vlaue：  請求頭的value（字符串類型）
 
d. String getAllResponseHeaders()
    獲取全部響應頭
 
    返回值：
        響應頭數據（字符串類型）
 
e. String getResponseHeader(String header)
    獲取響應頭中指定header的值
 
    參數：
        header： 響應頭的key（字符串類型）
 
    返回值：
        響應頭中指定的header對應的值
 
f. void abort()
 
    終止請求

　　XmlHttpRequest對象的主要屬性：app

a. Number readyState
   狀態值（整數）
 
   詳細：
      0-未初始化，還沒有調用open()方法；
      1-啓動，調用了open()方法，未調用send()方法；
      2-發送，已經調用了send()方法，未接收到響應；
      3-接收，已經接收到部分響應數據；
      4-完成，已經接收到所有響應數據；
 
b. Function onreadystatechange
   當readyState的值改變時自動觸發執行其對應的函數（回調函數）
 
c. String responseText
   服務器返回的數據（字符串類型）
 
d. XmlDocument responseXML
   服務器返回的數據（Xml對象）
 
e. Number states
   狀態碼（整數），如：200、404...
 
f. String statesText
   狀態文本（字符串），如：OK、NotFound...

二、跨瀏覽器支持

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <h1>XMLHttpRequest - Ajax請求</h1>
    <input type="button" onclick="XmlGetRequest();" value="Get發送請求" />
    <input type="button" onclick="XmlPostRequest();" value="Post發送請求" />

    <script src="/statics/jquery-1.12.4.js"></script>
    <script type="text/javascript">

        function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }

        function XhrPostRequest(){
            var xhr = GetXHR();
            // 定義回調函數
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已經接收到所有響應數據，執行如下操做
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定鏈接方式和地址----文件方式
            xhr.open('POST', "/test/", true);
            // 設置請求頭
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            // 發送請求
            xhr.send('n1=1;n2=2;');
        }

        function XhrGetRequest(){
            var xhr = GetXHR();
            // 定義回調函數
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已經接收到所有響應數據，執行如下操做
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定鏈接方式和地址----文件方式
            xhr.open('get', "/test/", true);
            // 發送請求
            xhr.send();
        }

    </script>

</body>
</html>

基於原生AJAX - Demo

View Code

三：僞ajax

因爲HTML標籤的iframe標籤具備局部加載內容的特性，因此能夠使用其來僞造Ajax請求。

<!DOCTYPE html>
<html>
 
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
 
    <body>
 
        <div>
            <p>請輸入要加載的地址：<span id="currentTime"></span></p>
            <p>
                <input id="url" type="text" />
                <input type="button" value="刷新" onclick="LoadPage();">
            </p>
        </div>
 
 
        <div>
            <h3>加載頁面位置：</h3>
            <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
        </div>
 
 
        <script type="text/javascript">
 
            window.onload= function(){
                var myDate = new Date();
                document.getElementById('currentTime').innerText = myDate.getTime();
 
            };
 
            function LoadPage(){
                var targetUrl =  document.getElementById('url').value;
                document.getElementById("iframePosition").src = targetUrl;
            }
 
        </script>
 
    </body>
</html>

View Code

四：ajax

jQuery其實就是一個JavaScript的類庫，其將複雜的功能作了上層封裝，使得開發者能夠在其基礎上寫更少的代碼實現更多的功能。

jQuery 不是生產者，而是大天然搬運工。
jQuery Ajax本質 XMLHttpRequest 或 ActiveXObject

　　注：2.+版本再也不支持IE9如下的瀏覽器

　　jQuery Ajax 方法列表

jQuery.get(...)
                全部參數：
                     url: 待載入頁面的URL地址
                    data: 待發送 Key/value 參數。
                 success: 載入成功時回調函數。
                dataType: 返回內容格式，xml, json,  script, text, html


            jQuery.post(...)
                全部參數：
                     url: 待載入頁面的URL地址
                    data: 待發送 Key/value 參數
                 success: 載入成功時回調函數
                dataType: 返回內容格式，xml, json,  script, text, html


            jQuery.getJSON(...)
                全部參數：
                     url: 待載入頁面的URL地址
                    data: 待發送 Key/value 參數。
                 success: 載入成功時回調函數。


            jQuery.getScript(...)
                全部參數：
                     url: 待載入頁面的URL地址
                    data: 待發送 Key/value 參數。
                 success: 載入成功時回調函數。


            jQuery.ajax(...)

                部分參數：

                        url：請求地址
                       type：請求方式，GET、POST（1.9.0以後用method）
                    headers：請求頭
                       data：要發送的數據
                contentType：即將發送信息至服務器的內容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8")
                      async：是否異步
                    timeout：設置請求超時時間（毫秒）

                 beforeSend：發送請求前執行的函數(全局)
                   complete：完成以後執行的回調函數(全局)
                    success：成功以後執行的回調函數(全局)
                      error：失敗以後執行的回調函數(全局)
                

                    accepts：經過請求頭髮送給服務器，告訴服務器當前客戶端課接受的數據類型
                   dataType：將服務器端返回的數據轉換成指定類型
                                   "xml": 將服務器端返回的內容轉換成xml格式
                                  "text": 將服務器端返回的內容轉換成普通文本格式
                                  "html": 將服務器端返回的內容轉換成普通文本格式，在插入DOM中時，若是包含JavaScript標籤，則會嘗試去執行。
                                "script": 嘗試將返回值看成JavaScript去執行，而後再將服務器端返回的內容轉換成普通文本格式
                                  "json": 將服務器端返回的內容轉換成相應的JavaScript對象
                                 "jsonp": JSONP 格式
                                          使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數

                                  若是不指定，jQuery 將自動根據HTTP包MIME信息返回相應類型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string

                 converters： 轉換器，將服務器端的內容根據指定的dataType轉換類型，並傳值給success回調函數
                         $.ajax({
                              accepts: {
                                mycustomtype: 'application/x-some-custom-type'
                              },
                              
                              // Expect a `mycustomtype` back from server
                              dataType: 'mycustomtype'

                              // Instructions for how to deserialize a `mycustomtype`
                              converters: {
                                'text mycustomtype': function(result) {
                                  // Do Stuff
                                  return newresult;
                                }
                              },
                            });

jQuery Ajax 方法列表

View Code

五：時機

時機：
若是發送的是普通數據-->jQuery,XMLHttpRequest,iframe
不普通：上傳文件

六：示例

　　1）原生ajax 提交數據，獲取數據

　　2）僞ajax 提交數據，獲取數據

##ajax
    原生
    jquery
    僞ajax操做（iframe)
    時機：
        若是發送的是普通數據-->jQuery,XMLHttpRequest,iframe
        不普通：上傳文件
        


##原生ajax
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="text">
        <input type="button" value="ajax" onclick="ajax1();">
        <script>
                //瀏覽器兼容
                function GetXHR(){
                var xhr = null;
                if(XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                return xhr;
    
            }
            function ajax1(){
                var xhr=GetXHR();
                xhr.open("POST","/ajax_json/",true);
                //回調函數，當狀態變化時觸發
                xhr.onreadystatechange=function(){
                    //4是表示全部數據接受完了
                    if (xhr.readyState==4){
                        //獲取返回值
                        console.log(xhr.responseText) //返回的是字符串
                        //轉對象
                        JSON.parse(xhr.responseText)
                    }
    
                }
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//直接這樣發後以是收不到，必需要設置發送的請求頭
                xhr.send("name=alex;password=123");//發送的數據只能是字符串
    
            }
        </script>
    </body>
    </html>

    def ajax_json(request):
        ret={"status":False,"data":None}
        if request.method=="GET":
    
            return HttpResponse(json.dumps(ret),status=200,reason="OK") #status返回狀態碼
        elif request.method=="POST":
            print(request.POST)
            ret["status"]=True
            return HttpResponse(json.dumps(ret))


##僞請求<iframe>會發請求

  <form action="/ajax_json/" method="post" target="ifm1">
        <!-- 普通form會刷新，咱們能夠把請求給iframe，target在iframe之間創建關聯，當提交的時候就會經過iframe把數據傳遞到後臺-->
        <iframe name="ifm1"></iframe>
        <input type="text" name="username">
        <input type="text" name="email">
        <input type="submit" value="form提交">
    </form>
    <!-- 上面是會刷新，咱們能夠把請求給iframe-->
    <script>
            //瀏覽器兼容
            function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }
        function ajax1(){
            var xhr=GetXHR();
            xhr.open("POST","/ajax_json/",true);
            //回調函數，當狀態變化時觸發
            xhr.onreadystatechange=function(){
                //4是表示全部數據接受完了
                if (xhr.readyState==4){
                    //獲取返回值
                    console.log(xhr.responseText) //返回的是字符串
                    //轉對象
                    JSON.parse(xhr.responseText)
                }

            }
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            xhr.setRequestHeader("k1","v1")//直接這樣發後以是收不到，必需要設置發送的請求頭
            xhr.send("name=alex;password=123");//發送的數據只能是字符串

        }
    </script>

    #數據放在iframe裏面了。


    #上面並無獲取到數據
    #這須要把值獲取出來。iframe裏面值是服務器何時返回就會顯示。這是一個onload事件。因此可能經過onload事件獲取結果

    <form action="/ajax_json/" method="post" target="ifm1">
        <!-- 普通form會刷新，咱們能夠把請求給iframe，target在iframe之間創建關聯，當提交的時候就會經過iframe把數據傳遞到後臺-->
        <iframe id="ifm1" name="ifm1"></iframe>
        <input type="text" name="username">
        <input type="text" name="email">
        <input type="submit" onclick="submit_ok();" value="form提交">
        <!-- 由於javascript是從上到下加載的，而js是放在下面的，因此第一次會出錯。
        能夠經過onclick="submit_ok"動態給iframe綁定onload事件-->
    </form>
    <!-- 上面是會刷新，咱們能夠把請求給iframe-->
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
            //瀏覽器兼容
            function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }
            function ajax1(){
            var xhr=GetXHR();
            xhr.open("POST","/ajax_json/",true);
            //回調函數，當狀態變化時觸發
            xhr.onreadystatechange=function(){
                //4是表示全部數據接受完了
                if (xhr.readyState==4){
                    //獲取返回值
                    console.log(xhr.responseText) //返回的是字符串
                    //轉對象
                    JSON.parse(xhr.responseText)
                }

            }
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            xhr.setRequestHeader("k1","v1")//直接這樣發後以是收不到，必需要設置發送的請求頭
            xhr.send("name=alex;password=123");//發送的數據只能是字符串

        }
            function submit_ok(){
            $("#ifm1").load(
                    function(){
                        //由於iframe裏面有document,因此獲取document（上下文）元素先用contents.
                        var content=$('#ifm1').contents().find('body').text();
                        console.log(content);
                    }
            )}

    </script>