javascript http 方法

JavaScript是前端開發中的重要程式語言，用於處理網頁中的各種互動操作。其中，http方法是一種常用的請求方式，它可以向伺服器發送請求並取得回應結果。本文將探討JavaScript中的http方法以及其相關用法。

1. http方法概述

http方法是指一種透過網路將請求傳送到伺服器的方法。目前常用的http方法包括GET、POST、PUT、DELETE等。其中，GET和POST是使用最廣泛的兩種方法。

HTTP協定中的四個動作：

GET： 用來請求存取已經被URI識別的資源來執行「讀取」操作。 GET方法要求伺服器將URL定位的資源放在回應封包的正文中傳回，並指定回應頭資訊描述內容的格式以及字元集。

POST： 會向指定資源提交數據，請求伺服器進行處理（例如提交表單或上傳檔案）。 POST請求可能會導致新的資源的建立和/或已有資源的修改。

PUT： 用於上傳文件，或用於伺服器上傳文件，或用於對已經存在的資源進行更新操作。

DELETE： 請求伺服器刪除指定的資源。

2. JavaScript中的http方法

在JavaScript中，可以使用XMLHttpRequest物件來實作http請求。 XMLHttpRequest物件提供了以下常用方法：

(1) open()方法：這個方法的作用是建立一個新的http請求。此方法的參數包括http方法、請求的URL位址及是否採用非同步請求方式等。

XMLHttpRequest.open(method, url, async, user, password);

方法參數說明：

method：表示http方法，如GET、POST、PUT、 DELETE等。

url：表示請求的URL位址。

async：表示是否採用非同步請求方式。 false表示同步方式, true表示非同步方式。

user：表示使用者名，可選。

password：表示密碼，可選。

(2) send()方法：這個方法用於向伺服器發送http請求。此方法的參數可以是請求的資料內容（對於POST方法），或為空（對於GET方法）。

XMLHttpRequest.send(data);

(3) setRequestHeader()方法：這個方法用來設定請求頭中的屬性和值。請求頭中的屬性包括Content-Type、Accept等。

XMLHttpRequest.setRequestHeader(name, value);

#方法參數說明：

name：指定請求頭中的屬性名稱。

value：指定請求頭中的屬性值。

(4) onreadystatechange屬性：此屬性定義了一個回呼函數，用於處理伺服器回應的狀態變化。

XMLHttpRequest.onreadystatechange = function() {};

• #readyState：表示XMLHttpRequest物件的狀態，取值從0到4。

0： 代表未初始化(尚未呼叫open()方法)。
1： 代表正在初始化，即呼叫了open()方法，但尚未呼叫send()方法。
2： 代表已經將請求發出去(已經呼叫了send()方法)，但尚未接收到伺服器的回應封包。
3： 接收到了伺服器的回應封包，但尚未讀取完所有回應資料。
4： 讀取完了所有回應資料。

status：表示伺服器回傳的狀態碼，例如200表示成功，404表示請求的資源不存在等。

responseText：表示伺服器傳回的回應文字。

3. 實例示範

下面是使用GET方法和非同步請求方式發送http請求的範例：

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.open("GET", "https://www.example.com/", true);
    xhr.send();
}

上述程式碼中，我們定義了一個名為sendHttpRequest()的函數，在函數中使用XMLHttpRequest物件向"https://www.example.com/"的位址發送了一個GET請求，並將非同步請求方式設為true。當伺服器成功回傳了回應結果，且狀態碼為200時，就會在控制台列印出回應文字。

下面是一個使用POST方法和同步請求方式發送http請求的範例：

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "https://www.example.com/", false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=John&age=25");
    console.log(xhr.responseText);
}

上述程式碼中，我們定義了一個名為sendHttpRequest()的函數，在函數中使用XMLHttpRequest物件向"https://www.example.com/"的位址發送了一個POST請求，並將同步請求方式設定為false。同時，我們也呼叫了setRequestHeader()方法設定了請求頭中的Content-Type屬性，表示請求資料的型別為"application/x-www-form-urlencoded"，最後，我們呼叫了send()方法傳送了請求數據，數據內容為"name=John&age=25"。當伺服器成功回傳了回應結果時，就會將回應文字列印到控制台中。

4. 總結

本文介紹了JavaScript中的http方法以及其相關用法。透過上述實例的演示，我們可以看出，使用XMLHttpRequest物件可以方便地實現http請求，同時也可以透過設定請求頭和請求參數等方式來實現不同的請求類型和格式。因此，掌握JavaScript中的http方法對於前端開發人員來說是非常必要的。

以上是javascript http 方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！