Ajax(1) —— Ajax基礎_ZenDei技術網路在線

1. Ajax介紹 Ajax即Asynchronous JavaScript and XML，是非同步的JavaScript與XML。Ajax提供了基於伺服器交換數據並實現局部更新網頁的技術，在不重新載入整個網頁的情況下，可以接受來自伺服器請求到的數據，提高了瀏覽頁面的效率和用戶體驗。 2. Ajax ...

1. Ajax介紹

Ajax即Asynchronous JavaScript and XML，是非同步的JavaScript與XML。Ajax提供了基於伺服器交換數據並實現局部更新網頁的技術，在不重新載入整個網頁的情況下，可以接受來自伺服器請求到的數據，提高了瀏覽頁面的效率和用戶體驗。

2. Ajax基礎

2.1.創建Ajax對象

XMLHttpRequest是Ajax的對象，所有現代瀏覽器（IE7+、Firefox、Chrome、Safari、Opera）均支持XMLHttpRequest對象，而低版本的IE（IE5和IE6）使用ActiveXObject對象。XMLHttpRequest用於在後臺與伺服器交換數據。即可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

為了相容所有瀏覽器的情況，包括低版本的IE，創建Ajax對象可以使用如下代碼：

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

2.2.XHR請求

XMLHttpRequest對象用於和伺服器交換數據，將請求發送到伺服器，主要使用open()和send()方法

open：創建一個新的http請求，並指定此請求的方法、URL以及驗證信息

語法：

XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

示例代碼：

var xhr = getAjax();
    /**
     *  oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
     *  bstrMethod http方法，例如：POST、GET、PUT及PROPFIND。大小寫不敏感。
     *  bstrUrl 請求的URL地址，可以為絕對地址也可以為相對地址。
     *  varAsync[可選]布爾型，指定此請求是否為非同步方式，預設為true。
     *  如果為真，當狀態改變時會調用onreadystatechange屬性指定的回調函數。
     */
    xhr.open("GET", "/getTime");
    xhr.send();

send：發送請求到http伺服器並接收回應：

語法：

XMLHttpRequest.send(varBody);

varBody：僅用於POST請求。

對比一下簡單的GET方法發送信息與POST方法發送信息：

//GET方式
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

//POST方式
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 HTML 表單form中那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據：

var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
xhr.open("POST", "/login");
//Ajax設置請求編碼 -- 使用POST請求傳遞參數必須加上
//位置在send之前，open之後
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//使用POST發送數據，在send裡面，寫入單獨傳參的數據
xhr.send("username=" + username + "&password=" + password);

GET和POST使用場景：

GET相對於POST傳遞數據更簡單快捷，在不涉及信息安全的場景下可以使用；

然而，在如下情況下，請使用POST請求傳遞數據：

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

2.3.XHR非同步監聽

XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)，在這個方法中，當Async為true時，表示執行Ajax後端請求時是使用非同步請求的方式，這裡需要在響應處使用onreadystatechange事件進行監聽Ajax的狀態：

其中Async參數為可選布爾型，指定此請求是否為非同步方式，預設為true。如果為true，當狀態改變時會調用onreadystatechange屬性指定的回調函數。

//Ajax的非同步問題可以通過Ajax的狀態來解決：Ajax執行的每一步都有它對應的一個狀態 readyState
    //0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
    //1 (初始化) 對象已建立，尚未調用send方法
    //2 (發送數據) send方法已調用，但是當前的狀態及http頭未知
    //3 (數據傳送中) 已接收部分數據，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤，
    //4 (完成) 數據接收完畢,此時可以通過通過responseBody和responseText獲取完整的回應數據
    //註意：一般我們只需要一個點：readyState==4時，狀態已經拿到了
//Ajax對象中有一個監聽器，它可以監聽每一次狀態的變化（onreadystatechange）
<script>
    function getTime02() {
        var xhr = getAjax(); //readyState == 0
        /**
         *  oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
         *  bstrMethod http方法，例如：POST、GET、PUT及PROPFIND。大小寫不敏感。
         *  bstrUrl 請求的URL地址，可以為絕對地址也可以為相對地址。
         *  varAsync[可選]布爾型，指定此請求是否為非同步方式，預設為true。
         *  如果為真，當狀態改變時會調用onreadystatechange屬性指定的回調函數。
         */
        xhr.open("GET", "/getTime");    //readyState == 1
        //監聽代碼一定放在send前面
        //監聽狀態一般有兩種情況：readyState狀態和status狀態
        //readyState狀態：Ajax請求狀態；
        //status狀態：http請求響應的狀態碼
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                console.debug(xhr.responseText);
            }
        };
        xhr.send(); //readyState == 2  3  4；發送整個流程
        /**
         *  responseText 將前臺的響應信息作為字元串返回，註意：一定是作為字元串返回的
         */
    }
    </script>
    <button onclick="getTime02()">獲取時間</button>

2.4.XHR響應

如果需要獲取來自伺服器的響應，需要調用XMLHttpRequest對象的responseText或者responseXML屬性。

屬性	描述
responseText	獲得字元串形式的響應數據
responseXML	獲得XML形式的響應數據

responseText屬性：

將響應信息作為字元串返回，因此你可以這樣使用：

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

responseXML屬性：

如果來自伺服器的響應是XML，而且需要作為XML對象進行解析，請使用responseXML屬性，比如請求books.xml文件，並解析響應：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

2.5.XHR callback函數

callback函數是一種以參數形式傳遞給另一個函數的函數。

在執行多個Ajax調用任務時，可以在XMLHttpRequest對象中創建一個標準的執行流程函數，每次Ajax請求都調用這個函數執行open、send一套流程。

該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

<script type="text/javascript">
        var xhr = null;
        function loadXMLDoc(url, cfunc) {
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else if(ActiveXObject){
                xhr = new ActiveXObject("Microsoft XMLHTTP");
            }
            xhr.open("GET", url, true);
            xhr.onreadystatechange = cfunc;
            xhr.send();
        }
        
        function myFunction() {
            loadXMLDoc("/ajax/test1.txt", function () {
                if(xhr.readyState == 4 && xhr.status == 200){
                    document.getElementById("myDiv").innerText = xhr.responseText;
                }
            })
        }
    </script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通過 AJAX 改變內容</button>
</body>

博文參考文檔W3School Ajax部分內容：https://www.w3school.com.cn/ajax/index.asp