一步步理解ajax

時間 2019-11-12

標籤步步理解 ajax 欄目 Ajax 简体版

原文原文鏈接

什麼是ajax?css

AJAX即「Asynchronous Javascript And XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。html

可是如今這樣扣字眼理解起來，其實是很沒有意義的，由於如今通常用json來傳遞數據。所以，ajax的一種更好的解釋是:用js來實現頁面的局部刷新。jquery

AJAX能夠在不從新加載整個頁面的狀況下，與服務器交換數據。這種異步交互的方式，使用戶單擊後，沒必要刷新頁面也能獲取新數據。使用Ajax，用戶能夠建立接近本地桌面應用的直接、高可用、更豐富、更動態的Web用戶界面。ajax

學習ajax，須要掌握的基礎：數據庫

如何獲取xhr對象？保證瀏覽器兼容性？
xhr.readyState的狀態有幾種？json
open send responseText瀏覽器
配置各類參數
項目文件夾開啓一個服務器

利用AJAX能夠作：服務器

註冊時，輸入用戶名自動檢測用戶是否已經存在。
登錄時，提示用戶名密碼錯誤
刪除數據行時，將行ID發送到後臺，後臺在數據庫中刪除，數據庫刪除成功後，在頁面DOM中將數據行也刪除。（博客園）

先來個模仿ajax的東西！app

Ajax僞造框架

iframe就是咱們經常使用的iframe標籤：<iframe>。iframe標籤是框架的一種形式，也比較經常使用到，iframe通常用來包含別的頁面，例如咱們能夠在咱們本身的網站頁面加載別人網站或者本站其餘頁面的內容。iframe標籤的最大做用就是讓頁面變得美觀。iframe標籤的用法有不少，主要區別在於對iframe標籤訂義的形式不一樣，例如定義iframe的長寬高。

所以，iframe標籤具備局部加載內容的特性，因此可使用其來僞造Ajax請求。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>僞造ajax</title>
   <link rel="stylesheet" type="text/css" href="">
   <style>
   #myDiv{
         margin-bottom:20px;
   }
   </style>
</head>
<body>
    
    <div>
        <p>請輸入要加載的地址：<span id="currentTime"></span></p>
        <p>
            <input type="text" id="url">
            <input type="button" value="提交" onclick="loadPage();"></input>
        </p>
    </div>
    <div>
        <h3>加載頁面的位置:</h3>
        <iframe id="iframePosition" frameborder="0" style="width:100%;height:500px;"></iframe>
    </div>
    



    <script>
        window.onload = function(){
            var today = new Date();
            document.getElementById('currentTime').innerText = +today;
        };
        function loadPage(){
            var targetUrl = document.getElementById('url').value;
            document.getElementById('iframePosition').src = targetUrl;
        }
        
    </script>
</body>
</html>

View Code

原理是這樣的，設置一個提交按鈕，再設置一個輸入框，當咱們輸入一個網址的時候，在當前的頁面加載輸入網址的頁面信息，呈如今iframe框裏，這樣就能作到不刷新URL來提交不一樣的信息。

原生ajax

Ajax的核心是XMLHttpRequest對象(XHR)。XHR爲向服務器發送請求和解析服務器響應提供了接口。可以以異步方式從服務器獲取新數據。

1、XMLHttpRequest對象

Ajax的核心是XMLHttpRequest對象(XHR)。XHR爲向服務器發送請求和解析服務器響應提供了接口。可以以異步方式從服務器獲取新數據。

XHR的主要方法有：

1. void open(String method,String url,Boolen async)   
   用於建立請求    
   參數：
       method： 請求方式（字符串類型），如：POST、GET、DELETE...
       url：    要請求的地址（字符串類型）
       async：  是否異步（布爾類型）
 
2. void send(String body)
    用於發送請求
    參數：
        body： 要發送的數據（字符串類型） 

3. void setRequestHeader(String header,String value)
    用於設置請求頭
    參數：
        header： 請求頭的key（字符串類型）
        vlaue：  請求頭的value（字符串類型）
 
4. String getAllResponseHeaders()
    獲取全部響應頭
    返回值：
        響應頭數據（字符串類型）
 
5. String getResponseHeader(String header)
    獲取響應頭中指定header的值
    參數：
        header： 響應頭的key（字符串類型）
    返回值：
        響應頭中指定的header對應的值
 
6. void abort()
    終止請求

XHR的主要屬性有：

1. Number readyState
   狀態值（整數），能夠肯定請求/響應過程的當前活動階段
0：未初始化。未調用open()方法
1：啓動。已經調用open()方法，未調用send()方法
2：發送。已經調用send()方法，未接收到響應
3：接收。已經接收到部分數據
4：完成。已經接收到所有數據，能夠在客戶端使用

2. Function onreadystatechange                當readyState的值改變時自動觸發執行其對應的函數（回調函數）

3. String responseText                        做爲響應主體被返回的文本（字符串類型）

4. XmlDocument responseXML                    服務器返回的數據（Xml對象） 

5. Number states                              狀態碼（整數），如：200、404... 

6. String statesText                          狀態文本（字符串），如：OK、NotFound...

2、get請求

GET用於向服務器查詢某些信息：

先看下個人目錄。

而後，看下text.txt裏面的內容是：

接下來，咱們開始寫一個簡單的示例：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Examples</title>
   <link rel="stylesheet" type="text/css" href="">
   <style>
   #myDiv{
         margin-bottom:20px;
   }
   </style>
</head>
<body>
    

    <h1>XMLHttpRequest - Ajax請求</h1>
    <div id="myDiv">let ajax change this text</div>
    <input type="button" value="Get發送請求" onclick="XmlGetRequest();"></input>


    <script>
        function GetXHR(){//這個函數用於獲取xhr對象
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            return xhr;  //返回xhr對象
        }
        function XmlGetRequest(){
            var xhr = GetXHR();
            //定義回調函數
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){//當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：
                    var data = xhr.responseText;
                    console.log(data);
                    document.getElementById('myDiv').innerHTML = xhr.responseText;
                }
            };
            //指定請求方式和地址（連接）
            xhr.open('get','text.txt',true);
            //發送請求
            xhr.send();
        }
        
    </script>
</body>
</html>

View Code

頁面打開後這樣

來個動圖演示一下過程：

3、post請求

POST請求用於向服務器發送應該被保存的數據。POST請求的主體能夠包含很是多的數據，並且格式不限。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>post</title>
   <link rel="stylesheet" type="text/css" href="">
   <style>
   #myDiv{
         margin-bottom:20px;
   }
   </style>
</head>
<body>
    

    <h1>XMLHttpRequest - Ajax請求</h1>
    <div id="myDiv">let ajax change this text</div>
    <input type="button" value="Post發送請求" onclick="XmlGetRequest();"></input>



    <script>
        function GetXHR(){//這個函數用於獲取xhr對象
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            return xhr;  //返回xhr對象
        }
        function XmlGetRequest(){
            var xhr = GetXHR();
            //定義回調函數
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){//當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：
                    var data = xhr.responseText;
                    console.log(data);
                    document.getElementById('myDiv').innerHTML = xhr.responseText;
                }
            };
            // 指定鏈接方式和地址----文件方式
        xhr.open('POST', "text.txt", true);
        // 設置請求頭
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        // 發送請求
        xhr.send('n1=1;n2=2;');
        }
        
    </script>
</body>
</html>

View Code

jQuery ajax

jQuery 提供多個與 AJAX 有關的方法。

經過 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。

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

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

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

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

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

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

5.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 將自動替換 ? 爲正確的函數名，以執行回調函數

方法列表

方法列表

一個簡單的jq-ajax列子：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>post</title>
   <link rel="stylesheet" type="text/css" href="">
   <style>
   #myDiv{
         margin-bottom:20px;
   }
   </style>
</head>
<body>
    

    <h1>jquery - Ajax請求</h1>
    <div id="myDiv">let ajax change this text</div>
    <input type="button" value="ajax請求" onclick="JXmlSendRequest();"></input>


    <script src="http://lib.sinaapp.com/js/jquery/1.10.1/jquery-1.10.1.min.js"></script> 
    <script>
        function JXmlSendRequest(){
         $.ajax({
            /*url: "http://c2.com:8000/test/",    // 訪問url地址
            type: 'GET',                        // get方式提交
            dataType: 'text',　　　　　　　　　　  // 數據類型
            success: function(data, statusText, xmlHttpRequest){  // 成功後返回的結果
                console.log(data);
            }*/
            url:'text.txt',  //訪問url地址，這個通常後臺會提供，json數據
            type:'GET',  // GET方式提交
            async:true,  //是否異步，true異步，false同步 默認爲true
            dataType:'text',  //數據類型
            success:function(data,statusText,xmlHttpRequest){
                console.log(data);
            }

         });
      }
        
    </script>
</body>
</html>

jq-ajax

未完待續。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。