如何使用 XMLHttpRequest (XHR) 發送 POST 請求

XMLHttpRequest (XHR) 是一個內置的瀏覽器對象，可用於在 JavaScript 中發出 HTTP 請求，以在客戶端和服務器之間交換數據。所有現代和舊瀏覽器都支持它。

在這篇快速文章中，您將學習如何製作 HTTP POST 使用 XHR 請求。假設我們有以下 HTML 表單：

<form id="signup-form" action="/signup" method="POST">
    <input type="text" name="name" placeholder="Enter name">
    <input type="email" name="email" placeholder="Enter Email">
    <input type="password" name="password" placeholder="Enter Password">
    <button type="submit" role="button">Submit</button>
</form>

我們要確保當用戶點擊“提交”按鈕時，表單是通過 XHR 異步提交的。第一步是附加一個事件處理程序 <form> 捕獲 submit 事件：

const form = document.querySelector('#signup-form');

// listen for submit even
form.addEventListener('submit', () => {
    // TODO: submit post request here
});

下一步是創建並發送一個實際的 POST 請求。如果您已經熟悉 jQuery，發送 POST 請求與 $.post() 非常相似 方法。這是它的樣子：

form.addEventListener('submit', (event) => {

    // disable default action
    event.preventDefault();

    // configure a request
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/signup');

    // prepare form data
    let data = new FormData(form);

    // set headers
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    // send request
    xhr.send(data);

    // listen for `load` event
    xhr.onload = () => {
        console.log(xhr.responseText);
    }
    
});

而已。上面的代碼會向服務器發送一個 HTTP POST 請求，並在控制台打印響應。

使用 Fetch API

您可以使用 Fetch API 輕鬆簡化上述請求。 Fetch 是基於 Promise 的 XHR 替代方案，用於發出 HTTP 請求。它更具可讀性和可定制性：

form.addEventListener('submit', (event) => {

    // disable default action
    event.preventDefault();
    
    // make post request
    fetch('/signup', {
        method: 'POST',
        body: new FormData(form),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
    .then(res => res.text())
    .then(html => console.log(html))
    .catch(err => console.error(err));
});