Ajax(1) —— 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屬性：

將回應資訊作為字串回傳，因此你可以這樣使用：

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

標籤：JavaScript

上一篇：大廠面試程序復盤(微信/阿里/頭條均拿offer,附答案篇)

下一篇：閉包的應用（私有變數、珂理化、偏函式）