iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

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

【Day 26】JavaScript AJAX - XMLHttpRequest

說明 : 藉由 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>

上一篇
【Day 25】JavaScript ajax
下一篇
【Day 27】JavaScript 回呼函式(callback function)
系列文
轉職軟體工程師的54330

尚未有邦友留言

立即登入留言