【Day 26】JavaScript AJAX - XMLHttpRequest - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 26

自我挑戰組

轉職軟體工程師的543系列第 26 篇

【Day 26】JavaScript AJAX - XMLHttpRequest

13th鐵人賽

bonnieli1414

2021-09-26 20:33:33

2720 瀏覽

分享至

說明 : 藉由 XMLHttpRequest（XHR）物件的方式來存取伺服器端的資料，可以直接經由指定的 URL 擷取資料卻不用刷新整個網頁。

在AJAX應用中 XMLHttpRequest 被大量的使用。
雖然 XMLHttpRequest 這個物件的命名包含了 XML 與 HTTP 等字眼，但實際上 XMLHttpRequest 可用來接收任何類型的資料，不限於 XML 類型而已。

建構 XMLHttpRequest 物件的語法：

var XMLHttpRequest; //建立XMLHttpRequest物件
variable = new XMLHttpRequest(); //實作XMLHttpRequest物件

向服務器發送請求 - 使用 XMLHttpRequest 物件的 open() 和 send() 方法：

使用 open 方法指定要請求的網址 (URL)，語法：
httpRequest.open( method , url , async );
參數 method 指定 HTTP method 如: "GET", "POST"
GET 比 POST 更簡單、更快，並且可以在大多數情況下使用。
但是，在以下情況下，請使用 POST 請求：
* 無法使用緩存文件（更新服務器上的文件或數據庫）
* 向服務器發送大量數據（POST 沒有數據量限制）
* 發送包含未知字符的用戶輸入時，POST 比GET 更穩定安全。
參數 url 指定要發送請求的網址
參數 async 是一個布林值 (boolean) 表示是否要做非同步請求，預設是 true 非同步。一般來說，很少會使用到同步請求。

使用 send 方法，語法:
send()

服務器響應 - XMLHttpRequest 物件的 responseText 和 responseXML 屬性

如需獲得來自服務器的響應，請使用XMLHttpRequest 物件的 responseText 或 responseXML 屬性。
responseText 獲得字符串形式的響應數據。

responseXML 獲得 XML 形式的響應數據。

onreadystatechange 事件

當請求被發送到服務器時，需要執行一些基於響應的任務。
每當readyState 改變時，就會觸發onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。下面是 XMLHttpRequest 物件的三個重要的屬性：
1.onreadystatechange - 儲存函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

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

3.status

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo">
        <h1>The XMLHttpRequest Object</h1>
        <button type="button" onclick="loadDoc()">Change Content</button>
    </div>    
    <script>
        function loadDoc() {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("demo").innerHTML =
              this.responseText;
            }
          };
          xhttp.open("GET", 檔案在伺服器上的位置, true);
          xhttp.send();
        }                
    </script>
</body>
</html>