python基礎---->AJAX的學習

時間  2019-11-12
標籤 python 基礎 ajax 學習 欄目 Python 简体版
原文   原文鏈接

前言

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

而在傳統的Web應用中，一個簡單操做須要從新加載全局數據；ajax

而AJAX就改變了這種方式數據庫

什麼是AJAX？

AJAX，Asynchronous JavaScript and XML (異步的JavaScript和XML)，一種建立交互式網頁應用的網頁開發技術方案，是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。json

異步的JavaScript：使用 【JavaScript語言】 以及 相關【瀏覽器提供類庫】 的功能向服務端發送請求，當服務端處理完請求以後，【自動執行某個JavaScript的回調函數】。跨域

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

AJAX的工做原理

AJAX是基於現有的Internet標準，而且聯合使用它們：緩存

  • XMLHttpRequest 對象 (異步的與服務器交換數據)
  • JavaScript/DOM (信息顯示/交互)
  • CSS (給數據定義樣式)
  • XML (做爲轉換數據的格式)

AJAX的應用場景

註冊時，自動檢測用戶是否已經存在；登陸時，提示用戶名密碼錯誤緣由等等服務器

XmlHttpRequest對象

關於XMLHttpRequest 

XMLHttpRequest 是 AJAX 的基礎。app

全部現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。異步

XMLHttpRequest 用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

建立XMLHttpRequest 對象

全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象，老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執行代碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

XHR-服務器請求

如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

XmlHttpRequest對象的主要方法介紹：

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

GET和POST的區別：

與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

在如下狀況中，使用 POST 請求：

  • 沒法使用緩存文件（更新服務器上的文件或數據庫）
  • 向服務器發送大量數據（POST 沒有數據量限制）
  • 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

XHR-服務器響應

若是須要得到來自服務器的響應，那就使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

responseText    # 得到字符串形式的響應數據。
responseXML     # 得到 XML 形式的響應數據。

舉個栗子：

# responseText 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

onreadystatechange 事件

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務；每當 readyState 改變時，就會觸發 onreadystatechange 事件；readyState 屬性存有 XMLHttpRequest 的狀態信息。

onreadystatechange    # 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

readyState  # 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
    0: 請求未初始化
    1: 服務器鏈接已創建
    2: 請求已接收
    3: 請求處理中
    4: 請求已完成，且響應已就緒

status
    200: "OK"
    404: 未找到頁面

在 onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

實例：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

使用回調函數

回調函數是一種以參數形式傳遞給另外一個函數的函數，若上存在多個 AJAX 任務，那麼您應該爲建立 XMLHttpRequest 對象編寫一個標準的函數，併爲每一個 AJAX 任務調用該函數。該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

function myFunction()
{
    loadXMLDoc("ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

簡單的AJAX實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        function loadXMLDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE6, IE5 瀏覽器執行代碼
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "ajax_info.txt", true);
            xmlhttp.send('wdadawd');
        }
    </script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>

</body>
</html>
修改內容 
你成功的修改了文本的內容
ajax_info.txt

JQuery Ajax

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

JQuery Ajax本質 XMLHttpRequest 或 ActiveXObject ；

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 方法列表
JQuery Ajax方法列表

跨域Ajax

因爲瀏覽器存在同源策略機制，同源策略阻止從一個源加載的文檔或腳本獲取或設置另外一個源加載的文檔的屬性。

因爲同源策略是瀏覽器的限制，因此請求的發送和響應是能夠進行，只不過瀏覽器不接受罷了。

跨域，跨域名訪問，如：http://www.a.com 域名向 http://www.b.com域名發送請求。

 

一、JSONP實現跨域請求

JSONP（JONP - JSON with Padding是JSON的一種「使用模式」)，利用script標籤的src屬性（瀏覽器容許script標籤跨域）

二、CORS

隨着技術的發展，如今的瀏覽器能夠支持主動設置從而容許跨域請求，即：跨域資源共享（CORS，Cross-Origin Resource Sharing），其本質是設置響應頭，使得瀏覽器容許跨域請求。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程