【JS】發送AJAX請求

XMLHttpRequest、open、readyState、setRequestHeader、send、onload、responseText、status

 發表於 2021-02-09  |  2 分鐘  |  283 個字

【JS】發送AJAX請求

XMLHttpRequest、open、readyState、setRequestHeader、send、onload、responseText、status

 發表於 2021-02-09  |  2 分鐘  |  283 個字

動態載入資料(AJAX)

  • 使用new XMLHttpRequest原型，來向伺服器發送請求。

  • 不用重新整理網頁就能取得資料庫回傳的資料，例如 :
    • 加入購物車，顯示商品數量。
    • 註冊帳號時，顯示該帳號是否已使用。
    • 搜尋時，顯示的關鍵提示字。

  • 載入的資料必須支援跨網域(CORS)。
    • 若發送請求時出現Access-Control-Allow-Origin錯誤，代表不支援

1

let xhr = new XMLHttpRequest();

.open(“方法” , “網址” , true/false)。

  • 向伺服器發送請求.open(method, url, async, user, password)。
    • method：請求方法（如 “GET”、“POST”、“PUT”、“DELETE” 等）
    • url：請求的 URL 地址，可以是相對路徑或絕對路徑。
    • async(可選)：是否異步執行請求，預設為 true。如果設定為 false，請求會同步執行，頁面會被阻塞，直到請求完成。一般建議使用異步請求。
    • user(可選)：HTTP 請求的使用者名稱，用於需要身份驗證的請求。
    • password(可選)：HTTP 請求的密碼，用於需要身份驗證的請求。

請求方法 說明
“GET” 用於請求數據。通常用於獲取資源。
“POST” 用於將數據發送到伺服器。例如，提交表單或上傳數據。
“PUT” 用於更新伺服器上的資源。
“DELETE” 用於刪除伺服器上的資源。
“PATCH” 用於更新部分資源，類似於 PUT，但只更新部分內容。
“HEAD” 與 GET 類似，但不返回回應體，僅返回回應頭部信息。
“OPTIONS” 用於查詢伺服器支持哪些請求方法和其他配置。
“TRACE” 用於追蹤請求和回應的路徑，通常很少使用。
“CONNECT” 用於建立到目標伺服器的隧道連接，常用於代理伺服器。 

1
2
3
4
5
6
7

let xhr = new XMLHttpRequest();

//true(預設)，不等資料載入完就會往下執行(非同步載入)
xhr.open("get","https://hexschool.github.io/ajaxHomework/data.json",true);

//false，等待資料載入完後才往下執行(同步載入)
xhr.open("get","https://hexschool.github.io/ajaxHomework/data.json",false);

.readyState

  • 取得當前請求的處理狀態。

處理狀態 說明
0 已成功建立new XMLHttpRequest()
1 使用了open()，但還沒有send()
2 偵測到使用send()
3 loading中
4 已成功撈到資料 

1
2
3

let xhr = new XMLHttpRequest();

console.log(xhr.readyState); //0

.setRequestHeader

  • 決定傳送給伺服器的資料格式。

1
2
3
4
5
6
7
8
9

let xhr = new XMLHttpRequest();

xhr.open("get","https://hexschool.github.io/ajaxHomework/data.json",false);

//傳送表單格式
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

//傳送JSON格式
xhr.setRequestHeader("content-type","application/json");

.send

  • 傳送給伺服器資料。

1
2
3
4
5
6

let xhr = new XMLHttpRequest();

xhr.open("get","https://hexschool.github.io/ajaxHomework/data.json",true);

//回傳"空"值
xhr.send(null);

.onload

  • .responseText
    • 取得伺服器回傳的"字串"資料。
    • 使用JSON.parse()，來解析回傳的資料。

  • .status
    • 可以取得HTTP狀態碼。

HTTP狀態碼 說明
200 請求成功並返回了所需的結果。
201 請求已成功並且創建了一個新的資源。
204 請求成功，但沒有返回任何內容（例如刪除資源時常見）。
301 請求的資源已被永久移動到新的 URL，未來的請求應該使用新的 URL。
302 請求的資源臨時移動，將來可能會還原，通常是瀏覽器自動跳轉。
304 請求的資源未被修改過，瀏覽器可以使用快取中的版本。
400 請求格式錯誤，服務器無法理解。
401 請求缺少身份驗證或身份驗證無效，通常表示需要登入。
403 服務器理解請求，但拒絕執行它，通常是權限不足。
404 找不到請求的資源，這是最常見的錯誤之一。
405 請求使用的 HTTP 方法（例如 GET、POST）不被目標資源支持。
500 服務器遇到未預期的情況，無法處理請求。
502 服務器作為網關或代理時，從上游伺服器獲得無效響應。
503 服務器目前無法處理請求，通常是因為過載或正在維護。
504 服務器作為網關或代理時，未能從上游伺服器獲得及時響應。 

1
2
3
4
5
6
7
8
9

xhr.onload = function(){
    if(xhr.status == 200){
        //將得到的轉為JSON格式
        let str = JSON.parse(xhr.responseText);
        console.log(str);
    }else{
        console.log("取得失敗")
    }
}

XMLHttpRequest 取得訊息

1

<div class="message"></div>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

let message = document.querySelector(".message");

let xhr = new XMLHttpRequest();

console.log(xhr.readyState); //0：成功建立new XMLHttpRequest()

xhr.open("get","https://hexschool.github.io/ajaxHomework/data.json",true);

console.log(xhr.readyState); //1：使用了open()，但還沒有send()

xhr.send(null);

console.log(xhr.readyState); 

//2：偵測到使用send()
//3：loading中
//4：已成功撈到資料

xhr.onload = function(){
    if(xhr.status == 200){
        let str = JSON.parse(xhr.responseText);
        //在頁面上顯示值
        message.textContent = str.[0].name;
    }else{
        console.log("資料錯誤！！")
    }
}

輸出結果：

1

<div class="message">王小名</div>

正常情況下都會使用true非同步載入資料，因為資料龐大頁面會載入很久

javaScript 

其他相關