AJAX 快速指南

---

---

什麼是AJAX？

AJAX 代表非同步 JavaScript 和 XML。AJAX 不是一種程式語言或技術，而是一種結合了多種 Web 相關技術的組合，例如 HTML、XHTML、CSS、JavaScript、DOM、XML、XSLT 和 XMLHttpRequest 物件。AJAX 模型允許 Web 開發人員建立能夠與使用者動態互動的 Web 應用程式。它還能夠快速進行後臺呼叫 Web 伺服器以檢索所需的應用程式資料，然後更新網頁的一小部分而無需重新整理整個網頁。

與傳統的 Web 應用程式相比，AJAX 應用程式更快、更具響應性。它透過允許客戶端和伺服器在後臺通訊（使用者在前景工作時），在客戶端和伺服器之間取得了很好的平衡。

在 AJAX 應用程式中，Web 瀏覽器和伺服器之間的資料交換是非同步的，這意味著 AJAX 應用程式向 Web 伺服器提交請求不會暫停應用程式的執行，並且可以在返回請求的資料時處理它。例如，Facebook 使用 AJAX 模型，因此每當我們點贊任何帖子時，點贊按鈕的計數都會增加，而無需重新整理整個頁面。

AJAX 的工作原理

傳統的 Web 應用程式是透過以預定義的順序透過連結新增鬆散的網頁來建立的。使用者可以從一個頁面移動到另一個頁面來與應用程式的不同部分進行互動。此外，HTTP 請求用於響應使用者操作向 Web 伺服器提交請求。伺服器收到請求後，透過返回一個新網頁來滿足請求，然後該網頁顯示在 Web 瀏覽器中。此過程涉及大量頁面重新整理和等待。

AJAX 透過非同步地在 Web 瀏覽器和伺服器之間共享最小數量的資料來改變整個工作模型。它加快了 Web 應用程式的工作速度。它透過在網頁上傳遞資料或允許在現有 Web 應用程式中顯示資料來提供類似桌面的感覺。它將鬆散整合的網頁替換為緊密整合的網頁。AJAX 應用程式很好地利用了資源。它在 Web 應用程式和 Web 伺服器之間建立了一個稱為 AJAX 引擎的附加層，因此我們可以使用 JavaScript 進行後臺伺服器呼叫並檢索所需的資料，可以更新網頁的請求部分而無需強制重新載入頁面。它減少了頁面重新整理時間，併為使用者提供了快速且響應迅速的體驗。非同步程序透過與客戶端計算機分擔工作來減少 Web 伺服器的工作負載。由於工作負載減少，Web 伺服器變得更具響應性和速度更快。

AJAX 技術

AJAX 使用的技術已經在所有現代瀏覽器中實現。因此，客戶端不需要任何額外的模組來執行 AJAX 應用程式。AJAX 使用的技術包括：

• JavaScript - 它是 AJAX 的重要組成部分。它允許你建立客戶端功能。或者我們可以說它用於建立 AJAX 應用程式。

• XML - 用於在 Web 伺服器和客戶端之間交換資料。

• XMLHttpRequest - 用於在 Web 瀏覽器和 Web 伺服器之間執行非同步資料交換。

• HTML 和 CSS - 用於為網頁文字提供標記和樣式。

• DOM - 用於動態地與網頁佈局和內容互動並更改它們。

AJAX 的優點

AJAX 的優點如下：

• 它建立響應迅速且互動式 Web 應用程式。

• 它支援開發減少開發時間的模式和框架。

• 它充分利用現有技術和功能，而不是使用某些新技術。

• 它向 Web 伺服器進行非同步呼叫，這意味著客戶端不必等待資料到達才能開始呈現。

AJAX 的缺點

AJAX 的缺點如下：

• AJAX 完全依賴於 JavaScript。因此，如果瀏覽器中的 JavaScript 出現任何問題，AJAX 將無法支援。

• AJAX 應用程式的除錯很困難。

• AJAX 啟用頁面的書籤需要預先規劃。

• 如果一個請求失敗，則可能會導致整個網頁載入失敗。

• 如果在 Web 瀏覽器中停用了 JavaScript，則無法執行 AJAX 網頁。

結論

因此，要建立動態網頁或應用程式，AJAX 是最佳選擇。它更快、更具響應性，並在客戶端和伺服器之間提供非同步互動，而無需重新整理整個頁面。在下一篇文章中，我們將瞭解 AJAX 的歷史。

Ajax - 歷史

在 AJAX 出現之前，網站是透過將多個鬆散的網頁組合在一起開發的，這些網頁進一步以預定義的順序顯示，並藉助 HTML 頁面中嵌入的連結。因此，要使用這些 Web 應用程式，使用者需要從一個網頁移動到另一個網頁。因此，每當使用者點選指向下一頁的連結時，他/她都必須等待幾秒鐘才能載入頁面。傳統的 Web 應用程式使用 HTTP 請求將使用者操作提交到伺服器。伺服器收到使用者的請求後，透過返回一個新網頁來完成請求，該網頁將進一步顯示在 Web 瀏覽器中。因此，傳統的 Web 應用程式需要大量的頁面重新整理和等待。

因此，開發新一代應用程式（如谷歌地圖、即時聊天環境、Gmail 等）非常困難。因此，2005 年 2 月 18 日，Jesse James Garrett 首次透過撰寫一篇名為“一種新的 Web 應用程式方法”的 AJAX 文章向世界介紹了 AJAX。2006 年 4 月 5 日，W3C（全球資訊網聯盟）釋出了第一個包含 XMLHttpRequest 物件規範的草案。此後，AJAX 在 Web 開發人員中變得流行起來。

與傳統的 Web 應用程式相比，使用 AJAX 開發的應用程式更快、更具響應性。它透過與 Web 伺服器交換少量資料來提高 Web 應用程式的效能。因此，伺服器無需為使用者的每次請求都重新整理整個網頁。這意味著使用 AJAX，Web 瀏覽器和 Web 伺服器可以在後臺非同步地交換資料，而不會暫停應用程式的執行，並且可以處理返回的資料。為了提交請求，AJAX 應用程式使用一個名為 XMLHttpRequest 物件的特殊物件。它是 AJAX 能夠建立非同步通訊的主要物件。實現 AJAX 中使用的技術包括 JavaScript、XMLHttpRequest、XML/JSON 和文件物件模型 (DOM)。在這裡，Javascript 處理客戶端邏輯，XHR 提供與伺服器的非同步通訊，XML 提供伺服器和客戶端之間資料交換的格式，而 DOM 允許操作和更新網頁的內容。

結論

這就是 AJAX 的引入如何在 Web 開發行業中掀起一場新的革命。它幫助開發人員建立豐富且互動式的 Web 應用程式。在下一篇文章中，我們將學習動態網站與靜態網站有何不同。

Ajax - 動態網站與靜態網站

網站是由多個但相關的網頁組成的集合，其中包含多媒體內容，如文字、影像、影片和音訊。網際網路上的每個網站都有其自己的獨立 URL，我們可以使用 Web 瀏覽器訪問它們。例如 - https://tutorialspoint.tw/。

網站分為兩種型別：

• 靜態網站

• 動態網站

靜態網站

靜態網站是指伺服器返回的網頁是由用簡單的 HTML 和 CSS 編寫的預構建原始碼檔案組成的網站。靜態網站的內容是固定的，這意味著網站的內容只能由網站所有者（手動）更改，他們被允許更改伺服器端靜態網站的內容。或者我們可以說靜態網站是指內容無法從伺服器端操作或更改的網站。靜態網站不需要任何指令碼語言。例如，

動態網站

動態網站是指網頁內容動態變化的網站，這意味著網站上的資訊可以根據使用者提供的輸入自動更改。動態網站需要後端資料庫和指令碼語言，如 PHP、Node.js 等。為了獲得良好的靈活性和擴充套件性，動態網站需要更復雜的後端。動態網站的示例包括 Netflix、Facebook、Twitter 等。

動態網站與靜態網站

以下是動態網站和靜態網站的區別：

結論

這些是動態網站和靜態網站的主要區別。因此，開發人員和使用者更傾向於使用動態網站而不是靜態網站。在下一篇文章中，我們將學習AJAX技術。

AJAX - 技術

AJAX的全稱是非同步JavaScript和XML。它是一種組合的網頁技術，允許在Web伺服器和Web瀏覽器之間建立非同步通訊。它建立了一個動態應用程式，可以動態更新網頁內容，而無需重新載入整個頁面。

AJAX不是程式語言或指令碼語言，但它結合了多種與Web相關的技術，如HTML、XHTML、CSS、JavaScript、DOM、XML、XSLT和XMLHttpRequest物件。由於這些技術的結合，AJAX模型允許Web開發人員建立能夠與使用者動態互動的Web應用程式，並且能夠快速向Web伺服器發出後臺呼叫以檢索所需的應用程式資料，然後更新網頁的一小部分而無需重新整理整個網頁。

AJAX不使用任何新的語言來建立動態Web應用程式，它使用市場上已有的技術。因此，它使開發人員更容易建立動態Web應用程式，而無需學習或安裝新技術。因此，AJAX模型使用的Web技術包括：

JavaScript - 它是HTML和Web應用程式的指令碼語言。它在HTML、CSS和XML之間建立連線。它用於建立客戶端功能。它在AJAX中也扮演著重要的角色。它也用於建立AJAX應用程式或將所有AJAX操作組合在一起。

<script src = "myexample.js"></script>

XML或JSON - XML代表可擴充套件標記語言，而JSON代表JavaScript物件表示法。JSON和XML都用於客戶端在Web伺服器和客戶端之間交換資料。

<?xml version = "1.0">
<root>
   <child>
      //Statements 
   </child>
</root>

XMLHttpRequest - 它用於在Web瀏覽器和Web伺服器之間執行非同步資料交換。它是一個執行非同步操作的JavaScript物件。

variableName = new XMLHttpRequest();

HTML和CSS - HTML代表超文字標記語言，而CSS代表層疊樣式表。HTML為網頁文字提供標記和樣式。或者我們可以說它為網頁提供結構，而CSS用於建立更具互動性的網頁。它提供各種樣式元件來定義網頁的外觀。CSS獨立於HTML，可以與任何基於XML的標記語言一起使用。

<!DOCTYPE html>
<html>
<head>
   // Header of the web page
</head>
<body>
   // Body of the web page
</body>
</html>

DOM - AJAX還有一個強大的工具，稱為DOM（文件物件模型）。它用於動態地與網頁佈局和內容互動並對其進行更改。或者我們可以說DOM用於建立用於標記HTML頁面的元素的邏輯表示。它由Web瀏覽器提供。它不是JavaScript的一部分，但使用JavaScript我們可以訪問DOM物件的屬性和方法。使用DOM方法和屬性，我們可以建立或修改HTML頁面。

<!DOCTYPE html>
<html>
<head>
   // Header of the web page
</head>
<body>
   <p></p>
   <script></script>
</body>
</html>

結論

因此，這些是AJAX能夠建立動態網頁的技術。在使用這些技術時，AJAX必須不斷更新其外部庫和框架。在下一篇文章中，我們將看到AJAX執行的操作。

AJAX - 操作

本章將清晰地介紹AJAX操作的確切步驟。

AJAX操作步驟

• 發生客戶端事件。
• 建立XMLHttpRequest物件。
• 配置XMLHttpRequest物件。
• XMLHttpRequest物件向Web伺服器發出非同步請求。
• Web伺服器返回包含XML文件的結果。
• XMLHttpRequest物件呼叫callback()函式並處理結果。
• 更新HTML DOM。

讓我們逐一檢視這些步驟。

發生客戶端事件

• 作為事件結果，呼叫JavaScript函式。

• 示例：validateUserId() JavaScript函式被對映為輸入表單欄位的onkeyup事件的事件處理程式，其id設定為"userid"

• <input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId();">.

建立XMLHttpRequest物件

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

配置XMLHttpRequest物件

在此步驟中，我們將編寫一個由客戶端事件觸發的函式，並將註冊一個回撥函式processRequest()。

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

向Web伺服器發出非同步請求

原始碼在上面的程式碼段中提供。以粗體顯示的程式碼負責向Web伺服器發出請求。所有這些都是使用XMLHttpRequest物件ajaxRequest完成的。

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   <b>if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);</b>
}

假設您在userid框中輸入Zara，則在上述請求中，URL設定為“validate?id=Zara”。

Web伺服器返回包含XML文件的結果

您可以使用任何語言實現伺服器端指令碼，但其邏輯應如下所示。

• 從客戶端獲取請求。
• 解析來自客戶端的輸入。
• 執行必要的處理。
• 將輸出傳送到客戶端。

如果我們假設您將編寫一個servlet，那麼以下是程式碼片段。

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

呼叫回撥函式processRequest()

XMLHttpRequest物件被配置為在XMLHttpRequest物件的readyState發生狀態更改時呼叫processRequest()函式。現在此函式將接收來自伺服器的結果並將執行必要的處理。如下例所示，它根據從Web伺服器返回的值將變數message設定為true或false。

 
function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

更新HTML DOM

這是最後一步，在此步驟中，您的HTML頁面將被更新。它以如下方式發生：

• JavaScript使用DOM API獲取頁面中任何元素的引用。
• 獲取元素引用的推薦方法是呼叫。

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

• 現在可以使用JavaScript修改元素的屬性；修改元素的樣式屬性；或新增、刪除或修改子元素。這是一個例子：

<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>
<body>
   <div id = "userIdMessage"><div>
</body>

如果您理解了上述七個步驟，那麼您幾乎完成了AJAX。在下一章中，我們將更詳細地瞭解XMLHttpRequest物件。

AJAX - XMLHttpRequest

在AJAX中，XMLHttpRequest扮演著非常重要的角色。XMLHttpRequest用於在使用者/客戶端在前景工作的同時在後臺與Web伺服器交換資料，然後使用接收到的資料更新網頁的一部分，而無需重新載入整個頁面。

我們還可以說XMLHttpRequest (XHR) 可以被各種Web瀏覽器指令碼語言（如JavaScript、JScript、VBScript等）用於在HTTP的幫助下與Web伺服器交換XML資料。除了XML，XMLHttpRequest還可以獲取各種格式的資料，如JSON等。它在客戶端和伺服器端之間建立非同步連線。

語法

variableName = new XMLHttpRequest()

使用新的關鍵字以及XMLHttpRequest()建構函式，我們可以建立一個新的XMLHttpRequest物件。必須在呼叫open()函式初始化它之前建立此物件，然後才能呼叫send()函式將請求傳送到Web伺服器。

XMLHttpRequest物件方法

XMLHttpRequest物件具有以下方法：

XMLHttpRequest物件屬性

XMLHttpRequest物件具有以下屬性：

XMLHttpRequest的使用

在理解了XMLHttpRequest的基本語法、方法和屬性之後，我們現在學習如何在實際生活中使用XMLHttpRequest。要在你的程式中使用XMLHttpRequest，首先我們需要遵循以下主要步驟：

步驟 1 − 建立XMLHttpRequest物件

var variableName = new XMLHttpRequest()

步驟 2 − 建立XMLHttpRequest物件後，我們現在必須定義一個回撥函式，該函式將在從Web伺服器獲取響應後觸發。

XMLHttpRequestObjectName.onreadystatechange = function(){
   // Callback function body
}
XMLHttpRequestObjectName.open(method, url, async)
XMLHttpRequestObjectName.send()

步驟 3 − 現在我們使用open()和send()函式向Web伺服器傳送請求。

現在讓我們藉助以下示例來了解XMLHttpRequest的工作原理：

示例

在下面的示例中，我們將從伺服器獲取資料。要從伺服器獲取資料，我們將單擊“單擊我”按鈕。因此，當我們單擊“單擊我”按鈕時，將呼叫displayDoc()函式。在displayDoc()函式內，我們建立一個XMLHttpRequest物件。然後，我們建立一個回撥函式來處理伺服器響應。然後，我們呼叫XHR物件的open()方法，使用HTTP GET方法和伺服器URL（"https://jsonplaceholder.typicode.com/todos"）初始化請求。然後，我們呼叫send()函式傳送請求。

因此，當伺服器響應請求時，“onreadystatechange”屬性將使用XMLHttpRequest物件的當前狀態呼叫回撥函式。如果“readyState”屬性設定為4（這意味著請求已完成）並且“status”屬性設定為200（這意味著成功響應），則響應資料將從“responseText”屬性中提取，並使用示例元素的“innerHTML”屬性顯示HTML文件。

如果在請求期間發現錯誤，則回撥函式中存在的else語句將執行。這就是我們如何從伺服器獲取資料的方法。

<!DOCTYPE html>
<html>
<body>
<script>
   function displayDoc() {
      // Creating XMLHttpRequest object
      var myObj = new XMLHttpRequest();

      // Creating a callback function
      myObj.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            document.getElementById("sample").innerHTML = this.responseText;
         }else{
            console.log("Error Found")
         }
      };
      // Open the given file
      myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

      // Sending the request to the server
      myObj.send();
   }
</script>
<div id="sample">
   <h2>Getting Data</h2>
   <p>Please click on the button to fetch data</p>
   <button type="button" onclick="displayDoc()">Click Me</button>
</div>
</body>
</html>

輸出

結論

XMLHttpRequest是AJAX的主要物件，透過它，AJAX可以在Web瀏覽器和Web伺服器之間建立非同步通訊。因此，在下一篇文章中，我們將學習如何使用XMLHttpRequest物件傳送請求。

AJAX - 傳送請求

AJAX應用程式使用XMLHttpRequest物件來啟動或管理傳送到Web伺服器的資料請求，並以非常有效的方式處理或監視Web伺服器傳送的資料。AJAX支援以下型別的請求：

• GET請求

• POST請求

• PUT請求

• DELETE請求

為了建立連線並向Web伺服器傳送請求，XMLHttpRequest物件提供了以下兩種方法

open() − 用於在Web瀏覽器和Web伺服器之間建立連線。

send() − 用於向Web伺服器傳送請求。

open() 方法

open()方法用於建立與Web伺服器的非同步連線。一旦建立了安全連線，您就可以使用XMLHttpRequest的各種屬性，或者傳送請求或處理響應。

語法

open(method, url, async)

其中，open()方法採用三個引數：

• method − 它表示用於與Web伺服器建立連線的HTTP方法（GET或POST）。

• url − 它表示將在Web伺服器上開啟的檔案URL。或者我們可以說伺服器（檔案）位置。

• async − 對於非同步連線，將值設定為true。對於同步連線，將值設定為false。此引數的預設值為true。

要使用open()方法，我們首先建立一個XMLHttpRequest物件的例項。然後，我們呼叫open()方法，使用HTTP GET或POST方法和伺服器的URL初始化請求。

GET選項用於從Web伺服器檢索適量的資訊，而POST選項用於檢索大量的資訊。因此，GET和POST選項都可以配置XMLHttpRequest物件以使用給定的檔案。

在open()方法中，可以使用絕對路徑或相對路徑來指定AJAX應用程式的檔名、位置或路徑。其中絕對路徑是指定檔案確切位置的路徑，例如：

Myrequest.open("GET", "https://tutorialspoint.tw/source.txt")

這裡“source.txt”是檔名，"https://tutorialspoint.tw"是儲存source.txt檔案的位置。

相對路徑用於根據Web伺服器上相對於Web應用程式檔案的位置來指定檔案的位置，例如：

Myrequest.open("GET", "my file.txt")

語法

Myrequest.send()

send() 方法

send()方法用於向伺服器傳送請求。您還可以向send()方法傳遞引數。

傳送請求

要向伺服器傳送請求，首先我們需要建立一個XMLHttpRequest物件的例項，然後建立一個回撥函式，該函式將在從Web伺服器獲取響應後生效。然後，我們使用open()方法在Web瀏覽器和Web伺服器之間建立非同步連線，然後使用send()函式向伺服器傳送請求。

示例

在下面的程式碼中，我們正在從伺服器獲取指定的記錄。要從伺服器獲取資料，我們單擊“單擊此處”按鈕。因此，當我們單擊“單擊此處”按鈕時，將呼叫showDoc()函式。在displayDoc()函式內，首先建立一個XMLHttpRequest物件。然後，我們建立一個回撥函式來處理伺服器響應。然後，我們呼叫XHR物件的open()方法，使用HTTP GET方法和伺服器的URL（"https://jsonplaceholder.typicode.com/todos/3"）初始化請求，該URL從JSONPlaceholder API獲取id = 3的單個待辦事項列表。然後，我們呼叫send()函式傳送請求。

<!DOCTYPE html>
<html>
<body>
<script>
   function ShowDoc() {
   // Creating XMLHttpRequest object
   var myhttp = new XMLHttpRequest();
   // Creating call back function
   myhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("example").innerHTML = this.responseText;
      }
   };
  // Open the given file
  myhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/3", true);
  // Sending the request to the server
  myhttp.send();
}
</script>

<div id="example">
  <p>Please click on the button to fetch data</p>
  <button type="button" onclick="ShowDoc()">Click Here</button>
</div>
</body>
</html>

輸出

單擊“單擊此處”按鈕後，我們將從伺服器獲得以下記錄。

因此，當伺服器響應請求時，“onreadystatechange”屬性將使用XMLHttpRequest物件的當前狀態呼叫回撥函式。如果“readyState”屬性設定為4（這意味著請求已完成）並且“status”屬性設定為200（這意味著成功響應），則響應資料將從“responseText”屬性中提取，並使用示例元素的“innerHTML”屬性顯示HTML文件。

結論

這就是我們如何使用XMLHttpRequest傳送請求的方法。在所有這些請求中，GET和POST是最常用的用於從伺服器獲取和傳送資料/到伺服器的請求。在下一篇文章中，我們將瞭解AJAX支援的請求型別。

AJAX - 請求型別

AJAX是一種用於建立動態網頁的Web技術。它允許網頁更新其內容而無需重新載入整個頁面。通常，AJAX支援四種類型的請求，它們是：

• GET請求

• POST請求

• PUT請求

• DELETE請求

GET請求

GET請求用於從伺服器檢索資料。在此請求中，資料作為URL的一部分發送，該URL附加在請求的末尾。我們可以將此請求與open()方法一起使用。

語法

open(GET, url, true)

其中，open()方法採用三個引數：

• GET − 用於從伺服器檢索資料。

• url − url表示將在Web伺服器上開啟的檔案。

• true − 對於非同步連線，將值設定為true。對於同步連線，將值設定為false。此引數的預設值為true。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function displayRecords() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
      // Creating call back function
      zhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            document.getElementById("example").innerHTML = this.responseText;
         }
      };
      // Open the given file
      zhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/6", true);
      // Sending the request to the server
      zhttp.send();
   }
</script>
<div id="example">
   <p>Please click on the button to fetch 6th record from the server</p>
   <button type="button" onclick="displayRecords()">Click Here</button>
</div>
</body>
</html>

輸出

在上面的示例中，我們使用GET請求"https://jsonplaceholder.typicode.com/todos/6" API在XMLHttpRequest中從伺服器獲取第6條記錄。因此，單擊按鈕後，我們將從伺服器獲得第6條記錄。

POST請求

POST請求用於將資料從網頁傳送到Web伺服器。在此請求中，資料傳送在請求正文中，該正文與URL分開。我們可以將此請求與open()方法一起使用。

語法

open('POST', url, true)

其中，open()方法採用三個引數：

• POST − 用於向Web伺服器傳送資料。

• url − url表示伺服器（檔案）位置。

• true − 對於非同步連線，將值設定為true。對於同步連線，將值設定為false。此引數的預設值為true。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function sendDoc() {
      // Creating XMLHttpRequest object
      var qhttp = new XMLHttpRequest();
      // Creating call back function
      qhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("sample").innerHTML = this.responseText;
            console.log("Data Send Successfully")
         }
      };
      // Open the given file
      qhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
      // Setting HTTP request header 
      qhttp.setRequestHeader('Content-type', 'application/json')
      // Sending the JSON document to the server 
      qhttp.send(JSON.stringify({
         "title": "MONGO",
         "userId": 11,
         "id": 21,
         "body": "est rerum tempore"
      }));
   }
</script>
<h2>Example of POST Request</h2>
<button type="button" onclick="sendDoc()">Post Data</button>
<div id="sample"></div>
</body>
</html>

輸出

在上面的示例中，我們使用PUT請求更新了以下給定資料的記錄。

"https://jsonplaceholder.typicode.com/todos/21" API:
{
   "title": "MONGO",
   "userId": 11,
   "id": 21,
   "body": "est rerum tempore"
}

DELETE請求

DELETE請求用於從Web伺服器刪除資料。在此請求中，要刪除的資料傳送在請求正文中，Web伺服器將從其儲存中刪除該資料。

語法

open('DELETE', url, true)

其中，open()方法採用三個引數：

• DELETE − 用於從Web伺服器刪除資料。

• url − 它表示將在Web伺服器上開啟的檔案URL。或者我們可以說伺服器（檔案）位置。

• true − 對於非同步連線，將值設定為true。對於同步連線，將值設定為false。此引數的預設值為true。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function delDoc() {
      // Creating XMLHttpRequest object
      var qhttp = new XMLHttpRequest();
      // Creating call back function
      qhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            document.getElementById("sample").innerHTML = this.responseText;
            console.log("Record Deleted Successfully")
         }
      };
      // Deleting given file
      qhttp.open("DELETE", "https://jsonplaceholder.typicode.com/todos/2", true);
      // Sending the request to the server 
      qhttp.send();
   }
</script>
<div id="sample">
   <h2>Example of DELETE Request</h2>
   <button type="button" onclick="delDoc()">Deleteing Data</button>
</div>
</body>
</html>

輸出

在上面的示例中，我們使用DELETE請求"https://jsonplaceholder.typicode.com/todos/2" API刪除ID = 2上的記錄。

AJAX還支援其他一些請求，例如OPTIONS、HEAD和TRACE，但它們是AJAX應用程式最少使用的請求。在下一篇文章中，我們將瞭解AJAX如何處理響應。

AJAX - 處理響應

AJAX是一種用於非同步地向Web伺服器傳送和接收資料而不重新載入或重新整理整個頁面的技術。當AJAX應用程式從網頁向伺服器發出非同步請求時，伺服器將響應請求並返回請求的資料，因此接收和處理伺服器的響應被稱為處理響應。或者我們可以說，處理響應是一個處理從伺服器返回的資料、對其執行適當的操作並相應地更新網頁的過程。

處理響應涵蓋以下幾點：

接收響應 − 一旦AJAX向伺服器傳送請求，客戶端JS程式碼就會等待伺服器響應。當伺服器響應請求時，響應將返回給客戶端。

處理響應 − 從伺服器獲取響應後，客戶端JS現在以預期格式處理資料，因為伺服器返回的資料採用各種格式，例如JSON、XML等，並且還從響應中提取僅相關資訊。

更新Web應用程式/網頁 − 處理響應後，AJAX回撥函式會根據響應動態更新網頁或Web應用程式。這包括修改HTML內容、顯示錯誤訊息、更新值等。

處理錯誤 − 如果請求遇到錯誤，則由於任何請求失敗、網路問題等，伺服器可能會響應錯誤狀態。因此，處理響應過程非常有效地處理錯誤並針對錯誤採取適當的措施。

如何處理響應的工作方式

使用XMLHttpRequest處理響應的步驟如下：

步驟1 − 使用XMLHttpRequest()建構函式建立一個XMLHttpRequest物件。使用此物件，您可以輕鬆地進行HTTP請求並非同步處理其響應。

var qhttp = new XMLHttpRequest();

步驟2 − 為readystatechange事件定義一個事件處理程式。每當XHR物件的readyState屬性的值發生更改時，都會觸發此事件。

qhttp.onreadystatechange = function() {
   if (qhttp.readyState == 4){
      if(qhttp.status == 200){
         // Display the response
      }else{
         // Handle the error if occure
      }
    }
  };

步驟3 − 使用HTTP方法（如GET、POST等）和我們要請求的URL開啟請求。

qhttp.open("HTTP Method","your-URL", true);

步驟4 − 根據需要設定任何標頭。

qhttp.setRequestHeader('Authorization', 'Your-Token');

步驟5 − 將請求傳送到伺服器。

qhttp.send()

示例

在下面的程式中，我們將處理伺服器針對給定請求返回的響應。為此，我們將建立一個名為handleResponse()的Javascript函式，該函式處理伺服器返回的響應並相應地顯示結果。此函式首先建立一個XMLHttpRequest物件，然後定義一個“onreadystatechange”事件處理程式來處理請求狀態。當請求狀態發生更改時，該函式檢查請求是否完成（readyState = 4）。如果請求已完成，則該函式檢查狀態程式碼是否為200。如果狀態程式碼為200，則顯示響應。否則，顯示錯誤訊息。

<!DOCTYPE html>
<html>
<body>
<script>
   function handleResponse() {
   // Creating XMLHttpRequest object
   var qhttp = new XMLHttpRequest();
   // Creating call back function
   qhttp.onreadystatechange = function() {
      if (qhttp.readyState == 4){
         if(qhttp.status == 200){
            // Display the response
            console.log(qhttp.responseText)
         }else{
            console.log("Found Error: ", qhttp.status)
         }
      }
   };
   // Open the given file
   qhttp.open("GET", "https://jsonplaceholder.typicode.com/todos", true);
   // Sending request to the server 
   qhttp.send()
}
</script>
<h2>Display Data</h2>
<button type="button" onclick="handleResponse()">Submit</button>
<div id="sample"></div>
</body>
</html>

輸出

結論

這就是AJAX如何處理伺服器返回的響應，因此網頁可以輕鬆地與伺服器進行後臺非同步通訊，而無需重新整理整個頁面。在下一篇文章中，我們將學習如何在AJAX中處理二進位制資料。

AJAX - 處理二進位制資料

二進位制資料是指以二進位制格式而不是文字格式存在的資料。它包括影像、音訊、影片以及其他非純文字檔案。我們可以使用XMLHttpRequest物件在AJAX中傳送和接收二進位制資料。在AJAX中處理二進位制資料時，重要的是設定正確的content type和response type標頭。因此，為了設定標頭，我們使用“Content-Type”標頭，在這裡我們設定正確的MIME型別來發送二進位制資料，並將“responseType”屬性設定為“arraybuffer”或“blob”，這表示接收二進位制資料。

傳送二進位制資料

要傳送二進位制資料，我們使用XMLHttpRequest的send()方法，該方法可以使用ArrayBuffer、Blob或File物件輕鬆傳輸二進位制資料。

示例

在下面的程式中，我們建立一個程式，該程式將從伺服器接收二進位制資料。因此，當我們單擊按鈕時，getBinaryData()函式將被觸發。它使用XMLHttpRequest物件使用GET方法從給定的URL獲取資料。在此函式中，我們將responseType屬性設定為arraybuffer，這告訴瀏覽器我們只需要接受響應中的二進位制資料。請求完成後，將呼叫onload()函式，在這個函式內部，我們檢查請求的狀態，如果響應成功，則訪問響應作為arraybuffer。然後使用Unit8Array()函式將arraybuffer轉換為Uint8array。它訪問二進位制資料的各個位元組。之後，我們將資料顯示在HTML頁面上。

<!DOCTYPE html>
<html>
<body>
<script>
   function getBinaryData() {
      // Creating XMLHttpRequest object
      var myhttp = new XMLHttpRequest();
      // Getting binary data
      myhttp.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
      // Set responseType to arraybuffer.
      myhttp.responseType = "arraybuffer";
      // Creating call back function
      myhttp.onload = (event) => {
         // IF the request is successful
         if (myhttp.status === 200){
            var arraybuffer = myhttp.response;
            // Convert the arraybuffer into array
            var data =  new Uint8Array(arraybuffer);
            // Display the binary data
            document.getElementById("example").innerHTML = data;
            console.log("Binary data Received");
         }else{
            console.log("Found error");
         }
      };
      // Sending the request to the server
      myhttp.send();
   }
</script>
<div id="example">
   <p>AJAX Example</p>
   <button type="button" onclick="getBinaryData()">Click Here</button>
</div>
</body>
</html>

輸出

結論

這就是我們如何處理二進位制資料的方法。要處理二進位制資料，我們需要將二進位制資料轉換為適當的資料格式。我們也可以以檔案、字串、ArrayBuffer和Blob的形式傳送二進位制資料。在下一篇文章中，我們將學習如何使用AJAX提交表單。

AJAX - 提交表單

AJAX是最流行的web技術，幾乎所有web開發人員都使用它來建立動態web應用程式。它使用web瀏覽器內建的XMLHttpRequest物件非同步地向web伺服器傳送和接收資料，反之亦然，而不會重新整理或影響網頁。我們還可以很容易地使用AJAX提交表單。

因此，要使用AJAX提交表單，我們需要按照以下步驟操作：

步驟1 − 使用XMLHttpRequest()建構函式建立一個XMLHttpRequest物件。

var zhttp = new XMLHttpRequest();

步驟2 − 建立一個變數（也稱為表單元素），其中包含表單中所有鍵值對，方法是使用document.querySelector()方法。

const FormElement = document.querySelector("mForm")

如果您有多個表單，則可以使用它們的ID定義表單。

步驟3 − 使用FormData建構函式建立FormData物件，並將上面建立的FormElement傳遞到其中。這意味著FormData物件是用鍵值對初始化的。

const myForm = new FormData(FormElement)

步驟4 − 建立一個回撥函式，當伺服器響應請求時將執行此函式。此函式定義在XHR物件的onreadystatechange屬性內。

zhttp.onreadystatechange = function() {
   // Body
}

在這裡，responseText屬性將返回伺服器的響應作為JavaScript字串，我們將在我們的網頁中進一步使用它來顯示訊息。

document.getElementById("responseElement").innerHTML = this.responseText;

步驟5 − 現在我們使用open()函式。在open()函式中，我們傳遞POST請求以及我們必須釋出表單資料的URL。

zhttp.open("POST", url, async)

步驟6 − 最後，我們使用send()函式將請求以及FormData物件一起傳送到伺服器。

zhttp.send(myForm);

完整的示例如下：

示例

在上面的程式碼中，我們建立了一個簡單的HTML表單來收集使用者資料，然後使用JavaScript和XMLHttpRequest提交表單資料。

因此，當用戶單擊“提交記錄”按鈕時，將呼叫sendFormData()函式。sendFormData()函式首先建立一個新的XHR物件。然後建立一個表單元素，該元素儲存來自HTML表單的所有鍵值對。然後它是一個新的FormData物件，並將表單元素傳遞到該物件。接下來，它設定一個回撥函式來處理來自伺服器的響應。當readyState屬性的值=4且Status屬性的值=201時，將觸發此函式。最後，它呼叫open()方法並使用伺服器的URL初始化HTTP POST方法，最後它呼叫send()方法將FormData請求傳送到伺服器。

因此，當來自伺服器的響應到來時，回撥函式將顯示結果並在控制檯日誌中列印訊息。

<!DOCTYPE html>
<html>
<body>
<script>
   function sendFormData() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
      const mFormEle = document.querySelector("#mForm")
      // Creating FormData object
      const myForm = new FormData(mFormEle);
      // Creating call back function to handle the response
      zhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("example").innerHTML = this.responseText;
            console.log("Form Data Posted Successfully")
         }
      };
      // Post/Add form data on the server
      zhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
      // Sending the request to the server
      zhttp.send(new FormData(mFormEle));
   }
</script>
<!--Creating simple form-->
<form id = "mForm">
   <h2>Enter the requested Data</h2>
   <label for="Utitle">Title</label>
   <input id="Utitle" type="text" name="title"><br>

   <label for="UId">UserId</label>
   <input id="UId" type="number" name="UserID"><br>

   <label for="Ubody">Body</label>
   <input id="Ubody" type="text" name="body"><br>

   <label for="Uage">Age</label>
   <input id="Uage" type="number" name="age"><br>

   <button type="button" onclick="sendFormData()">Submit Record</button>
</form>
<div id="example"></div>
</body>
</html>

輸出

結論

這就是AJAX使用XMLHttpRequest提交表單的方法。這是AJAX最常用的功能。在下一篇文章中，我們將瞭解AJAX如何將檔案上傳到伺服器。

AJAX - 檔案上傳

AJAX提供了一種靈活的方法來建立HTTP請求，該請求將檔案上傳到伺服器。我們可以使用FormData物件在請求中傳送單個或多個檔案。讓我們藉助以下示例來討論這個概念：

示例 − 上傳單個檔案

在下面的示例中，我們將使用XMLHttpRequest上傳單個檔案。為此，我們首先建立一個簡單的表單，其中包含檔案上傳按鈕和提交按鈕。現在，我們編寫JavaScript程式碼，在其中獲取表單元素並建立一個事件，當我們單擊上傳檔案按鈕時觸發該事件。在此事件中，我們將上傳的檔案新增到FormData物件，然後建立一個XMLHttpRequest物件，該物件將使用FormData物件將檔案傳送到伺服器並處理伺服器返回的響應。

<!DOCTYPE html>
<html>
<body>
<!-- Creating a form to upload a file-->  
<form id = "myForm">
   <input type="file" id="file"><br><br>
   <button type="submit">Upload File</button>
</form>
<script>
   document.getElementById('myForm').addEventListener('submit', function(x){
      // Prevent from page refreshing
      x.preventDefault();
   
      // Select the file from the system
      // Here we are going to upload one file at a time
      const myFile = document.getElementById('file').files[0];
   
      // Create a FormData to store the file
      const myData = new FormData();
      // Add file in the FormData
      myData.append("newFiles", myFile);
   
      // Creating XMLHttpRequest object
      var myhttp = new XMLHttpRequest();
   
      // Callback function to handle the response
      myhttp.onreadystatechange = function(){
         if (myhttp.readyState == 4 && myhttp.status == 200) {
            console.log("File uploaded Successfully")
         }
      };
   
      // Open the connection with the web server
      myhttp.open("POST", "https://httpbin.org/post", true);
   
      // Setting headers
      myhttp.setRequestHeader("Content-Type", "multipart/form-data");
   
      // Sending file to the server
      myhttp.send(myData);
   })
</script>
</body>
</html>

輸出

示例 − 上傳多個檔案

在下面的示例中，我們將使用XMLHttpRequest上傳多個檔案。在這裡，我們在DOM中使用檔案型別的屬性選擇系統中的兩個檔案。然後我們將輸入檔案新增到陣列中。然後我們建立一個FormData物件並將輸入檔案附加到該物件。然後我們建立一個XMLHttpRequest物件，該物件將使用FormData物件將檔案傳送到伺服器並處理伺服器返回的響應。

<!DOCTYPE html>
<html>
<body>
<!-- Creating a form to upload multiple files-->  
<h2> Uploading Multiple files</h2>  
<input type="file">
<input type="file">
<button>Submit</button>
<script>
   const myButton = document.querySelector('button');
   myButton.addEventListener('click', () => {
      // Get all the input files in DOM with attribute type "file":
      const inputFiles = document.querySelectorAll('input[type="file"]');
   
      // Add input files in the array 
      const myfiles = [];
      inputFiles.forEach((inputFiles) => myfiles.push(inputFiles.files[0]));
   
      // Creating a FormData
      const myformdata = new FormData();
   
      // Append files in the FormData object
      for (const [index, file] of myfiles.entries()){
         // It contained reference name, file, set file name
         myformdata.append(`file${index}`, file, file.name);
      }
      // Creating an XMLHttpRequest object
      var myhttp = new XMLHttpRequest();
   
      // Callback function
      // To handle the response
      myhttp.onreadystatechange = function(){
         if (myhttp.readyState == 4 && myhttp.status == 200) {
            console.log("File uploaded Successfully")
         }
      };
      // Open the connection with the web server
      myhttp.open("POST", "https://httpbin.org/post", true);
   
      // Setting headers
      myhttp.setRequestHeader("Content-Type", "multipart/form-data");
   
      // Sending file to the server
      myhttp.send(myformdata);
   })
</script>
</body>
</html>

輸出

結論

這就是我們如何使用XMLHttpRequest將檔案上傳到給定URL的方法。在這裡，我們可以上傳任何型別的檔案，例如jpg、pdf、word等，並且可以一次上傳一個檔案或一次上傳多個檔案。在下一篇文章中，我們將學習如何使用XMLHttpRequest建立FormData物件。

AJAX - FormData 物件

在AJAX中，FormData物件允許您建立一組鍵值對，這些鍵值對錶示表單欄位及其值，可以使用XMLHttpRequest傳送這些鍵值對。它主要用於傳送表單資料，但也可以獨立使用來發送資料。FormData物件傳輸的資料與表單的submit方法傳送的資料格式相同。

要建立一個新的FormData物件，AJAX提供FormData()建構函式。

語法

const objectName = new FormData()
Or 
const objectName = new FormData(form)
Or
const objectName = new FormData(form, mSubmit)

其中FormData()可以帶或不帶引數使用。FormData()建構函式使用的可選引數是：

form − 它表示一個HTML <form>元素。如果FormData物件具有此引數，則該物件將使用每個元素的name屬性作為鍵，並使用它們的提交值填充表單的當前鍵值對。它還會編碼檔案的輸入內容。

mSubmit − 它表示表單的提交按鈕。如果mSubmit具有name屬性或<input type = "image">，則其內容將包含在FormData物件中。如果指定的mSubmit不是按鈕，則會丟擲TypeError異常。如果mSubmit不是給定表單的成員，則會丟擲NotFoundError。

方法

FormData物件支援以下方法：

建立FormData物件

要建立和使用FormData物件而不使用HTML表單，請按照以下步驟操作：

步驟1 − 使用XMLHttpRequest()建構函式建立一個XMLHttpRequest物件。

var zhttp = new XMLHttpRequest();

步驟2 − 使用FormData建構函式建立一個FormData物件。

const myForm = new FormData()

步驟3 − 使用append()方法新增鍵值對。

myForm.append("KeyName", "keyValue")

步驟4 − 建立一個回撥函式來處理響應。

zhttp.onreadystatechange = function() {
   // Body
}

步驟5 − 現在我們使用open()函式。在open()函式中，我們傳遞POST請求以及我們必須釋出表單資料的伺服器URL。

zhttp.open("POST", url, async)

步驟6 − 因此，最後我們使用send()函式將請求以及FormData物件一起傳送到伺服器。

zhttp.send(myForm);

現在讓我們藉助示例來討論一下：

示例1

<!DOCTYPE html>
<html>
<body>
<script>
   function dataDoc() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
   
      // Creating FormData object
      const myForm = new FormData();
   
      // Assigning the form data object with key/value pair
      myForm.append("title", "AJAX Tutorial")
      myForm.append("UserId", "232")
      myForm.append("Body", "It is for web development")
      myForm.append("Age", "33")
   
      // Creating call back function to handle the response
      zhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("example").innerHTML = this.responseText;
            console.log("Form Data Posted Successfully")
         }
      };
      // Specify the method as POST, URL, and set async to true
      zhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
   
      // Sending the request to the server
      zhttp.send(myForm);
   }
</script>
<h2>Sending Form Data</h2>
<button type="button" onclick="dataDoc()">Submit</button>
<div id="example"></div>
</body>
</html>

輸出

當用戶點選“提交”按鈕時，會呼叫dataDoc()函式。該函式首先建立一個新的XHR物件和一個新的FormData物件。然後，使用append()方法在FormData物件中新增新的鍵值對。接下來，它設定一個回撥函式來處理來自伺服器的響應。當readyState屬性的值為4且Status屬性的值為201時，觸發此函式。最後，它呼叫open()方法並使用HTTP POST方法和伺服器的URL對其進行初始化，最後呼叫send()方法將FormData請求傳送到伺服器。

當伺服器返回響應時，回撥函式會顯示結果並在控制檯列印“表單資料提交成功”訊息。

示例2

<!DOCTYPE html>
<html>
<body>
<script>
   function sendFormData() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
   
      // Creating FormData object
      const myForm = new FormData();
   
      // Assigning the form data with key/value pair
      myForm.append("title", document.querySelector('#Utitle').value)
      myForm.append("UserId", document.querySelector('#UId').value)
      myForm.append("Body", document.querySelector('#Ubody').value)
      myForm.append("Age", document.querySelector('#Uage').value)
   
      // Creating call back function to handle the response
      zhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("example").innerHTML = this.responseText;
            console.log("Form Data Posted Successfully")
         }
      };
      // Post/Add form data on the server
      zhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
   
      // Sending the request to the server
      zhttp.send(myForm);
   }
</script>
   <!--Creating simple form-->
   <h2>Enter the requested Data</h2>
   <label for="Utitle">Title</label>
   <input id="Utitle" type="text" name="title"><br>
   
   <label for="UId">UserId</label>
   <input id="UId" type="number" name="UserID"><br>
   
   <label for="Ubody">Body</label>
   <input id="Ubody" type="text" name="body"><br>
   
   <label for="Uage">Age</label>
   <input id="Uage" type="number" name="age"><br>
   
   <button type="button" onclick="sendFormData()">Submit Record</button>
   <div id="example"></div>
</body>
</html>

輸出

在下圖中，輸入詳細資訊後，當我們點選提交按鈕時，資料將傳送到伺服器，伺服器返回id並在控制檯中顯示訊息。

在上面的程式碼中，我們使用JavaScript和XMLHttpRequest收集使用者資料並提交資料。

當用戶點選“提交記錄”按鈕時，會呼叫sendFormData()函式。sendFormData()函式首先建立一個新的XHR物件和一個新的FormData物件。它使用append()方法附加表單資料，這些資料的鍵和值是由使用者輸入的。接下來，它設定一個回撥函式來處理來自伺服器的響應。當readyState屬性的值為4且Status屬性的值為201時，觸發此函式。最後，它呼叫open()方法並使用HTTP POST方法和伺服器的URL對其進行初始化，最後呼叫send()方法將FormData請求傳送到伺服器。

伺服器的響應，回撥函式顯示結果並在控制檯列印訊息。

結論

這就是我們如何使用FormData物件的方法。它也是一個重要的物件，用於儲存各種型別的資料，例如檔案、純文字、JSON文件等。在下一篇文章中，我們將學習如何使用XMLHttpRequest傳送POST請求。

AJAX - 傳送 POST 請求

POST請求將資料從網頁傳送到Web伺服器。在此請求中，資料傳送在請求正文中，與URL分開。無法快取和收藏POST請求。此外，使用POST請求可以傳送任何長度的資料。

語法

open('POST', url, true)

此方法接受三個引數，它們是：

• POST − 用於向Web伺服器傳送資料。

• url − 它表示將在Web伺服器上開啟的檔案URL。

• true − 對於非同步連線，將此引數的值設定為true。或者對於同步連線，將值設定為false。此引數的預設值為true。

如何使用POST請求

要使用POST請求，我們需要遵循以下步驟：

步驟1 − 建立XMLHttpRequest物件。

var variableName = new XMLHttpRequest()

步驟2 − 建立XMLHttpRequest物件後，我們必須定義一個回撥函式，該函式將在從Web伺服器獲取響應後觸發。

XMLHttpRequestObjectName.onreadystatechange = function(){
   // Callback function body
}

步驟3 − 現在我們使用open()函式。在open()函式中，我們傳遞一個POST請求以及要傳送資料的URL。

XMLHttpRequestObjectName.open("POST", url, async)
XMLHttpRequestObjectName.setRequestHeader('Content-type', 'application/json')

步驟4 − 使用setRequestHeader()設定HTTP請求頭。它總是在open()方法之後但send()方法之前呼叫。這裡content-type頭設定為“application/json”，表示資料將以JSON格式傳送。

步驟5 − 最後，我們使用stringify()方法將JSON資料轉換為字串，然後使用send()方法將其傳送到Web伺服器。

XMLHttpRequestObjectName.send(JSON.stringify(JSONdata))

下圖將顯示以下程式碼的工作流程：

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function sendRecords() {
      // Creating XMLHttpRequest object
      var zhttp = new XMLHttpRequest();
   
      // JSON document
      const mParameters = {
         title: document.querySelector('#Utitle').value,
         userid: document.querySelector('#UId').value,
         body: document.querySelector('#Ubody').value
      }
      // Creating call back function
      zhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("example").innerHTML = this.responseText;
            console.log("Data Posted Successfully")
         }
         console.log("Error found")
      };
      // Post/Add JSON document on the given API
      zhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
   
      // Setting HTTP request header 
      zhttp.setRequestHeader('Content-type', 'application/json')
   
      // Sending the request to the server
      zhttp.send(JSON.stringify(mParameters));
   }
</script>

   <!--Creating simple form-->
   <h2>Enter data</h2>
   <label for="Utitle">Title</label>
   <input id="Utitle" type="text" name="title"><br>
   
   <label for="UId">UserId</label>
   <input id="UId" type="number" name="UserID"><br>
   
   <label for="Ubody">Body</label>
   <input id="Ubody" type="text" name="body"><br>
   
   <button type="button" onclick="sendRecords()">Submit</button>
   <div id="example"></div>
</body>
</html>

使用HTTP POST方法和伺服器的URL "https://jsonplaceholder.typicode.com/todos"初始化請求。然後，我們呼叫setRequestHeader()方法將請求的內容型別設定為JSON。之後，我們呼叫send()函式，將JSON文件的字串形式連同請求一起傳送到伺服器。

當伺服器響應請求時，“onreadystatechange”屬性將使用XMLHttpRequest物件的當前狀態呼叫回撥函式。如果“readyState”屬性設定為4（表示請求已完成），“status”屬性設定為201（表示伺服器已成功建立新資源），則響應資料將從“responseText”屬性中提取，並使用示例元素的“innerHTML”屬性顯示HTML文件。

這裡使用JSON.stringify()方法將JSON文件轉換為字串。這是必要的，因為XHR請求只能傳送文字資料。

PUT和POST請求的區別

以下是PUT和POST請求的區別：

結論

這就是XMLHttpRequest傳送POST請求的方式。它是傳送或釋出資料到伺服器最常用的方法。在下一篇文章中，我們將學習如何傳送PUT請求。

AJAX - 傳送 PUT 請求

PUT請求用於更新Web伺服器上的資料。在此請求中，資料傳送在請求正文中，Web伺服器將用新資料替換現有資料。如果指定的資料不存在，則它會將替換資料作為新記錄新增到伺服器中。

PUT請求在以下方面與POST請求有很大不同：

• PUT用於更新現有記錄，而POST用於在伺服器中新增新記錄。

• PUT請求可以快取，而POST請求不能快取。

• PUT請求是冪等的，而POST請求是非冪等的。

• PUT請求作為特定方法工作，而POST請求作為抽象方法工作。

語法

open('PUT', url, true)

其中，open()方法採用三個引數：

• PUT − 用於更新Web伺服器上的資料。

• url − url表示將在Web伺服器上開啟的檔案URL或位置。

• true − 對於非同步連線，將值設定為true。對於同步連線，將值設定為false。此引數的預設值為true。

如何傳送PUT請求

要傳送PUT請求，我們需要遵循以下步驟：

步驟1 − 建立XMLHttpRequest物件。

var variableName = new XMLHttpRequest()

步驟2 − 建立XMLHttpRequest物件後，我們必須定義一個回撥函式，該函式將在從Web伺服器獲取響應後觸發。

XMLHttpRequestObjectName.onreadystatechange = function(){
   // Callback function body
}

XMLHttpRequestObjectName.setRequestHeader('Content-type', 'application/json')

步驟4 − 使用setRequestHeader()設定HTTP請求頭。它總是在open()方法之後但send()方法之前呼叫。這裡content-type頭設定為“application/json”，表示資料將以JSON格式傳送。

步驟5 − 最後，我們使用stringify()方法將JSON資料轉換為字串，然後使用send()方法將其傳送到Web伺服器以更新伺服器上存在的資料。

XMLHttpRequestObjectName.send(JSON.stringify(JSONdata))

下圖將顯示示例的工作流程：

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function updateDoc() {
      // Creating XMLHttpRequest object
      var uhttp = new XMLHttpRequest();
   
      // Creating call back function
      uhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            document.getElementById("sample").innerHTML = this.responseText;
            console.log("Data update Successfully")
         }
      };
      // Updating the given file
      uhttp.open("PUT", "https://jsonplaceholder.typicode.com/todos/21", true);
   
      // Setting HTTP request header 
      uhttp.setRequestHeader('Content-type', 'application/json')
   
      // Sending the JSON document to the server 
      uhttp.send(JSON.stringify({
         "title": "ApplePie",
         "userId": 12,
         "id": 32,
         "body": "ApplePie is made up of Apple"
      }));
   }
</script>
<h2>PUT Request</h2>
<button type="button" onclick="updateDoc()">Updating Record</button>
<div id="sample"></div>
</body>
</html>

輸出

點選更新按鈕後，伺服器返回的輸出。

在上面的程式碼中，我們正在更新現有記錄，因此為了更新，我們建立一個JSON文件。要更新資料，我們點選“更新記錄”按鈕。因此，當我們點選“提交”按鈕時，將呼叫updateDoc()函式。此函式建立一個XMLHttpRequest物件。然後呼叫XHR物件的open()方法，使用HTTP PUT方法和伺服器的URL "https://jsonplaceholder.typicode.com/todos/21"初始化請求。然後呼叫setRequestHeader()方法將請求的內容型別設定為JSON。之後呼叫send()函式，將請求連同JSON文件一起傳送。當伺服器收到請求時，它會使用新資料更新指定的記錄。

如果更新成功，則回撥函式將被呼叫，其中“readyState = 4（表示請求已完成）”和“status = 200（表示成功響應）”。然後更新的資料將顯示在螢幕上。它還會向控制檯列印一條訊息，表示資料已成功更新。

這裡使用JSON.stringify()方法將JSON文件轉換為字串。這是必要的，因為XHR請求只能傳送文字資料。

注意 − 使用PUT方法時，需要在URL中提及記錄ID，例如 "https://jsonplaceholder.typicode.com/todos/21"。這裡我們更新ID為21的記錄。

結論

這就是我們如何使用XMLHttpRequest傳送PUT請求的方法。它通常用於更新或修改伺服器上存在的資料。在下一篇文章中，我們將學習如何傳送JSON資料。

AJAX - 傳送 JSON 資料

AJAX是非同步JavaScript和XML。它是一組Web技術的組合，用於開發動態Web應用程式，該應用程式可在後臺傳送和檢索來自伺服器的資料，而無需重新載入整個頁面。

JSON（JavaScript物件表示法）是一種儲存資料並可以將資料從一個系統傳輸到另一個計算機系統的格式。它易於理解且與語言無關。AJAX可以傳輸任何型別的資料，無論是JSON還是任何純文字。因此，在本文中，我們將學習如何使用AJAX傳送JSON資料。

傳送JSON資料

要使用AJAX傳送JSON資料，請遵循以下步驟：

步驟1 − 建立一個新的XMLHttpRequest例項。

步驟2 − 設定請求方法（open()方法）和URL。

步驟3 − 設定請求頭以指定資料格式。這裡content-type頭設定為“application/json”，表示資料將以JSON格式傳送。

步驟4 − 建立一個處理響應的回撥函式。

步驟5 − 編寫JSON資料。

步驟6 − 使用JSON.stringify()方法將JSON資料轉換為字串。

步驟7 − 現在使用send()方法傳送請求，並將JSON資料作為請求正文。

下圖顯示了以下程式碼的工作流程：

示例

<!DOCTYPE html>
<html>
<body>
<script>
function sendDoc() {
   // Creating XMLHttpRequest object
   var qhttp = new XMLHttpRequest();

   // Creating call back function
   qhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 201) {
         document.getElementById("sample").innerHTML = this.responseText;
         console.log("JSON Data Send Successfully")
      }
   };
   // Open the given file
   qhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);

   // Setting HTTP request header 
   qhttp.setRequestHeader('Content-type', 'application/json')

   // Sending the JSON data to the server 
   qhttp.send(JSON.stringify({
      "title": "Mickey",
      "userId": 11,
      "id": 21,
      "body": "Mickey lives in london"
   }));
}
</script>
<h2>Sending JSON Data</h2>
<button type="button" onclick="sendDoc()">Uplodaing Data</button>
<div id="sample"></div>
</body>
</html>

輸出

在上面的示例中，我們使用POST方法將以下JSON文件傳送到給定URL的伺服器：

{
   "title": "Mickey",
   "userId": 11,
   "id": 21,
   "body": "Mickey lives in london"
}

因此，當我們點選“更新資料”按鈕時，會呼叫sendDoc()函式。此函式建立一個XMLHttpRequest物件。然後呼叫XHR物件的open()方法，使用HTTP POST方法和伺服器的URL "https://jsonplaceholder.typicode.com/todos"初始化請求。然後呼叫setRequestHeader()方法將請求的內容型別設定為JSON。之後呼叫send()函式，將請求連同JSON文件一起傳送。當伺服器收到請求時，它會新增文件。

如果更新成功，則回撥函式將被呼叫，其中“readyState = 4（表示請求已完成）”和“status = 201（表示伺服器已成功建立新資源）”。然後，伺服器的響應將使用示例元素的innerHTML屬性顯示在HTML檔案中。它還會向控制檯列印一條訊息，表示JSON資料已成功傳送。

這裡使用JSON.stringify()方法將JSON文件轉換為字串。這是必要的，因為XHR請求只能傳送文字資料。

結論

這就是我們如何使用XMLHttpRequest傳送JSON資料的方法。它是最常用的資料傳輸格式，因為它輕量級且易於理解。在下一篇文章中，我們將學習如何解析XML物件。

AJAX - 傳送資料物件

在AJAX中，允許我們將資料物件作為HTTP請求的一部分從客戶端傳送到Web伺服器。資料物件是一個包含鍵值對資料的物件。它們通常以JavaScript物件表示。因此，在AJAX中傳送資料物件意味著我們將結構化資料傳遞給伺服器以進行進一步處理。它可以包含表單輸入、使用者輸入、使用者資訊或任何其他資訊。我們不僅可以使用AJAX和XMLHttpRequest傳送資料物件，還可以上傳和傳送系統中的檔案。

以下是資料物件的格式：

var myDataObject = {
   "name": "Pinky",
   "City": "Pune",
   "Age": 23
}

現在，為了使用XMLHttpRequest傳送此資料物件，我們需要使用stringify()方法將物件轉換為JSON字串，因為大多數框架都非常容易地支援JSON格式，而無需任何額外的工作。stringify()方法是一個JavaScript內建函式，用於將物件或值轉換為JSON字串。

語法

var myData = JSON.stringify(myDataObject)

這裡myDataObject是我們想要轉換為JSON字串的資料物件。

示例

在下面的程式中，我們將使用XMLHttpRequest傳送資料物件。為此，我們將建立一個XMLHttpRequest物件，然後建立一個包含我們要傳送的資料的資料物件。然後，我們使用stringify()函式將資料物件轉換為JSON字串，並將標頭設定為“application/json”，以告訴伺服器請求包含JSON資料。然後，我們使用send()函式傳送資料物件，響應由回撥函式處理。

<!DOCTYPE html>
<html>
<body>
<script>
   function sendDataObject() {
      // Creating XMLHttpRequest object
      var qhttp = new XMLHttpRequest();
   
      // Creating data object
      var myDataObject = {
         "name": "Monika",
         "City": "Delhi",
         "Age": 32,
         "Contact Number": 33333333
      }
      // Creating call back function
      qhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 201) {
            document.getElementById("sample").innerHTML = this.responseText;
            console.log("Data object Send Successfully")
         }
      };
      // Open the given file
      qhttp.open("POST", 
      "https://jsonplaceholder.typicode.com/todos", true);
   
      // Setting HTTP request header 
      qhttp.setRequestHeader('Content-type', 'application/json')
   
      // Converting data object to a string
      var myData = JSON.stringify(myDataObject)
   
      // Sending the data object to the server 
      qhttp.send(myData)
   }
</script>
   <h2>Sending Data object</h2>
   <button type="button" onclick="sendDataObject()">Submit</button>
   <div id="sample"></div>
</body>
</html>

輸出

結論

這就是我們將資料物件傳送到伺服器並相應更新響應的方式。它允許我們共享資訊並在不重新整理整個頁面的情況下更新資料。在下一篇文章中，我們將學習如何解析XML物件。

AJAX - 監控進度

AJAX提供了一個名為“監控進度”的特殊功能。使用此功能，我們可以跟蹤AJAX從Web瀏覽器到Web伺服器發出的非同步請求的進度。或者可以說，使用進度監控器，我們還可以監控從伺服器到使用者的上傳或下載的資料量。藉助進度監控，我們可以向用戶傳送包含以下點的反饋：

資料傳輸進度 - 我們可以監控從伺服器到客戶端傳輸的資料進度。或者，我們還可以跟蹤與給定檔案的總大小相比，傳輸或接收了多少資料。

請求狀態 - 還可以監控我們發出的請求的整體狀態（例如，請求仍在進行中、已完成或掛起）。這有助於程式設計師向用戶提供當前請求的正確反饋。

錯誤處理 - 除了跟蹤當前狀態外，處理請求資料時發生的任何錯誤（例如伺服器端錯誤、網路問題等）也很重要。因此，使用錯誤處理，我們可以輕鬆地向用戶傳送通知，以便他/她可以對發生的錯誤採取適當的措施。

如何監控進度

要監控AJAX請求的進度，我們可以使用以下方法：

使用onprogress事件 - 要監控請求的進度，我們可以定義一個“onprogress”事件，該事件在資料傳輸處理期間定期觸發。它通常用於監控檔案下載或大型資料/檔案傳輸的進度。它監控諸如載入了多少資料、傳輸資料的總大小等資訊。

示例

在下面的程式中，我們將藉助onprogress事件監控請求的當前狀態。在這裡，我們建立一個名為displayStatus()的Javascript函式，該函式顯示正在傳輸多少資料的狀態。此函式發出AJAX請求以將資料傳送到給定的URL。因此，它使用XMLHttpRequest物件建立一個請求，然後定義一個回撥函式來處理伺服器提供的響應。在回撥函式中，onprogress事件檢查傳輸資料的當前進度。在onprogress事件處理程式中，我們可以檢查進度資料是否可計算以避免除零錯誤。如果可計算，則可以計算傳輸到伺服器的資料百分比。

<script>
function displayStatus() {
   // Creating XMLHttpRequest object
   var myObj = new XMLHttpRequest();

   // Creating call back function
   // Here onprogress return the percentage of transferred data 
   myObj.onprogress = function(myEvent) {
      if (myEvent.lengthComputable){
         var dataTarnsferPercentage = (myEvent.loaded/myEvent.total)*100;
         console.log("Current progress of the data transfer:", dataTarnsferPercentage);
      }
   };
   // Open the given file
   myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

   // Sending the request to the server
   myObj.send();
}
</script>

使用onreadystatechange事件 - 我們可以透過建立一個onreadystatechange事件來監控請求的進度。每當XMLHttpRequest的readyState屬性發生更改時，此事件都會觸發。readyState屬性返回請求的當前狀態。

示例

在下面的程式中，我們將藉助onreadystatechange事件監控請求的當前狀態。在這裡，我們建立一個名為displayStatus()的Javascript函式，該函式顯示請求當前狀態的狀態。此函式發出AJAX請求以從給定的URL檢索資料。因此，它使用XMLHttpRequest物件建立一個請求，然後定義一個回撥函式來處理伺服器提供的響應。在回撥函式中，onreadystatechange事件使用readyState屬性檢查請求的當前狀態。如果readyState為XMLHttpRequest.DONE，則表示請求已完成並列印“請求已完成”。否則列印“請求正在進行中”。

<script>
function displayStatus() {
   // Creating XMLHttpRequest object
   var myObj = new XMLHttpRequest();

   // Creating call back function
   // Here onreadystatechange return the current state of the resuest
   myObj.onreadystatechange = function() {
      if (this.readyState == XMLHttpRequest.DONE){
         console.log("Request is completed")
      }else{
         console.log("Request is in-progress")
      }
   };
   // Open the given file
   myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

   // Sending the request to the server
   myObj.send();
}
</script>

結論

這就是我們如何監控請求進度的方式。這樣我們就可以輕鬆跟蹤正在傳輸多少資料、成功處理多少資料、錯誤等。在下一篇文章中，我們將看到AJAX支援的狀態程式碼。

AJAX - 狀態碼

在AJAX中，XMLHttpRequest支援各種屬性和方法來執行不同型別的操作。在這些屬性和方法中，status屬性/屬性是一個狀態程式碼，它指定XMLHttpRequest物件傳送的資料請求的整體狀態。或者可以說，狀態程式碼是一個三位數，它表示XMLHttpRequest物件傳送的請求的結果，例如請求成功、出現錯誤或重定向等。

因此，status屬性的語法為：

格式

if(XMLHttpRequestObjectName.status == 200){
   // Body
}

在這裡，我們可以使用XMLHttpRequest物件訪問status屬性或屬性。如果狀態程式碼等於200，則將執行主體內的程式碼。

狀態程式碼

HTTP狀態返回的狀態程式碼如下：

成功

重定向

客戶端錯誤

伺服器錯誤

流程圖

在下面的程式碼中，我們從伺服器檢索資料。因此，我們建立一個名為showDoc()的函式。現在，我們透過單擊“單擊此處”按鈕來呼叫此函式。此函式將使用XMLHttpRequest()建構函式建立一個新的XHR物件。然後它建立一個回撥函式來處理請求。然後它呼叫XHR物件的open()函式來使用HTTP GET方法和伺服器的URL初始化請求。最後，它呼叫send()函式將請求傳送到伺服器。

因此，當伺服器響應請求時，“onreadystatechange”屬性將使用XMLHttpRequest物件的當前狀態呼叫回撥函式。如果狀態為200，則表示請求成功，因此它會在螢幕上顯示結果並在控制檯日誌中寫入訊息。如果狀態為404，則表示伺服器遇到錯誤。因此，我們在控制檯日誌中收到錯誤訊息。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function ShowDoc() {
      // Creating XMLHttpRequest object
      var myhttp = new XMLHttpRequest();
   
      // Creating call back function
      myhttp.onreadystatechange = function() {
         // Checking the status of the response
         // This will proceed when the response is successful
         if (this.status == 200){
            console.log("Found the requested data")
            document.getElementById("example").innerHTML = this.responseText;
         }
         // This will proceed when the error is found
         else if(this.status == 404){
            console.log("Found error");
         }
      };
      // Open the given file
      myhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/3", true);
   
      // Sending the request to the server
      myhttp.send();
   }
</script>
<p>Please click on the button to fetch data</p>
<button type="button" onclick="ShowDoc()">Click Here</button>
<div id="example"></div>
</body>
</html>

輸出

結論

因此，這些是XMLHttpRequest使用的狀態程式碼。這些狀態程式碼表示請求的狀態。根據這些狀態程式碼，我們可以對請求執行操作。在下一篇文章中，我們將學習XMLHttpRequest如何處理錯誤。

AJAX - 應用

AJAX是一種常用的Web技術，用於非同步地向Web伺服器傳送和接收資料，而無需重新載入網頁的所有元件。它易於理解和使用，因為它不使用任何新技術，而是現有Web技術的組合，例如JavaScript、XML、HTML等。它使Web應用程式更具響應性和互動性，以便它們可以即時獲取和顯示資料，而無需重新整理整個頁面。由於其強大的功能，它幾乎被所有Web應用程式建立者（包括小型或大型公司）使用。

網際網路上幾乎所有應用程式都普遍使用AJAX。一些流行的應用程式包括：

谷歌地圖 − 它是AJAX應用的一個很好的例子。它使用AJAX動態更新地圖，只顯示請求的資料，而無需重新載入整個頁面。

Facebook − 它也是AJAX應用的一個很好的例子。它使用AJAX更新動態資訊、通知、新聞和其他功能。AJAX還用於根據使用者的操作更新網頁的Facebook內容。

Gmail − Gmail也使用AJAX為使用者提供無縫且互動式的環境。藉助AJAX，Gmail可以更新收件箱，刪除電子郵件或將電子郵件標記為已讀，而無需重新載入頁面。

Twitter − Twitter也是AJAX應用的優秀示例之一。使用AJAX為使用者提供即時環境。每當釋出新的推文時，它都會新增到時間線中，而無需重新整理整個頁面。通知也是如此。

線上購物網站 − 線上購物網站也使用AJAX來顯示產品詳細資訊及其即時價格，而無需使用者導航到新網頁。

谷歌搜尋 − 谷歌也使用AJAX實現其自動完成功能。當用戶在谷歌搜尋欄中輸入內容時，此功能會在下拉列表中提供即時建議，而無需重新載入原始網頁。此功能也以各種形式使用。

聊天和即時訊息 − 如今，大多數網站都使用客戶支援聊天工具，透過這些工具，他們可以與客戶溝通，而無需重新載入整個網頁。AJAX也實現了此功能。

表單提交和驗證 − 各種網站使用AJAX進行表單的提交和驗證。它在表單的某些欄位中提供自動填充功能，並可以為指定欄位的可能條目提供建議（如自動完成功能）。AJAX還用於驗證使用者的憑據。

投票和評分系統 − 各種網站使用評分和投票系統，允許使用者根據投票和評分自定義資料。此外，使用者可以對給定網站上的內容進行投票或評分，然後網站會相應地更新其內容。此類網站使用AJAX來管理使用者的投票和評分。

結論

總的來說，AJAX是一種非常強大的技術，它允許Web開發人員建立互動式和動態的Web應用程式。使用此技術，應用程式可以非同步地與伺服器通訊，而無需為每個請求重新載入整個頁面。動態應用程式為使用者提供了流暢的瀏覽器體驗。在下一篇文章中，我們將瞭解資料庫操作。

AJAX - 瀏覽器相容性

AJAX建立動態網頁，其中使用者和伺服器之間的通訊在後臺進行，而無需載入整個頁面。因此，瞭解瀏覽器相容性非常重要，因為不同的瀏覽器可以以不同的方式實現XMLHttpRequest物件及其相關的屬性和方法。

以下是用於檢查瀏覽器相容性的關鍵點：

支援XMLHttpRequest物件 − 瀏覽器必須支援XMLHttpRequest物件。一些舊的瀏覽器（如Internet Explorer 6或更早版本）不支援XMLHttpRequest物件。為了使它們與其他瀏覽器相容，您需要使用iframe或表單元素的回退方法來執行所有AJAX功能。

跨域請求 − 一些瀏覽器不支援使用XMLHttpRequest進行的跨域請求。因此，為了防止這些漏洞，我們使用JSONP（帶填充的JSON）、CORS（跨源資源共享）或代理伺服器來進行跨域請求。

響應型別 − 不同的瀏覽器可能支援不同的響應型別，例如文字、JSON、XML、二進位制資料等，用於XMLHttpRequest。因此，如果您希望您的應用程式支援各種Web瀏覽器，則需要找到支援的響應型別並明智地處理它。

錯誤處理 − 不同的瀏覽器對XMLHttpRequest錯誤的處理方式不同。因此，您需要檢查您的錯誤處理程式碼，以確保它適用於所有瀏覽器。

事件處理 − 不同的瀏覽器可能有自己處理XMLHttpRequest事件（如onload等）的方式。因此，您需要測試並調整程式碼，以確保它適用於所有瀏覽器。

儘管大多數現代瀏覽器（如Google Chrome、Mozilla Firefox、Microsoft Edge、Safari和Opera）完全支援AJAX，但一些舊的瀏覽器（如Internet Explorer 6和7）對AJAX的支援有限。因此，切勿忘記瀏覽器相容性，因為它會影響AJAX Web應用程式的工作。

結論

為了確保您的AJAX應用程式在所有瀏覽器中的相容性，您需要使用提供跨瀏覽器支援AJAX的JavaScript庫或框架。此外，這些庫可以幫助您消除處理XMLHttpRequest時的瀏覽器特定差異，併為AJAX請求提供一致的API。在下一篇文章中，我們將瞭解AJAX提供的安全功能。

AJAX - 示例

以下是一些使用AJAX的著名Web應用程式列表。

谷歌地圖

使用者可以使用滑鼠拖動整個地圖，而無需點選按鈕。

• https://maps.google.com/

谷歌建議

鍵入時，Google會提供建議。使用箭頭鍵導航結果。

• https://www.google.com/webhp?complete=1&hl=en

Gmail

Gmail是一款基於電子郵件可以更直觀、高效和實用的理念構建的網路郵件。

• https://gmail.com/

雅虎地圖（新版）

現在到達目的地更加輕鬆和有趣！

• https://maps.yahoo.com/

AJAX與傳統CGI程式的區別

嘗試這兩個示例，您會感受到其中的區別。在嘗試AJAX示例時，沒有不連續性，您可以很快獲得響應，但是當您嘗試標準GCI示例時，您必須等待響應，並且您的頁面也會重新整理。

AJAX示例

* =

標準示例

* =

注意 − 我們在AJAX資料庫中提供了一個更復雜的示例。

AJAX - 瀏覽器支援

並非所有可用的瀏覽器都支援AJAX。以下是支援AJAX的主要瀏覽器列表。

• Mozilla Firefox 1.0及以上版本。
• Netscape 7.1及以上版本。
• Apple Safari 1.2及以上版本。
• Microsoft Internet Explorer 5及以上版本。
• Konqueror。
• Opera 7.6及以上版本。

編寫下一個應用程式時，請考慮不支援AJAX的瀏覽器。

注意 − 當我們說瀏覽器不支援AJAX時，它只是意味著瀏覽器不支援建立Javascript物件——XMLHttpRequest物件。

編寫瀏覽器特定程式碼

使您的原始碼與瀏覽器相容的最簡單方法是在您的JavaScript中使用try...catch塊。

示例

<html>
<body>
<script language = "javascript" type = "text/javascript">
   <!-- 
   //Browser Support Code
   function ajaxFunction() {
      var ajaxRequest;  // The variable that makes Ajax possible!
      try {
         // Opera 8.0+, Firefox, Safari 
         ajaxRequest = new XMLHttpRequest();
      } catch (e) {
         // Internet Explorer Browsers
         try {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
               // Something went wrong
               alert("Your browser broke!");
               return false;
            }
         }
      }
   }
   //-->
</script>
<form name = 'myForm'>
   Name: <input type = 'text' name = 'username' /> <br />
   Time: <input type = 'text' name = 'time' />
</form>
</body>
</html>

輸出

在上面的JavaScript程式碼中，我們嘗試三次建立XMLHttpRequest物件。我們的第一次嘗試：

• ajaxRequest = new XMLHttpRequest();

這是針對Opera 8.0+、Firefox和Safari瀏覽器。如果失敗，我們將再嘗試兩次建立Internet Explorer瀏覽器的正確物件：

• ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
• ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

如果仍然無效，則表示您正在使用一個非常過時的瀏覽器，它不支援XMLHttpRequest，這也意味著它不支援AJAX。

不過，很可能我們的變數ajaxRequest現在將設定為瀏覽器使用的任何XMLHttpRequest標準，我們可以開始向伺服器傳送資料。分步AJAX工作流程將在下一章中解釋。

AJAX - XMLHttpRequest

在AJAX中，XMLHttpRequest扮演著非常重要的角色。XMLHttpRequest用於在使用者/客戶端在前景工作的同時在後臺與Web伺服器交換資料，然後使用接收到的資料更新網頁的一部分，而無需重新載入整個頁面。

我們還可以說XMLHttpRequest (XHR) 可以被各種Web瀏覽器指令碼語言（如JavaScript、JScript、VBScript等）用於在HTTP的幫助下與Web伺服器交換XML資料。除了XML，XMLHttpRequest還可以獲取各種格式的資料，如JSON等。它在客戶端和伺服器端之間建立非同步連線。

語法

variableName = new XMLHttpRequest()

使用新的關鍵字以及XMLHttpRequest()建構函式，我們可以建立一個新的XMLHttpRequest物件。必須在呼叫open()函式初始化它之前建立此物件，然後才能呼叫send()函式將請求傳送到Web伺服器。

XMLHttpRequest物件方法

XMLHttpRequest物件具有以下方法：

XMLHttpRequest物件屬性

XMLHttpRequest物件具有以下屬性：

XMLHttpRequest的使用

在理解了XMLHttpRequest的基本語法、方法和屬性之後，我們現在學習如何在實際生活中使用XMLHttpRequest。要在你的程式中使用XMLHttpRequest，首先我們需要遵循以下主要步驟：

步驟1 − 建立XMLHttpRequest物件。

var variableName = new XMLHttpRequest()

步驟 2 − 建立XMLHttpRequest物件後，我們現在必須定義一個回撥函式，該函式將在從Web伺服器獲取響應後觸發。

XMLHttpRequestObjectName.onreadystatechange = function(){
   // Callback function body
}

XMLHttpRequestObjectName.open(method, url, async)
XMLHttpRequestObjectName.send()

步驟 3 − 現在我們使用open()和send()函式向Web伺服器傳送請求。

現在讓我們藉助以下示例瞭解XMLHttpRequest的工作原理

示例

在下面的示例中，我們將從伺服器獲取資料。要從伺服器獲取資料，我們將單擊“單擊我”按鈕。因此，當我們單擊“單擊我”按鈕時，將呼叫displayDoc()函式。在displayDoc()函式內，我們建立一個XMLHttpRequest物件。然後，我們建立一個回撥函式來處理伺服器響應。然後，我們呼叫XHR物件的open()方法，使用HTTP GET方法和伺服器URL（"https://jsonplaceholder.typicode.com/todos"）初始化請求。然後，我們呼叫send()函式傳送請求。

因此，當伺服器響應請求時，“onreadystatechange”屬性將使用XMLHttpRequest物件的當前狀態呼叫回撥函式。如果“readyState”屬性設定為4（這意味著請求已完成）並且“status”屬性設定為200（這意味著成功響應），則響應資料將從“responseText”屬性中提取，並使用示例元素的“innerHTML”屬性顯示HTML文件。

如果在請求期間發現錯誤，則回撥函式中存在的else語句將執行。這就是我們如何從伺服器獲取資料的方法。

<!DOCTYPE html>
<html>
<body>
<script>
function displayDoc() {
   // Creating XMLHttpRequest object
   var myObj = new XMLHttpRequest();

   // Creating a callback function
   myObj.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("sample").innerHTML = this.responseText;
      } else {
         console.log("Error Found")
      }
   };
   // Open the given file
   myObj.open("GET", "https://jsonplaceholder.typicode.com/todos", true);

   // Sending the request to the server
   myObj.send();
}
</script>
<div id="sample">
   <h2>Getting Data</h2>
   <p>Please click on the button to fetch data</p>
   <button type="button" onclick="displayDoc()">Click Me</button>
</div>
</body>
</html>

輸出

結論

XMLHttpRequest是AJAX的主要物件，透過它，AJAX可以在Web瀏覽器和Web伺服器之間建立非同步通訊。因此，在下一篇文章中，我們將學習如何使用XMLHttpRequest物件傳送請求。

AJAX - 資料庫操作

為了清楚地說明使用AJAX從資料庫訪問資訊有多麼容易，我們將動態構建MySQL查詢並在“ajax.html”上顯示結果。但在我們繼續之前，讓我們先做好準備工作。使用以下命令建立一個表。

注意 − 我們假設您擁有執行以下MySQL操作的足夠許可權。

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
) 

現在使用以下SQL語句將以下資料轉儲到此表中：

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

客戶端HTML檔案

現在讓我們來看我們的客戶端HTML檔案ajax.html，它將包含以下程式碼：

示例

<html>
<body>
<script language = "javascript" type = "text/javascript">
   <!-- 
   //Browser Support Code
   function ajaxFunction() {
      var ajaxRequest; // The variable that makes Ajax possible!
      try {
         // Opera 8.0+, Firefox, Safari
         ajaxRequest = new XMLHttpRequest();
      } catch (e) {
         // Internet Explorer Browsers
         try {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
               // Something went wrong
               alert("Your browser broke!");
               return false;
            }
         }
      }
      // Create a function that will receive data
      // sent from the server and will update
      // div section in the same page.
      ajaxRequest.onreadystatechange = function() {
         if(ajaxRequest.readyState == 4) {
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
         }
      }
      // Now get the value from user and pass it to
      // server script.
      var age = document.getElementById('age').value;
      var wpm = document.getElementById('wpm').value;
      var sex = document.getElementById('sex').value;
      var queryString = "?age = " + age ;
      queryString +=  "&wpm = " + wpm + "&sex = " + sex;
      ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
      ajaxRequest.send(null); 
   }
   //-->
</script>
<form name = 'myForm'>
   Max Age: <input type = 'text' id = 'age' /> <br />
   Max WPM: <input type = 'text' id = 'wpm' /> <br />
   Sex:
   <select id = 'sex'>
   <option value = "m">m</option>
   <option value = "f">f</option>
   </select>
   <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
</form>
<div id = 'ajaxDiv'>Your result will display here</div>
</body>
</html>

注意 − 查詢中傳遞變數的方式符合HTTP標準並具有表單A。

URL?variable1 = value1;&variable2 = value2;

上述程式碼將為您提供如下所示的螢幕：

輸出

您輸入後，結果將顯示在此部分。

注意 − 這是一個虛擬螢幕。

伺服器端PHP檔案

您的客戶端指令碼已準備就緒。現在，我們必須編寫伺服器端指令碼，該指令碼將從資料庫中獲取年齡、wpm和性別，並將其傳送回客戶端。將以下程式碼放入檔案“ajax-example.php”中。

<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
	
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
	
//Select Database
mysql_select_db($dbname) or die(mysql_error());
	
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
	
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
	
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";

if(is_numeric($age))
   $query .= " AND age <= $age";

if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
	
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";

// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)) {
   $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>";
}

echo "Query: " . $query . "<br />";
$display_string .= "</table>";

echo $display_string;
?>

現在嘗試在最大年齡或任何其他框中輸入有效值（例如，120），然後單擊查詢MySQL按鈕。

您輸入後，結果將顯示在此部分。

如果您已成功完成本課程，那麼您就知道如何將MySQL、PHP、HTML和Javascript結合起來編寫AJAX應用程式。

AJAX - 安全性

AJAX是最常用的Web技術，用於非同步地向Web伺服器傳送和接收資料，而不會干擾客戶端應用程式其他元件的功能。儘管AJAX本身不會產生任何安全漏洞，但我們在實現AJAX時仍必須採取一些安全措施。安全措施包括：

跨站指令碼(XSS) − AJAX應用程式應該能夠抵禦XSS攻擊。如果沒有實現適當的輸入驗證和輸出編碼，則駭客可以輕鬆地將惡意指令碼注入AJAX響應中。這些惡意指令碼用於竊取系統中的敏感資料或操縱內容。因此，在將資料顯示在網頁上之前，始終建立一個能夠抵禦此類攻擊的AJAX應用程式，使用適當的驗證和清理。

跨站請求偽造(CSRF) − 在此攻擊中，攻擊者透過利用身份驗證會話來欺騙瀏覽器執行不需要的操作。它可以利用AJAX請求並執行未經授權的操作。因此，為了防止此類攻擊，我們必須實施CSRF保護技術，例如生成和驗證隨機令牌，或者可以使用同源策略。

不安全的直接物件引用(IDOR) − 請求通常使用唯一的識別符號從伺服器訪問指定的資源。但是，如果攻擊者獲得此識別符號，則可以輕鬆地操縱或訪問未經授權的資源。因此，為了防止這種情況，請避免公開敏感資訊。此外，開發人員還應在伺服器端檢查指定資源的使用者授權。

內容安全策略(CSP) − 這是一種策略，可以幫助使用者/開發人員避免惡意活動或未經授權的訪問。它為安全的指令碼和其他資源提供允許的來源。

伺服器端驗證 − 伺服器端驗證非常重要，因為它確保提交的資料符合指定標準，並且安全可靠地進行後續處理。我們無法繞過或操縱伺服器端驗證，但可以繞過客戶端驗證。

安全會話管理 − AJAX應用程式應妥善維護使用者會話和會話令牌，以保護會話免受攻擊。始終檢查會話令牌是否正確生成，並安全地傳輸，並在會話失效或過期時能夠登出。

輸入驗證和清理 − 伺服器應執行對從客戶端接收的資料進行驗證和清理，以防止攻擊。

定期更新和安全 − 如我們所知，AJAX 使用外部庫或框架。因此，保持它們的最新狀態是一項重要的任務。以避免各種漏洞並提高應用程式的安全性。

結論

因此，在建立 AJAX 應用程式時，始終記住這些安全要點，以保護您的應用程式免受攻擊。在下一篇文章中，我們將討論 AJAX 面臨的主要問題。

AJAX - 問題

世界上每種技術都有其光明面和黑暗面，AJAX 是一種強大的技術，用於開發動態和互動式的 Web 應用程式，但它也面臨一些挑戰和問題。因此，AJAX 的一些常見問題包括：

跨域請求 − 在 AJAX 中，請求通常遵循同源策略。出於安全考慮，此策略限制請求只能訪問同一域，這意味著如果您嘗試向不同域發出 AJAX 請求，則會收到 CORS 錯誤。因此，要克服此錯誤，您需要重新配置系統並藉助 JSONP 或代理伺服器允許跨域請求。

安全漏洞 − 在 AJAX 中，請求可能受到 XSS（跨站指令碼）或 CSRF（跨站請求偽造）攻擊。因此，為了避免此類漏洞，我們必須使用輸入驗證、輸出編碼和 CSRF 保護令牌。

瀏覽器支援 − 一些瀏覽器版本不支援 AJAX 功能，從而導致瀏覽器相容性問題。因此，在使用 AJAX 時，請檢查您的瀏覽器是否可以發出或支援 AJAX 請求。

效能影響 − 如果我們沒有正確最佳化 AJAX 請求，則會影響效能。如果我們傳輸過多的資料、不必要的請求、頻繁的請求或低效的伺服器端處理，這些活動都會導致頁面載入時間變慢，並可能增加伺服器負載。因此，請始終發出適當且最佳化的請求。

搜尋引擎最佳化 (SEO) − 搜尋引擎在索引 AJAX 驅動的內容時經常面臨挑戰，因為舊的網路爬蟲不執行 JavaScript。這會影響網頁在搜尋引擎中的排名和發現。

測試和除錯 − 由於請求的非同步行為，很難除錯 AJAX 程式碼。因此，為了克服這個問題，我們必須使用良好的除錯工具來識別問題並正確解決問題。

JavaScript 依賴性 − AJAX 通常依賴於 JavaScript。因此，如果在 Web 瀏覽器中停用了 JavaScript，我們將無法使用 AJAX 功能。因此，請始終在 Web 瀏覽器中啟用 JavaScript 以獲得更好的體驗。

程式碼複雜性 − AJAX 程式碼很複雜，尤其是在處理非同步流程和管理響應時。因此，為了克服這個問題，請始終建立組織良好、易於維護和清晰的程式碼，其中每個關注點都維護在單獨的程式碼中，以便開發人員可以輕鬆理解。

依賴管理 − 如我們所知，AJAX 是使用各種 Web 技術實現的，因此它必須依賴於外部庫或框架。因此，及時管理依賴項和更新它們是 AJAX 面臨的最大挑戰，尤其是在我們處理多個元件或外掛時。

結論

這些是 AJAX 應用程式面臨的主要問題。瞭解這些問題後，我們可以在應用程式中更好地利用 AJAX，以實現最佳功能、安全性和流暢的使用者體驗。這就是我們 AJAX 教程的總結。

Fetch API - 基礎

Fetch 是一種基於 Promise 的 API，它提供了一個 JavaScript 介面來非同步訪問或操作請求和響應。它比 XMLHttpRequest 更強大，使用 Fetch API，我們可以非同步地向伺服器傳送資料或從伺服器請求資料。它還使用 Request 和 Response 物件以及 CORS 和 HTTP 原點標頭概念。

以下是 Fetch API 的主要組成部分：

• fetch() 函式 − 為了獲取資源或建立請求，Fetch API 使用名為 fetch() 的全域性方法。它返回一個 Promise，該 Promise 進一步解析為 Response 物件。

• Request 和 Response 物件 − Request 物件用於表示正在傳送的請求，其中包含所有資訊，例如 URL、標頭等。而 Response 物件用於表示伺服器返回的響應，包括狀態程式碼、正文和響應標頭。

• Promise − Fetch API 基於 Promise，因為它們非同步地處理操作和管理響應流。使用 Promise，我們可以建立一個操作鏈，並可以使用 .then() 和 .catch() 函式處理成功和錯誤。

• 自定義 − 使用 Fetch API，我們可以透過指定方法、向請求新增正文、設定標頭、處理不同格式的資料等來自定義請求。

• CORS − Fetch API 對 CORS（跨域資源共享）提供良好的支援，允許使用者向不同域發出請求。

Fetch API 的工作原理

Fetch API 用於在 Web 瀏覽器的 JavaScript 程式碼中建立 HTTP 請求。因此，我們將透過以下步驟瞭解 Fetch API 如何從傳送請求到接收響應的工作原理：

以下是上述流程圖的分步說明：

步驟 1 − 請求初始化：在客戶端，JavaScript 程式使用 fetch() 函式建立一個請求物件。在這個 fetch() 函式中，我們傳遞要從中獲取資源的 URL 以及其他可選控制元件，例如標頭、方法、正文等。

步驟 2 − 傳送請求：初始化請求後，Fetch API 使用給定的 URL 將請求傳送到伺服器。如果請求是 GET 請求，則瀏覽器會直接將請求傳送到伺服器。如果請求不是 GET 請求，則瀏覽器會發送預檢 OPTIONS 請求以檢查伺服器是否允許該請求。

步驟 3 − 伺服器處理：伺服器收到請求後，會處理該請求。它可以在請求上執行各種操作，例如處理請求、檢索資料等。

步驟 4 − 生成響應：現在伺服器會生成對給定請求的響應。伺服器響應通常包含狀態程式碼（例如，200 表示成功，404 表示請求未找到等）、響應標頭和可選正文。

步驟 5 − 接收響應：Web 瀏覽器從伺服器接收響應。現在，Fetch API 使用 Promise 來解析伺服器傳送的響應物件。

步驟 6 − 處理響應：Fetch API 使用基於 Promise 的語法來處理伺服器返回的響應。使用此方法，我們可以訪問響應狀態、正文和標頭，並可以對接收到的資料執行操作。

步驟 7 − 解析響應：如果伺服器響應包含文字資料，則 JavaScript 程式使用內建方法，如 .json()、.text()、.blob() 等來解析和提取響應中的資料。

步驟 8 − 錯誤處理：如果伺服器返回錯誤，則由 catch() 函式處理錯誤。

這些是瞭解 Fetch API 工作流程的基本步驟。這些步驟可能會因即時使用的複雜性而有所不同。此外，如我們所知，Fetch API 是非同步的，因此在等待伺服器響應時不會阻塞其他 JavaScript 程式碼的執行。

優點

以下是 Fetch API 的優點：

• 易於使用 − Fetch API 提供簡單直接的語法來建立非同步請求。

• Promise − Fetch API 使用 Promise，因此它可以輕鬆處理非同步操作。Promise 提供了一種精確的方法來輕鬆處理響應和錯誤。

• 現代且支援瀏覽器 − Fetch API 是現代 Web 標準，並且內置於 Web 瀏覽器中，因此幾乎所有現代 Web 瀏覽器和平臺都支援它。這使得 Fetch API 比 XMLHttpRequest 更一致且更可預測。

• 流式傳輸和漸進式載入 − Fetch API 支援流式響應，這意味著我們可以在響應完全載入之前開始處理響應。這通常對大型檔案很有用。

• 內建 JSON 支援 − Fetch API 非常高效地支援 JSON 資料。它可以自動解析 JSON 響應並將它們轉換為 JavaScript 物件。

• 與其他 API 整合 − 由於 Fetch API 的行為，它可以輕鬆地與其他 API 整合，例如 Service Worker API、Cache API 等。

• 更多控制 − 使用 Fetch API，我們可以輕鬆地使用附加引數（例如標頭、方法、正文等）來自定義請求。

缺點

以下是 Fetch API 的缺點：

• Web 瀏覽器支援有限 − Fetch API 幾乎受到所有現代 Web 瀏覽器的支援，但不被較舊的 Web 瀏覽器支援。如果您使用的是較舊的 Web 瀏覽器，則必須使用較舊的方法，例如 XMLHttpRequest 等。

• 請求取消 − Fetch API 沒有提供任何內建方法來取消已發起的請求。

• 超時 − Fetch API 沒有提供任何指定或內建方法來使請求超時。如果您想為請求強制執行超時，則必須手動執行。

• 錯誤處理 − Fetch API 提供有限的錯誤處理方法。它將除 2xx 之外的任何 HTTP 狀態程式碼都視為錯誤。此行為通常適用於某些特定情況，但不適用於所有情況。

• 檔案載入進度事件 − Fetch API 沒有提供任何內建事件來進行檔案上傳。如果您想監控檔案上傳的進度，則需要額外的庫。

• 跨域限制 − 如我們所知，Fetch API 遵循瀏覽器的同源策略，因此由於此跨域請求需要伺服器端的額外 CORS 標頭，或者需要進行 CORS 預檢檢查，這會增加開發的額外複雜性。

結論

因此，與傳統的 XMLHttpRequest 等方法相比，Fetch API 更強大且更靈活。它可以輕鬆地與其他 API 和平臺整合。它是 Web 應用程式中使用 HTTP 請求的常用方法。在下一篇文章中，我們將瞭解 Fetch API 和 XMLHttpRequest 之間的區別。

Fetch API vs XMLHttpRequest

XMLHttpRequest 物件用於非同步地與伺服器通訊，這意味著我們可以在後臺與伺服器交換資料，而無需重新整理整個頁面。XMLHttpRequest 是最常用的技術，因此它被大多數主流瀏覽器（如 Google Chrome、Safari、Mozilla Firefox 或 Opera）使用。它還支援純文字、JSON 資料和許多其他資料格式。它非常易於使用，並提供各種方法和屬性來執行操作。我們可以使用 XMLHttpRequest() 建構函式建立一個 XMLHttpRequest 物件。

語法

variableName = new XMLHttpRequest()

使用 new 關鍵字以及 XMLHttpRequest() 建構函式，我們可以建立一個新的 XMLHttpRequest 物件。必須在呼叫 open() 函式初始化它之前建立此物件，然後才能呼叫 send() 函式將請求傳送到 Web 伺服器。

Fetch API 提供一個用於從伺服器獲取/檢索資源的介面。它是 XMLHttpRequest 的現代替代方案。由於它支援 Request 和 Response 的通用定義，因此我們可以在將來根據需要訪問它們，例如用於 Cache API、Service Worker、處理或修改請求和響應等。它非常簡單易用且一致。或者我們可以說，與 XMLHttpRequest 相比，它提供了一種建立 HTTP 請求和處理響應的現代且靈活的方法。它基於 Promise API，提供清晰的語法和更好的錯誤處理。

語法

fetch(res)

其中 fetch() 接受一個必填引數 res。res 引數定義要獲取的資源，它可以是字串、任何其他物件或請求物件。除了必填引數外，它還可以接受一個可選引數，例如 method、headers、body、mode、cache、same-origin 等。

Fetch API 與 XMLHttpRequest 的比較

以下是 Fetch API 和 XMLHttpRequest 之間的區別：

結論

這些是 Fetch API 和 XMLHttpRequest 之間的主要區別。Fetch API 比 XMLHttpRequest 更強大且更容易理解。它也受所有現代瀏覽器支援，而 XMLHttpRequest 僅受舊版瀏覽器支援。在下一篇文章中，我們將學習 fetch() 函式。

Fetch API - 瀏覽器相容性

Fetch API 提供了一個現代的 JavaScript 介面，用於非同步地向伺服器傳送請求並處理來自伺服器的響應。與 XMLHttpRequest 物件相比，它更強大、更靈活。

相容瀏覽器

幾乎所有現代 Web 瀏覽器都支援 Fetch API。以下列表顯示了支援 Fetch API 的瀏覽器名稱及其版本：

相容性檢查

由於新版本的出現，瀏覽器相容性可能會隨著時間的推移而發生變化。因此，最好檢查 Fetch API 的當前瀏覽器相容性。以下是用於檢查 Web 瀏覽器相容性的關鍵點：

• Web 瀏覽器版本 - 使用 Fetch API 時，請確保您完全瞭解使用 Fetch API 需要哪個版本的瀏覽器，因為不同版本的 Web 瀏覽器對 Fetch API 的支援程度不同。

• Fetch API 的支援 - 使用 Web 瀏覽器時，始終驗證您使用的 Web 瀏覽器是否支援 Fetch API。儘管幾乎所有現代 Web 瀏覽器都支援 Fetch API，但如果您使用的是舊版瀏覽器，則它將不支援 Fetch API。

• 功能檢測 - 這是一種用於檢查當前 Web 瀏覽器是否支援 Fetch API 的技術。它建立一段程式碼來檢查指定 Fetch API 方法或屬性的存在，或者如果當前 Web 瀏覽器不支援它們，則提供替代功能。

• 跨源請求 - 使用 Fetch API 時，始終檢查當前瀏覽器是否支援跨源請求。跨源資源共享 (CORS) 策略會直接影響對不同域的請求。因此，始終確保您使用的瀏覽器必須包含必要的 CORS 頭，並且能夠正確處理跨源請求。

• HTTPS 要求 - 一些 Web 瀏覽器對從 HTTP 來源建立到 HTTPS 來源的 Fetch API 請求施加了一些限制。因此，始終檢查此類限制，並對應用程式進行必要的更改，以使其滿足所有安全要求。

• 錯誤處理 - 您使用的瀏覽器必須正確處理錯誤和 HTTP 狀態程式碼。確保 Web 瀏覽器提供必要的錯誤資訊以進行正確的錯誤處理。

因此，我們可以使用這些要點來檢查 Web 瀏覽器對 Fetch API 的相容性。

結論

這就是我們如何檢查瀏覽器相容性的方法。Fetch API 通常受所有現代瀏覽器支援。它不支援舊版 Web 瀏覽器。因此，如果您使用的是舊版 Web 瀏覽器，則必須使用 XMLHttpRequest。在下一篇文章中，我們將學習 Fetch API 頭部。

Fetch API - 頭部資訊

Fetch API 提供了一個名為 Headers 介面的特殊介面，用於執行各種操作，例如設定、新增、檢索和刪除請求和響應頭部列表中的頭部。Headers 物件最初為空，或者可能包含零個或多個名稱-值對。您可以使用 append() 方法在 headers 物件中新增頭部名稱。此介面提供各種方法來對 Headers 物件執行操作。

建構函式

要建立 headers 物件，我們可以使用 Headers() 建構函式以及 new 關鍵字。此建構函式可能包含或不包含引數。

語法

const newHeader = New Headers()
Or
const newHeader = New Headers(init)

Headers() 建構函式只有一個可選引數 init。它是一個物件，包含要預填充 headers 物件的 HTTP 頭部。此引數的值是字串值或名稱-值對陣列。

示例1

在下面的程式中，我們將資料傳送到伺服器。為此，我們使用 Header() 建構函式建立一個新的 headers 物件，然後使用 append() 函式新增名稱-值對。之後，我們使用 fetch() 函式發出 fetch() 請求，其中包括 POST 方法、我們之前建立的 headers 物件（用於向請求新增頭部）以及請求的主體。現在，在將請求傳送到伺服器後，我們使用 then() 函式處理響應。如果遇到錯誤，則 catch() 函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Creating Headers object
   const myheaders = new Headers();
   
   // Adding headers to the Headers object
   myheaders.append('Content-Type', 'application/json');
   myheaders.append('Authorization', 'Bearer token123');
   
   // Sending data using POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // Adding headers
      headers:myheaders,
   
      // Adding body which we want to send
      body: JSON.stringify({
         id: 32,
         title: "Hello! How are you?",
      })
   })
   
   // Converting received information into JSON
   .then(response => response.json())
   .then(myData => {
      // Display the sent data
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("manager").innerHTML = JSON.stringify(myData);
   });
</script>
   <h2>Display Data</h2>
   <div>
      <!-- Displaying retrevie data-->
      <p id = "manager"></p>
   </div>
</body>
</html>

輸出

方法

以下是 Header 介面常用的方法：

示例2

在下面的程式中，我們使用了 Headers 介面提供的 append()、get()、keys() 和 values() 等方法。

<!DOCTYPE html>
<html>
<body>
<script>
   // Creating Headers object
   const myheaders = new Headers();
   
   // Adding headers to the Headers object
   myheaders.append('Content-Type', 'application/json');
   myheaders.append('Authorization', 'Bearer token123');
   
   // Sending data using POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // Adding headers
      headers:myheaders,
   
      // Adding body which we want to send
      body: JSON.stringify({
         id: 32,
         title: "Hello! How are you?",
      })
   })
   // Converting received information into JSON
   .then(response => {
      // Header also returned in response 
      // Accessing response header
      const resHeader = response.headers;
   
      // Getting content type value of the response header
      // Using get() function
      const contentTypeValue = resHeader.get("Content-Type");
      console.log("Content-Type:", contentTypeValue);
   
      // Getting all the keys present in the
      //  key-value pairs in response header
      // Using keys() function
      const headerKeys = resHeader.keys();
      for(const res of headerKeys){
      console.log("Keys:", res);
      }
      // Getting all the values present in the
      //  key-value pairs in response header
      // Using Values() function
      const headerValues = resHeader.values();
         for(const resVal of headerValues){
         console.log("Values:", resVal);
      }
   });
</script>
   <h2>Fetch API Examples</h2>
</body>
</html>

輸出

結論

這就是我們在 Fetch API 中使用 Header 介面的方法。它提供了各種方法來操作、訪問和迭代頭部。我們還可以使用 Request.headers 和 Response.headers 屬性從 Request 和 response 中檢索 Header 物件。在下一篇文章中，我們將學習 Request 介面。

Fetch API - 請求

在 Fetch API 中，Request 介面用於建立資源請求。它是建立請求的另一種方法，而不是 fetch() 函式。它還提供各種屬性和方法，我們可以將這些屬性和方法應用於請求。因此，我們首先將學習 Request() 建構函式，然後學習如何傳送請求以及 Request 介面提供的方法和屬性。

建構函式

要建立請求物件，我們可以使用 Request() 建構函式以及 new 關鍵字。此建構函式包含一個必填引數，即資源的 URL，另一個引數是可選的。

語法

const newRequest = new Request(resourceURL)
Or
const newRequest = new Request(resourceURL, optional)

Request() 建構函式具有以下引數：

• resourceURL - 我們要獲取的資源。其值可以是資源 URL 或 Request 物件。

• Options - 提供請求附加設定和自定義選項的物件，如下所示：

  • method - 表示請求方法，例如 GET、POST、PUT 和 DELETE。

  • headers - 為請求設定頭部。

  • body - 向請求新增資料。GET 或 HEAD 方法不使用此引數。

  • mode - 設定請求模式，例如 cors、same-origin、no-cors 或 navigate。預設情況下，mode 引數的值為 cors。

  • credentials - 設定要用於請求的憑據，例如 omit、same-origin 或 include。此引數的預設值為 same-origin。

  • cache - 設定要用於請求的快取模式。

  • redirect - 用於重定向模式，例如 follow、error 或 manual。預設情況下，引數設定為 follow 值。

  • referrer - 表示請求的推薦來源的字串，例如 client、URL 或 no-referrer。此引數的預設值與客戶端有關。

  • referrerPolicy - 用於設定推薦來源策略。

  • integrity - 用於設定給定請求的子資源完整性值。

  • keepalive - 用於檢查是否為多個請求/響應建立持久連線。

  • signal - 表示 AbortSignal 物件，用於與請求通訊或中止請求。

  • priority - 用於設定請求相對於其他請求的優先順序。此引數的可能值為

• high - 將當前 fetch 請求的優先順序設定為高於其他請求。

• low − 將當前獲取請求的優先順序設定為低於其他請求。

• auto − 自動查詢當前獲取請求的優先順序。

傳送請求

要傳送請求，我們必須首先使用 Request 建構函式和附加引數（如 header、body、method、資源 URL 等）建立一個 Request 物件。然後將此物件傳遞給 fetch() 函式，以將請求傳送到伺服器。現在 fetch() 函式返回一個 Promise，該 Promise 將解析為 response 物件。如果遇到錯誤，則執行 catch 塊。

示例

在下面的程式中，我們建立一個指令碼，使用 Request 物件傳送資料。為此，我們使用 Request() 建構函式以及以下引數建立一個請求物件：

• URL − 表示資源 URL。

• method − 在這裡我們使用 POST 方法，表示我們正在將資料傳送到伺服器。

• body − 包含我們要傳送的資料。

• header − 指明資料是 JSON 資料。

現在，我們將請求物件傳遞給 fetch() 函式以傳送請求，處理伺服器返回的響應，並在發生錯誤時進行處理。

<!DOCTYPE html>
<html>
<body>
<script>
   // Creating request object
   const myRequest = new Request("https://jsonplaceholder.typicode.com/todos", {
      // Setting POST request
      method: "POST",
   
      // Add body which contains data
      body: JSON.stringify({
      id: 321,
      title: "Kirti is a good girl",
      }),
   
      // Setting header
      headers:{"Content-type": "application/json; charset=UTF-8"}
   });
   fetch(myRequest)
   
   // Handling response
   .then(response => response.json())
   .then(myData => {
      console.log("Data Sent Successfully");
      // Display output
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   })
   
   // Handling error
   .catch(err=>{
      console.error("We get an error:", err);
   });
</script>
   <h2>Fetch API Example</h2>
   <div>
      <!-- Displaying retrieved data-->
      <p id="sendData"></p>
   </div>
</body>
</html>

輸出

例項屬性

請求介面提供的屬性是隻讀屬性。因此，常用屬性包括：

示例

在下面的程式中，我們使用了 Request 介面提供的屬性（例如 url、method、headers 和 mode）。

<!DOCTYPE html>
<html>
<head>
   <title>Fetch API Example</title>
</head>
<body>
   <h1>Example of Fetch API</h1>
<script>
   // Creating request object
   const myRequest = new Request("https://jsonplaceholder.typicode.com/todos", {
      // Setting POST request
      method: "POST",
   
      // Add body which contains data
      body: JSON.stringify({
         id: 321,
         title: "Kirti is a good girl",
      }),
      // Setting header
      headers:{"Content-type": "application/json; charset=UTF-8"},
      mode: "cors"
   });
   // Display url of the request
   console.log(myRequest.url);
   
   // Display request method
   console.log(myRequest.method);
   
   // Display header of the request
   console.log(myRequest.headers.get('content-Type'));
   
   // Display mode of the request
   console.log(myRequest.mode);
</script>
</body>
</html>

輸出

方法

Request 介面常用的方法如下：

示例

在下面的程式中，我們使用了 Request 介面提供的方法（例如 blob、clone 等）。

<!DOCTYPE html>
<html>
<head>
   <title>Fetch API Example</title>
</head>
<body>
   <h1>Example of Fetch API</h1>
<script>
   // Creating request object
   const myRequest = new Request("https://jsonplaceholder.typicode.com/todos");

   // Using blob() method
   myRequest.blob()
   .then(data =>{
      console.log(data)
   });

   // Creating a copy of the request using the clone() method
   const duplicate = myRequest.clone();
   console.log(duplicate);
</script>
</body>
</html>

輸出

結論

這就是 Request 介面在 Fetch API 中的工作方式。它提供了各種方法來構建和定製請求。或者可以說，它提供了靈活性和對請求的更多控制。在下一篇文章中，我們將瞭解 Response 介面如何在 Fetch API 中使用。

Fetch API - 響應

Fetch API 提供了一個特殊的介面來建立對請求的響應，該介面的名稱為 Response。此介面提供了一個 Response() 建構函式來建立響應物件。它提供了各種方法和屬性來訪問和處理響應資料。

建構函式

要建立響應物件，我們可以使用 Response() 建構函式以及 new 關鍵字。此建構函式可以包含或不包含引數。

語法

const newResponse = New Response()
Or
const newResponse = New Response(rBody)
Or
const newResponse = New Response(rBody, rOption)

Response() 建構函式具有以下引數：

• rBody − 它表示一個物件，該物件定義響應的主體。其值可以為 null（預設值）或 blob、ArrayBuffer、TypedArray、DataView、FormData、String、URLSearchParams、字串文字或 ReadableStream。

• Options − 它是一個物件，用於提供我們想要應用於響應的自定義設定，選項包括：

• headers − 用於向響應新增 header。預設情況下，此引數的值為空。其值可以是 Header 物件或字串的物件文字。

• status − 此引數表示響應的狀態程式碼。其預設值為 200。

• statusText − 此引數表示與狀態程式碼相關的狀態訊息，例如“未找到”。其預設值為 ""。

示例

在下面的程式中，我們使用 fetch() 函式從給定的 URL 獲取資料，然後以 JSON 格式顯示響應資料。

<!DOCTYPE html>
<html>
<body>
<script>
   // Data
   const option = {message: "Hello Tom. How are you?"};
   
   // creating header object
   const newResponse = new Response(JSON.stringify(option), {
      status: 200,
      statusText:" Receive data successfully"
   });
   // Displaying response
   console.log(newResponse)
</script>
   <h2>Fetch API Example</h2>
   <div>
      <!-- Displaying retrieved data-->
      <p id="sendData"></p>
   </div>
</body>
</html>

輸出

例項屬性

Response 介面提供的屬性是隻讀屬性。因此，常用屬性包括：

示例

在下面的程式中，我們使用了 Response 介面提供的屬性。

<!DOCTYPE html>
<html>
<body>
   <h2>Fetch API Example</h2>
<script>
   // GET request using fetch()function
   fetch("https://jsonplaceholder.typicode.com/todos")
   .then(response => {
   // Finding response URL
   console.log("URL is: ", response.url);

   // Getting response text
   console.log("Status Text: ", response.statusText);

   // Getting response status
   console.log("Status Code: ", response.status);
   }).catch(err =>{
      // Handling error
      console.log("Found Error:", err);
   });
</script>
</body>
</html>

輸出

方法

Response 介面常用的方法如下：

示例

在下面的程式中，我們使用了 Response 介面提供的方法。在這裡，我們將使用 json() 函式以 JSON 格式解析響應。

<!DOCTYPE html>
<html>
<body>
<script>
   // GET request using fetch()function
   fetch("https://jsonplaceholder.typicode.com/todos/2", {
   // Method Type
   method: "GET"}) 

   // Parsing the response data into JSON
   // Using json() function
   .then(response => response.json())
   .then(myData => {
      // Display output
      document.getElementById("manager").innerHTML = JSON.stringify(myData);
   }).catch(newError =>{
      // Handling error
      console.log("Found Error:", newError)
   });
</script>
   <h2>Display Data</h2>
   <div>
      <!-- Displaying retrevie data-->
      <table id = "manager"></table>
   </div>
</body>
</html>

輸出

結論

這就是 Response 介面與 fetch API 的工作方式。使用 Response 介面，我們可以提取和處理伺服器提供的響應。它還提供了各種方法和屬性來提取和處理響應。在下一篇文章中，我們將學習 fetch API 中的主體資料。

Fetch API - 主體資料

Fetch API 是一種現代技術，用於非同步傳送或接收資料，無需重新整理網頁。它提供了一個介面，用於在 Web 瀏覽器中建立 HTTP 請求。它幾乎受到所有現代 Web 瀏覽器的支援。我們還可以說，透過使用 Fetch API，我們可以從 Web 伺服器獲取資源（如 JSON 資料、HTML 頁面等），並可以使用不同的 HTTP 請求（如 PUT、POST 等）將資料傳送到伺服器。因此，在本文中，我們將學習什麼是主體資料，以及我們將如何使用主體資料。

主體資料

在 Fetch API 中，請求和響應都包含主體資料。請求中的主體資料是一個例項，包含我們要傳送到伺服器的資料，而響應中的主體資料是一個例項，包含使用者請求的資料。它通常由 PUT 或 POST 請求用於將資料傳送到伺服器。它可以是 ArrayBuffer、TypedArray、DataView、Blob、File、String、URLSearchParams 或 FormData 的例項。傳送主體資料時，還需要在請求中設定 header，以便伺服器知道資料的型別。

Request 和 Response 介面提供了各種方法來提取主體，它們是：

• Request. arrayBuffer() − 此方法用於解析一個 Promise，該 Promise 包含請求主體的 ArrayBuffer 表示形式。

• Request.blob() − 此方法用於解析一個 Promise，該 Promise 包含請求主體的 Blob 表示形式。

• Request.formData() − 此方法用於解析一個 Promise，該 Promise 包含請求主體的 FormData 表示形式。

• Request.json() − 此方法用於將請求主體解析為 JSON，並解析一個包含解析結果的 Promise。

• Request.text() − 此方法用於解析一個 Promise，該 Promise 包含請求主體的文字表示形式。

• Response.arrayBuffer() − 此方法用於返回一個 Promise，該 Promise 將解析為響應主體的 ArrayBuffer 表示形式。

• Response.blob() − 此方法用於返回一個 Promise，該 Promise 將解析為響應主體的 Blob 表示形式。

• Response.formData() − 此方法用於返回一個 Promise，該 Promise 將解析為響應主體的 FormData 表示形式。

• Response.json() − 此方法用於將響應主體解析為 JSON，並返回一個 Promise，該 Promise 將解析為解析的結果。

• Response.text() − 此方法用於返回一個 Promise，該 Promise 將解析為響應主體的文字表示形式。

所有這些方法都返回一個 Promise，該 Promise 將解析為主體的實際內容。

主體資料通常與 fetch() 函式一起使用。這裡它是可選的，只有當你想向伺服器傳送資料時才使用 body 引數。

語法

fetch(resourceURL,{
   Method: 'POST',
   body:{
      Name: "Monika",
      Age: 34,
      City: "Pune"
   },
   headers: {'content-Type':'application/json'}
})

fetch() 函式的引數：

• resourceURL − 它表示我們要獲取的資源。它可以是字串、請求物件或資源的 URL。

• method − 它表示請求方法，例如 GET、POST、PUT 和 DELETE。

• headers − 用於向請求新增 header。

• body − 用於向請求新增資料。GET 或 HEAD 方法不使用它。

在下面的程式中，我們使用 POST 方法傳送正文資料。因此，我們建立了一個 HTML 程式碼，其中我們使用 JavaScript 指令碼將資料傳送到伺服器。在指令碼中，我們定義了一個 fetch() 函式，該函式使用 POST 請求方法將正文引數中存在的資料傳送到給定的 URL。此處標題設定為“application/json”，這表明我們正在傳送資料。在向伺服器傳送請求之前，我們使用 JSON.stringify() 函式將資料轉換為 JSON 字串。收到伺服器的響應後，我們檢查響應是否正常。如果是，則我們使用 response.json() 函式將響應正文解析為 JSON，然後在輸出螢幕上顯示結果。如果我們遇到任何錯誤，則 catch() 塊將處理該錯誤。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   // Retrieving data from the URL using the POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // Adding body which we want to send
      body: JSON.stringify({
         id: 45,
         title: "Tom like finger chips",
         age: 34
      }),
      // Adding header
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   // Converting received information into JSON
   .then(response =>{
      if (response.ok){
         return response.json()
      }
   })
   .then(myData => {
      // Display the retrieve Data
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   }).catch(err=>{
      console.log("Found error:", err)
   });
</script>
   <h2>Sent Data</h2>
   <div>
      <!-- Displaying retrevie data-->
      <p id = "sendData"></p>
   </div>
</body>
</html>

輸出

結論

因此，這就是我們在 Fetch API 中使用正文資料的方法。使用資料正文，我們可以將資料從 Web 瀏覽器傳送到 Web 伺服器，反之亦然。在請求正文中，正文資料僅與 PUT 和 POST 請求方法一起使用，因為使用此請求我們可以將資料傳送到伺服器。它不用於 GET 請求，因為 GET 請求用於從伺服器獲取資料。在下一篇文章中，我們將學習 Fetch API 中的憑據。

Fetch API - 憑據

在 Fetch API 中，cookie、授權標頭和 TLS 客戶端證書被稱為憑據。我們也可以說憑據是確認使用者或客戶端在向伺服器發出請求時的身份的數字文件（如密碼、使用者名稱、證書等）。

讓我們更詳細地瞭解一下這些憑據：

Cookie − 它們是由 Web 瀏覽器儲存並與所有相同來源的請求一起傳送的小資料塊。它用於儲存會話資訊、常用資料等。它們還控制其會話、範圍和可訪問性。Cookie 也由伺服器在 Set-Cookie 標頭的幫助下發送。

授權標頭 − 這些包括包含身份驗證資訊（如密碼、使用者名稱、金鑰等）的 HTTP 標頭。授權標頭用於實現各種身份驗證方案，並且還透過各種方法（如雜湊、加密等）由伺服器驗證。

TLS 客戶端證書 − 它們是由認證機構提供的，並安裝在客戶端裝置上的數字證書。它們用於在使用傳輸層安全協議與伺服器建立安全連線時提供客戶端的身份證明。

Credentials 屬性

credentials 屬性控制是否在跨域請求中傳送 cookie 和其他憑據證書。它是 fetch() 函式中的可選屬性。

語法

fetch(resourceURL, {credentials:"include"})

此屬性可以具有以下三個值中的一個值：

omit − 當 credentials 屬性的值設定為 omit 時，這意味著瀏覽器將從請求中刪除所有憑據，並忽略響應中傳送的憑據。

same-origin − 當 credentials 屬性的值設定為 same-origin 時，這意味著瀏覽器將在對與請求頁面具有相同來源的請求中包含憑據。並且只使用來自相同來源 URL 的憑據。這是此屬性的預設值。

include − 當 credentials 屬性的值設定為 include 時，這意味著瀏覽器將在相同來源和跨域請求中包含憑據，並始終使用響應中傳送的憑據。

示例1

在下面的程式中，我們使用 fetch() 函式向給定的 URL 發出請求。在這裡，我們將 credentials 屬性設定為“include”值，這意味著跨域和同源憑據都包含在請求中。向伺服器傳送請求後，我們現在使用 then() 函式來處理響應。如果我們遇到錯誤，則 catch() 函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Retrieving data from the URL using a GET request 
   fetch("https://jsonplaceholder.typicode.com/todos/21", {
      // Sending both same-origin and 
      // cross-origin credentials
      credentials: "include"
   })
   // Converting received data into text
   .then(response => response.text())
   .then(myData => {
      // Display the retrieve Data
      console.log(myData);
   })    
   .catch(err=>{
      // Cach error if occur
      console.log("Found Error:", err)
   });
</script>
<h2>Fetch API Example</h2>
</body>
</html>

輸出

示例2

在下面的程式中，我們使用 fetch() 函式向給定的 URL 發出請求。在這裡，我們將 credentials 屬性設定為“same-origin”值，這意味著憑據僅包含在對相同來源或域發出的請求中。向伺服器傳送請求後，我們現在使用 then() 函式來處理響應。如果我們遇到錯誤，則 catch() 函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Retrieving data from the URL using a GET request 
   fetch("https://jsonplaceholder.typicode.com/todos/21", {
      // Sending credentials only for the same domain request
      credentials: "same-origin"
   })

   // Converting received data into text
   .then(response => response.text())
   .then(myData => {
      // Display the retrieve Data
      console.log(myData);
   })    
   .catch(err=>{
      // Cach error if occur
      console.log("Found Error:", err)
   });
</script>
<h2>Fetch API Example</h2>
</body>
</html>

輸出

結論

因此，使用憑據，我們可以控制如何在請求中傳送憑據，或者如何處理響應中返回的憑據。credentials 屬性僅影響跨域請求，對於同源請求，瀏覽器將自動向請求新增憑據。在下一篇文章中，我們將學習如何在 Fetch API 中傳送 GET 請求。

Fetch API - 傳送 GET 請求

Fetch API 提供了一個介面，用於非同步管理與 Web 伺服器之間的資料請求和響應。它提供了一個 fetch() 方法，用於非同步獲取資源或向伺服器傳送請求，而無需重新整理網頁。使用 fetch() 方法，我們可以執行各種請求，如 POST、GET、PUT 和 DELETE。在本文中，我們將學習如何使用 Fetch API 傳送 GET 請求。

傳送 GET 請求

GET 請求是一個 HTTP 請求，用於從給定的資源或 Web 伺服器檢索資料。在 Fetch API 中，我們可以透過在 fetch() 函式中指定方法型別或不指定任何方法型別來使用 GET 請求。

語法

fetch(URL, {method: "GET"})
.then(info =>{
   // Code
})
.catch(error =>{
   // catch error
});

在這裡，在 fetch() 函式中，我們在方法型別中指定了 GET 請求。

或者

fetch(URL)
.then(info =>{
   // Code
})
.catch(error =>{
   // catch error
});

在這裡，在 fetch() 函式中，我們沒有指定任何方法型別，因為預設情況下 fetch() 函式使用 GET 請求。

示例

在下面的程式中，我們將從給定的 URL 中檢索 id 和標題，並將它們顯示在表中。為此，我們定義了一個 fetch() 函式，其中包含我們從中檢索資料的 URL 和 GET 請求。此函式將從給定的 URL 檢索資料，然後使用 response.json() 函式將資料轉換為 JSON 格式。之後，我們將顯示檢索到的資料，即表中的 id 和標題。

<!DOCTYPE html>
<html>
<body>
<script>
   // GET request using fetch()function
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Method Type
      method: "GET"})
   
   // Converting received data to JSON
   .then(response => response.json())
   .then(myData => {
      // Create a variable to store data
      let item = `<tr><th>Id</th><th>Title</th></tr>`;
   
      // Iterate through each entry and add them to the table 
      myData.forEach(users => {
         item += `<tr>
         <td>${users.id} </td>
         <td>${users.title}</td>        
         </tr>`;
      });
      // Display output
      document.getElementById("manager").innerHTML = item;
   });
</script>
<h2>Display Data</h2>
<div>
   <!-- Displaying retrevie data-->
   <table id = "manager"></table>
</div>
</body>
</html>

輸出

結論

這就是我們如何使用 Fetch API 傳送 GET 請求，以便我們可以從給定的 URL 請求特定的資源或文件。使用 fetch() 函式，我們還可以根據我們的需求自定義 GET 請求。在下一篇文章中，我們將學習如何傳送 POST 請求。

Fetch API - 傳送 POST 請求

與 XMLHttpRequest 一樣，Fetch API 也提供了一個 JavaScript 介面，用於非同步管理與 Web 伺服器之間的資料請求和響應。它提供了一個 fetch() 方法，用於非同步獲取資源或向伺服器傳送請求，而無需重新載入網頁。藉助 fetch() 方法，我們可以執行各種請求，如 POST、GET、PUT 和 DELETE。因此，在本文中，我們將學習如何使用 Fetch API 傳送 POST 請求。

傳送 POST 請求

Fetch API 也支援 POST 請求。POST 請求是一個 HTTP 請求，用於將資料或表單傳送到給定的資源或 Web 伺服器。在 Fetch API 中，我們可以透過指定附加引數（如方法、正文標頭等）來使用 POST 請求。

語法

fetch(URL, {
   method: "POST",
   body: {//JSON Data},
   headers:{"content-type": "application/json; charset=UTF-8"}
})
.then(info =>{
   // Code
})
.catch(error =>{
   // catch error
});

這裡的 fetch() 函式包含以下引數：

• URL − 它代表我們想要獲取的資源。

• method − 這是一個可選引數。它用於表示請求，例如 GET、POST、DELETE 和 PUT。

• body − 這也是一個可選引數。當您想要向請求新增正文時，可以使用此引數。

• header − 這也是一個可選引數。它用於指定標頭。

示例

在下面的程式中，我們將向給定的 URL 傳送一個 JSON 文件。為此，我們定義了一個 fetch() 函式，以及一個 URL、一個 POST 請求、一個正文（即 JSON 文件）和一個標頭。因此，當 fetch() 函式執行時，它將給定的正文傳送到指定的 URL，並使用 response.json() 函式將響應資料轉換為 JSON 格式。之後，我們將顯示響應。

<!DOCTYPE html>
<html>
<body>
<script>
   // Retrieving data from the URL using POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // Adding body which we want to send
      body: JSON.stringify({
      id: 32,
      title: "Hello! How are you?",
      }),
      // Adding headers
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   // Converting received information into JSON
   .then(response => response.json())
   .then(myData => {
      // Display the retrieve Data
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("manager").innerHTML = myData;
   });
</script>
<h2>Display Data</h2>
<div>
   <!-- Displaying retrevie data-->
   <table id = "manager"></table>
</div>
</body>
</html>

輸出

結論

這就是我們如何使用 Fetch API 傳送 POST 請求的方法。使用此請求，我們可以輕鬆地將資料傳送到指定的 URL 或伺服器。此外，使用 fetch() 函式，您可以根據需要修改請求。在下一篇文章中，我們將學習如何傳送 PUT 請求。

Fetch API - 傳送 PUT 請求

在 Fetch API 中，PUT 請求用於更新或替換伺服器上存在的現有資源或資料。使用 PUT 請求通常包含您想要在請求正文中更新的資料。當伺服器收到請求時，伺服器使用該資料來更新給定 URL 中存在的現有資源。如果伺服器不包含該資源，則它將使用給定資料建立一個新資源。

語法

fetch(URL, {
   method: "PUT",
   body: {//JSON Data},
   headers:{"content-type": "application/json; charset=UTF-8"}})
.then(info =>{
   // Code
})
.catch(error =>{
   // catch error
});

這裡的 fetch() 函式包含以下引數：

• URL − 它代表我們想要獲取的資源。

• method − 這是一個可選引數。它用於表示請求，例如 GET、POST、DELETE 和 PUT。

• body − 這也是一個可選引數。當您想要向請求新增正文時，可以使用此引數。

• headers − 這也是一個可選引數。它用於指定標頭。

示例 1：使用 fetch() 傳送 PUT 請求

在下面的程式中，我們建立了一個簡單的指令碼，使用 fetch() 函式使用 PUT 請求更新給定 URL 中的現有資料。在這裡，我們向給定的 URL 傳送一個 JSON 文件以及標頭。因此，收到響應後，檢查響應的狀態。如果響應狀態為 200，則表示資料已成功更新。如果發生錯誤，則 catch 函式將處理該錯誤。

<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
</head>
<body>
<h1>Example of Fetch API</h1>
<script>
   // Update data in the URL using the PUT request
   fetch("https://jsonplaceholder.typicode.com/todos/21", {
      // Using PUT request
      method: "PUT",

      // Body contains replacement data 
      body: JSON.stringify({
         id: 22,
         title: "Hello! Mohina what are you doing?",
      }),
      // Setting headers
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   .then(response => {
      // Handle response
      if (response.status == 200){
         console.log("Data updated successfully")
      } else {
         throw new error("Error Found:", response.status)
      }
   })
   // Handle error
   .catch(err=>{
      console.error(err)
   });
</script>
</body>
</html>

輸出

示例 2：使用帶 async/await 的 fetch() 傳送 PUT 請求

在下面的程式中，我們建立了一個指令碼，使用 fetch() 函式和 async/await 使用 PUT 請求更新給定 URL 中的現有資料。在這裡，我們向給定的 URL 傳送一個 JSON 文件以及標頭。因此，我們建立了一個名為 modifyData() 的非同步函式。在這裡，我們使用 await 關鍵字與 fetch() 函式一起使用，以暫停函式的執行，直到返回的 promise 已完成。收到響應後，檢查響應的狀態，如果響應狀態為 200，則表示資料已成功更新。如果發生錯誤，則 catch 函式將處理該錯誤。

注意 − 這裡 async/await 一起用於以同步方式處理非同步操作。

<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
</head>
<body>
<h1>Example of Fetch API</h1>
<script>
   async function modifyData(){
      try{
         const myRes = await fetch("https://jsonplaceholder.typicode.com/todos/21", {
            // Using PUT request
            method: "PUT",

            // Body contains replacement data 
            body: JSON.stringify({
               id: 24,
               title: "Mina leaves in Delhi",
            })
         });
         // Handling response
         if (myRes.status == 200){
            console.log("Data updated successfully")
         } else {
            throw new error("Error Found:", myRess.status)
         }
      } catch(err){
         console.error(err)
      }
   }
   // Calling the function
   modifyData();
</script>
</body>
</html>

輸出

結論

這就是我們如何使用 PUT 請求來更新給定資源中的現有資料的方法。使用它，您還可以藉助 fetch() 函式提供的引數向請求新增額外屬性。在下一章中，我們將瞭解如何傳送 JSON 資料。

Fetch API - 傳送 JSON 資料

Fetch API 用於非同步傳送或接收資料，而無需重新整理網頁。在 Fetch API 中，我們可以傳送各種格式的資料，如 JSON、URL 編碼表單、文字、FormData、Blob 或 ArrayBuffer。在所有這些格式中，JSON（JavaScript 物件表示法）資料是最常用的使用 Fetch 傳送資料的格式，因為它簡單、輕量級並且與大多數程式語言相容。JSON 資料通常以以下格式建立：

Const JSONData = {
   name: "Monika",
   Id: 293,
   Age: 32,
   City: "Pune"
};

其中 name、id、Age 和 City 是屬性，Monika、293、32 和 Pune 是它們的值。

Fetch API 通常將 JSON 資料作為有效負載傳送到請求正文中，或者可以在響應正文中接收。並且資料被序列化為字串，因為這樣更容易在一個系統之間傳輸資料。

在處理 JSON 資料時，Fetch API 對 JSON 資料執行兩個主要操作：

序列化 − 在請求中傳送 JSON 資料時，我們需要使用 "JSON.stringify()" 函式將值轉換為 JSON 字串格式。此函式接收物件或值作為輸入引數，並返回表示 JSON 格式的字串。由於對資料進行了序列化，因此我們可以輕鬆地透過網路傳輸資料。

語法

JSON.stringify()

解析 − 解析是一個將響應中接收到的 JSON 字串轉換回 JavaScript 物件或值的過程。可以使用 response.json() 函式解析 JSON 資料。此函式接收響應物件作為引數，並返回一個 Promise，該 Promise 解析為解析後的 JSON 資料或 JavaScript 物件。

語法

response.json()

傳送JSON資料

Fetch API 使用以下方法傳送 JSON 資料：

• 使用 fetch() 函式

• 使用帶 async/await 的 fetch() 函式

• 使用請求物件

方法 1 − 使用 fetch() 函式

我們可以使用 fetch() 函式傳送資料。在此函式中，我們在 body 引數中建立 JSON 資料，並使用 POST 請求方法將資料傳送到指定的 URL。

示例

在下面的程式中，我們將使用 fetch() 函式傳送 JSON 資料。fetch() 函式用於建立請求。請求包含 POST 方法（表示我們想要傳送資料），一個包含 JSON 資料的 body（使用 stringify() 轉換為字串），以及指定我們正在傳送 JSON 資料的 header。傳送請求後，伺服器返回一個 Promise，該 Promise 將解析為 Response 物件，並使用 .json() 解析 JSON 資料並將結果顯示在控制檯日誌中。如果遇到錯誤，則 catch 塊將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Sending JSON data using a POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Setting POST request
      method: "POST",
   
      // Add a body which contains JSON data
      body: JSON.stringify({
         id: 290,
         title: "Today is the rainy day",
      }),
      // Setting headers
      headers:{"Content-type": "application/json; charset=UTF-8"}
   })
   // Converting response to JSON
   .then(response => response.json())
   .then(myData => {
      console.log("Data Sent Successfully");
      // Display output in HTML page
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   })
   .catch(err=>{
      console.error("We get an error:", err);
   });
</script>
<h2>Sent Data</h2>
<div>
   <!-- Displaying data-->
   <p id = "sendData"></p>
</div>
</body>
</html>

輸出

方法 2 − 使用帶 async/await 的 fetch() 函式

我們還可以使用帶 async/await 的 fetch() 函式傳送 JSON 資料。Async/await 允許您建立一個非同步程式，其行為更像同步程式，這使得它更容易學習和理解。

示例

在下面的程式中，我們將使用帶 async/await 的 fetch() 函式傳送 JSON 資料。為此，我們建立一個非同步函式。在函式中，我們使用 try 塊，該塊使用 fetch() 函式以及資源 URL、POST 請求方法、header 和 body（字串格式的 JSON 資料）引數將 JSON 資料傳送到給定的 URL。它還使用 await 關鍵字與 fetch() 函式一起使用，用於等待來自伺服器的響應。如果響應成功，則我們使用 .json() 函式解析伺服器返回的響應。如果響應的狀態程式碼包含不成功的程式碼，則執行 else 塊。如果在 fetch 操作期間遇到錯誤，則 catch 塊將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   async function sendingJSONData(){
      try{
         const retrunResponse = await fetch("https://jsonplaceholder.typicode.com/todos", {
            // Setting POST request to send data
            method: "POST",
   
            // Add body which contains JSON data
            body: JSON.stringify({
               id: 290,
               title: "Today is the rainy day",
            }),
            // Setting headers
            headers:{"Content-type": "application/json; charset=UTF-8"}
         });
         if (retrunResponse.ok){
            // Handling response
            const returnData = await retrunResponse.json();
            console.log("Data send Successfully");
   
            // Display output in HTML page
            document.getElementById("sendData").innerHTML = JSON.stringify(returnData);
         } else {
            console.log("We found error", retrunResponse.status);
         }
      } catch(err) {
         // Handling error if occur
         console.error("Error is:", err)
      }
   }
   sendingJSONData();
</script>
<h2>Sent Data</h2>
<div>
   <!-- Displaying data-->
   <p id = "sendData"></p>
</div>
</body>
</html>

輸出

方法 3 − 使用請求物件

我們還可以使用請求物件傳送 JSON 資料。它是 fetch() 函式的替代方法，用於向伺服器傳送請求。請求物件也使用 POST 方法將 JSON 資料傳送到指定的 URL。請求物件是使用 Request 介面的 Request() 建構函式建立的。請求物件在傳送 fetch() 函式之前，提供了建立或配置請求的更大靈活性。它還允許我們新增其他選項，例如 header、快取、請求方法等。

示例

在下面的程式中，我們將使用請求物件傳送 JSON 資料。因此，使用 Request() 建構函式，我們建立了一個請求物件，以及資源 URL、POST 請求方法、body（使用 stringify() 將 JSON 資料轉換為字串格式）和 header 等引數。現在，我們將 newRequest 物件傳遞給 fetch 函式以傳送請求，並使用 .then() 函式處理響應，並使用 .json() 解析響應。如果在 fetch 操作期間遇到錯誤，則 catch 塊將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Creating request object
   const newRequest = new Request("https://jsonplaceholder.typicode.com/todos", {
      // Setting POST request
      method: "POST",
   
      // Add body which contains JSON data
      body: JSON.stringify({
         id: 290,
         title: "Today is the rainy day. I like rain",
      }),
      // Setting headers
      headers:{"Content-type": "application/json; charset=UTF-8"}
   });
   fetch(newRequest)
   // Handling response
   .then(response => response.json())
   .then(myData => {
      console.log("Data Sent Successfully");
   
      // Display output in HTML page
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   })
   // Handling error
   .catch(err=>{
      console.error("We get an error:", err);
   });
</script>
<h2>Sent Data</h2>
<div>
   <!-- Displaying data-->
   <p id = "sendData"></p>
</div>
</body>
</html>

輸出

結論

這就是我們在 Fetch API 中傳送 JSON 資料的方法。它是在 Web API 中傳送或接收資料的非常流行的資料結構。與其他資料格式相比，它更輕量級且更靈活。在下一篇文章中，我們將學習如何傳送資料物件。

Fetch API - 傳送資料物件

在 Fetch API 中，我們可以將資料物件從 Web 瀏覽器傳送到 Web 伺服器。資料物件是一個包含鍵值對或屬性值對資料的物件。或者我們可以說，資料物件是在使用 Fetch API 建立 HTTP 請求時新增到請求正文中的資料。

Fetch API 支援各種資料格式；您可以根據您設定的內容型別 header 或伺服器的要求選擇它們。一些常用資料格式包括：

JSON

JSON 稱為 JavaScript 物件表示法。它是 Web 瀏覽器和伺服器之間交換資料的最常用資料格式。在 JSON 格式中，資料以鍵值對的形式儲存，並完全支援巢狀物件或陣列。要以 JSON 格式傳送資料，我們需要藉助 "JSON.stringify()" 函式將 JavaScript 物件轉換為 JSON 字串。

以下是資料的 JSON 格式：

const newData = {
    empName: "Pooja",
    empID: 2344,
    departmentName: "HR"
};

其中 "empName"、"empID" 和 "department" 是鍵，"Pooja"、"2344" 和 "HR" 是它們的值。

JSON 格式使用以下 header：

headers:{"Content-type": "application/json; charset=UTF-8"}

它告訴伺服器接收到的資料是 JSON 格式。

示例

在下面的程式中，我們建立了一個指令碼來發送 JSON 格式的資料。為此，我們建立了一個帶有鍵值對的資料物件。現在，我們使用 fetch() 函式向伺服器傳送請求。在這個 fetch 函式中，我們包含請求方法 "POST"，將 header 設定為 "application/json"（告訴伺服器傳送的資料是 JSON），並將資料物件包含在請求的正文中，方法是使用 "JSON.stringify()" 函式將其轉換為 JSON 字串。向伺服器傳送請求後，我們現在使用 then() 函式處理響應。如果遇到錯誤，則 catch() 函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Data object
   const newData = {
      id: 45,
      title: "Tom like finger chips",
      age: 34
   };
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request to send data
      method: "POST",
   
      // Adding header
      headers:{"Content-type": "application/json; charset=UTF-8"},
   
      // Adding body which we want to send
      // Here we convert data object into JSON string
      body: JSON.stringify(newData)
   })
   // Converting received information into JSON
   .then(response =>{
      if (response.ok){
         return response.json()
      }
   })
   .then(myData => {
      // Display result
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   }).catch(err=>{
      console.log("Found error:", err)
   });
</script>
   <h2>Sent Data</h2>
   <div>
      <!-- Displaying data-->
      <p id = "sendData"></p>
   </div>
</body>
</html>

輸出

FormData

FormData 是一個內建的 JavaScript 物件。它用於以 HTML 表單格式傳送資料。在 FormData 中，我們可以以鍵值對的形式儲存資料，其中鍵表示表單的欄位，值表示該欄位的值。它可以處理二進位制資料、檔案和其他表單型別。要建立一個新的表單物件，我們需要使用 FormData() 建構函式以及 new 關鍵字。

語法

const newform = new FormData()

append() 函式用於在 FormData 物件中新增新的鍵值對。

語法

newform.append("name", "Mohina");

其中 "name" 是表單的鍵或欄位，"Mohina" 是欄位的值。在 Fetch API 中使用 FormData 物件時，我們不需要設定 header，因為 Fetch API 將自動為 FormData 物件設定 header。

示例

在下面的程式中，我們建立了一個指令碼來發送 FormData 中的資料。為此，我們使用 FormData() 建構函式建立一個 FormData 物件，然後使用 append() 函式在 FormData 物件中新增鍵值對。現在，我們使用 fetch() 函式向伺服器傳送請求。在這個 fetch 函式中，我們包含請求方法 "POST"，並將 FormData 物件包含在 body 引數中。向伺服器傳送請求後，我們現在使用 then() 函式處理響應。如果遇到錯誤，則 catch() 函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // FormData object
   const newform = new FormData();
   
   // Adding key-value pairs in FormData object
   newform.append("id", 4532);
   newform.append("title", "Today is raining");
   
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request to send data
      method: "POST",
   
      // Adding body which we want to send
      // Here we add FormData object
      body: newform
   })
   // Converting received information into JSON
   .then(response =>{
      if (response.ok){
         return response.json()
      }
   })
   .then(myData => {
      // Display result
      console.log("Data Sent Successfully");
   
      // Display output in HTML page
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   }).catch(err=>{
      console.log("Found error:", err)
   });
</script>
   <h2>Sent Data</h2>
   <div>
      <!-- Displaying data-->
      <p id = "sendData"></p>
   </div>
</body>
</html>

輸出

純文字

在 Fetch API 中，我們還可以傳送簡單的純文字資料。如果我們想傳送原始文字或非標準資料格式，那麼我們使用純文字傳送資料。要傳送純文字，我們只需要將文字以字串的形式新增到請求的正文中。

以下是純文字物件：

const newData = "My car is running very fast"

純文字使用以下 header：

headers:{"Content-type": "text/plain"}

它指示伺服器接收到的資料是純文字。

示例

在下面的程式中，我們建立了一個指令碼來發送純文字資料。為此，我們建立了一個數據物件，並用簡單的文字為其賦值一個字串值。現在，我們使用 fetch() 函式向伺服器傳送請求。在這個 fetch 函式中，我們包含請求方法 "POST"，將 header 設定為 "text/plain"（告訴伺服器傳送的資料是純文字），並將資料物件包含在請求的正文中。向伺服器傳送請求後，我們現在使用 then() 函式處理響應。如果遇到錯誤，則 catch() 函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // FormData object
   const newform = new FormData();
   
   // Adding key-value pairs in FormData object
   newform.append("id", 4532);
   newform.append("title", "Today is raining");
   
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request to send data
      method: "POST",
   
      // Adding body which we want to send
      // Here we add the FormData object
      body: newform
   })
   // Converting received information into JSON
   .then(response =>{
      if (response.ok){
         return response.json()
      }
   })
   .then(myData => {
      // Display result
      console.log("Data Sent Successfully");
   
      // Display output in HTML page
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   }).catch(err=>{
      console.log("Found error:", err)
   });
</script>
   <h2>Sent Data</h2>
   <div>
      <!-- Displaying data-->
      <p id = "sendData"></p>
   </div>
</body>
</html>

輸出

URL 編碼資料

URL 編碼資料是用於在 URL 引數或 POST 請求正文中傳送表單資料的最常用資料格式。它以鍵值對的形式表示資料，其中值藉助百分比編碼進行編碼。我們可以藉助 URLSearchParams 類建立 URL 編碼的資料物件。

語法

const newData = new URLSearchParams()

append() 函式用於在 URL 編碼的資料物件中新增新的鍵值對。

語法

newform.append("name", "Mohina");

其中 "name" 是表單的鍵或欄位，"Mohina" 是欄位的值。

URL 編碼資料使用以下 header：

headers:{"Content-type": "text/plain"}

它指示伺服器接收到的資料是 URL 編碼的資料。

示例

在下面的程式中，我們建立了一個指令碼來發送純 URL 編碼的資料。為此，我們使用 URLSearchParams() 建立一個數據物件，並使用 append() 函式賦值鍵值對。現在，我們使用 fetch() 函式向伺服器傳送請求。在這個 fetch 函式中，我們包含請求方法 "POST"，將 header 設定為 "application/x-www-form-urlencoded"（告訴伺服器傳送的資料是 URL 編碼格式），並將資料物件包含在請求的正文中。向伺服器傳送請求後，我們現在使用 then() 函式處理響應。如果遇到錯誤，則 catch() 函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // FormData object
   const newform = new FormData();
   
   // Adding key-value pairs in FormData object
   newform.append("id", 4532);
   newform.append("title", "Today is raining");
   
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request to send data
      method: "POST",
   
      // Adding body which we want to send
      // Here we add FormData object
      body: newform
   })
   
   // Converting received information into JSON
   .then(response =>{
      if (response.ok){
         return response.json()
      }
   })
   .then(myData => {
      // Display result
      console.log("Data Sent Successfully");
   
      // Display output in HTML page
      document.getElementById("sendData").innerHTML = JSON.stringify(myData);
   }).catch(err=>{
      console.log("Found error:", err)
   });
   </script>
<h2>Sent Data</h2>
<div>
   <!-- Displaying data-->
   <p id = "sendData"></p>
</div>
</body>
</html>

輸出

結論

這就是我們如何使用 Fetch API 傳送不同型別的資料物件的方法。在所有這些格式中，最常用的格式是 JSON 和 FormData。此外，選擇資料物件格式取決於伺服器的要求或我們想要傳送的資料型別。在下一篇文章中，我們將學習跨域請求。

Fetch API - 自定義請求物件

在 Fetch API 中，我們還可以藉助 Request 介面的 Request() 建構函式建立自定義的 Request 物件。Request 介面使我們可以更好地控制和靈活地處理 HTTP 請求。它提供各種選項，例如 URL、method、body、headers 等，這些選項有助於我們建立自定義的 HTTP 請求。在建立自定義請求物件之前，我們首先了解 Request() 建構函式，使用它可以建立 Request 物件。

Request() 建構函式

要建立請求物件，我們可以使用 Request() 建構函式以及 new 關鍵字。此建構函式包含一個必填引數，即資源的 URL，另一個引數是可選的。

語法

const newRequest = New Request(resourceURL)
Or
const newRequest = New Request(resourceURL, optional)

Request() 建構函式具有以下引數：

• resourceURL − 它代表我們要獲取的資源。它可以是資源的URL或Request物件。

• Options − 它是一個物件，用於提供我們想要應用於請求的自定義設定，選項包括：

• method − 它表示請求方法，例如 GET、POST、PUT 和 DELETE。

• headers − 用於向請求新增 header。

• body − 用於向請求新增資料。GET 或 HEAD 方法不使用它。

• mode − 它代表您想要用於請求的模式。此引數的值可以是 cors、same-origin、no-cors 或 navigate。預設情況下，mode 引數的值為 cors。

• credentials − 它代表您想要用於請求的憑據。此引數的預設值為 same-origin，但您也可以根據需要使用 omit、same-origin 或 include 等值。

• cache − 它代表您想要用於請求的快取模式。

• redirect − 用於重定向模式。此引數的值可以是：follow、error 或 manual。預設情況下，此引數設定為 follow 值。

• referrer − 它代表一個字串，指定請求的來源。此引數的可能值為 client、URL 或 no-referrer。此引數的預設值與客戶端相關。

• referrerPolicy − 用於指定來源策略。

• integrity − 用於表示給定請求的子資源完整性值。

• keepalive − 它包含一個布林值，用於確定是否為多個請求/響應建立持久連線。

• signal − 它包含一個 AbortSignal 物件，用於與請求通訊或中止請求。

• priority − 用於指定請求相對於其他請求的優先順序。此引數可以具有以下值之一：

• high − 如果我們想要將當前提取請求的優先順序設定為高於其他請求。

• low − 如果我們想要將當前提取請求的優先順序設定為低於其他請求。

• auto − 自動查詢當前提取請求相對於其他請求的優先順序。

自定義Request物件

要建立自定義請求物件，我們需要遵循以下步驟：

步驟1 − 自定義Request選項

optional ={
   method: "POST",
   headers: {"Content-Type": "application/json"},
   body = {
      Name: "Tom",
   Age: 23}
}; 

步驟2 − 使用Request()建構函式建立一個自定義請求物件。

const newRequest = new Request(resourceURL, optional

步驟3 − 使用fetch()函式獲取請求物件。

fetch(newRequest)
.then(response =>{
   // Handling the response
}).catch(err => {
   // Handle error
})

示例

在下面的程式中，我們建立了一個指令碼，使用自定義Request物件傳送資料。為此，我們使用Request()建構函式建立一個自定義請求物件，該建構函式接受兩個引數：URL（資源URL）和可選引數。可選引數包含請求的自定義設定，包括：

• method − 在這裡我們使用POST方法，表示我們正在向伺服器傳送資料。

• body − 包含我們要傳送的資料。

• headers − 它表示資料是JSON資料。

現在，我們將請求物件傳遞給 fetch() 函式以傳送請求，處理伺服器返回的響應，並在發生錯誤時進行處理。

<!DOCTYPE html>
<html>
<body>
<script>
   // Customize setting of the request
   const optional = {
      // Setting POST request
      method: "POST",
   
      // Add body which contains data
      body: JSON.stringify({
         id: 311,
         title: "Tom like Oranges",
         age: 37
      }),
      // Setting header
      headers:{"Content-type": "application/json; charset=UTF-8"}
   };
   // Creating request object
   const newRequest = new Request("https://jsonplaceholder.typicode.com/todos", optional);
   
   fetch(newRequest)
   
   // Handling response
   .then(response => response.json())
   .then(returnData => {
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("sendData").innerHTML = JSON.stringify(returnData);
   })
   // Handling error
   .catch(err=>{
      console.error("We get an error:", err);
   });
</script>
   <h2>Fetch API Example</h2>
   <div>
      <!-- Displaying retrieved data-->
      <p id="sendData"></p>
   </div>
</body>
</html>

輸出

結論

這就是我們如何使用Request介面建立自定義請求物件的方法。此介面提供各種屬性和方法，可以根據我們的需要修改請求正文。在下一篇文章中，我們將學習如何使用Fetch API上傳檔案。

Fetch API - 上傳檔案

Fetch API提供了一種靈活的方式來建立HTTP請求，該請求將檔案上傳到伺服器。我們可以使用fetch()函式和FormData物件在請求中傳送單個或多個檔案。讓我們透過以下示例來討論這個概念：

示例 − 上傳單個檔案

在下面的程式中，我們使用Fetch API一次上傳一個檔案。我們使用FormData物件儲存檔案，然後使用fetch()函式將其傳送到給定的URL，其中包括POST請求方法和FormData物件。將請求傳送到伺服器後，我們使用then()函式處理響應。如果遇到錯誤，則catch()函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<!-- Creating a form to upload a file-->  
<form id = "myForm">
   <input type="file" id="file"><br><br>
   <button type="submit">Upload File</button>
</form>
<script>
   document.getElementById('myForm').addEventListener('submit', function(x){
      // Prevent from page refreshing
      x.preventDefault();
   
      // Select the file from the system
      // Here we are going to upload one file at a time
      const myFile = document.getElementById('file').files[0];
   
      // Create a FormData to store the file
      const myData = new FormData();
   
      // Add file in the FormData
      myData.append("newFiles", myFile);
   
      // Send the file to the given URL
      fetch("https://httpbin.org/post", {
         // POST request with Fetch API
         method: "POST", 
   
         // Adding FormData to the request
         body: myData
      })
      // Converting the response in JSON 
      // using response.json() function
      .then(response => response.json())
      .then(finalData => {
         // Handling the response
         console.log("File has been uploaded successfully");
      })
      .catch(err=>{
         // Handling the error
         console.log("Error Found:", err)
      });
   })
</script>
</body>
</html>

輸出

示例 - 上傳單個輸入的多個檔案

在下面的程式中，我們將使用Fetch API上傳來自單個輸入的多個檔案。我們在``標籤中新增一個“multiple”屬性來新增多個檔案。然後我們使用FormData物件儲存多個檔案，然後使用fetch()函式將其傳送到給定的URL，其中包括POST請求方法和FormData物件。將請求傳送到伺服器後，我們使用then()函式處理響應。如果遇到錯誤，則catch()函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
   <!-- Creating a form to upload a file-->  
   <h2> Uploading Multiple files</h2>
   <form id = "myForm">
      <p>Maximum number of files should be 2</p>
      <input type="file" id="file" multiple><br><br>
      <button type="submit">Upload File</button>
   </form>
<script>
   document.getElementById('myForm').addEventListener('submit', function(x){
      // Prevent from page refreshing
      x.preventDefault();
   
      // Select the file from the system
      // Here we are going to upload multiple files at a time
      const myFile = document.getElementById('file').files[0];
   
      // Create a FormData to store the file
      const myData = new FormData();
   
      // Add file in the FormData
      myData.append("newFiles", myFile);
   
      // Send the file to the given URL
      fetch("https://httpbin.org/post", {
         // POST request with Fetch API
         method: "POST", 
   
         // Adding FormData to the request
         body: myData
      })
      // Converting the response in JSON 
      // using response.json() function
      .then(response => response.json())
      .then(finalData => {
         // Handling the response
         console.log("Files has been uploaded successfully");
      })
      .catch(err=>{
         // Handling the error
         console.log("Error Found:", err)
      });
   })
</script>
</body>
</html>

輸出

示例 − 上傳多個檔案

在下面的程式中，我們將使用Fetch API上傳多個檔案。我們在DOM中選擇具有檔案型別屬性的兩個系統檔案。然後我們將輸入檔案新增到陣列中。然後我們建立一個FormData物件並將輸入檔案附加到物件中。然後我們使用fetch()函式將其傳送到給定的URL，其中包括POST請求方法和FormData物件。將請求傳送到伺服器後，我們使用then()函式處理響應。如果遇到錯誤，則catch()函式將處理該錯誤。

<!DOCTYPE html>
<html>
<body>
   <!-- Creating a form to upload multiple files-->  
   <h2> Uploading Multiple files</h2>  
   <input type="file">
   <input type="file">
   <button>Submit</button>
<script>
   const myButton = document.querySelector('button');
   myButton.addEventListener('click', () => {
      // Get all the input files in DOM with attribute type "file":
      const inputFiles = document.querySelectorAll('input[type="file"]');
   
      // Add input files in the array 
      const myfiles = [];
      inputFiles.forEach((inputFiles) => myfiles.push(inputFiles.files[0]));
   
      // Creating a FormData
      const myformdata = new FormData();
   
      // Append files in the FormData object
      for (const [index, file] of myfiles.entries()){
         // It contained reference name, file, set file name
         myformdata.append(`file${index}`, file, file.name);
      }
      // Upload the FormData object
      fetch('https://httpbin.org/post', {
         method: "POST",
         body: myformdata,
      })
      // Handle the response
      .then(response => response.json())
      .then(response => console.log(response))
   
      // Handle the error
      .catch(err => console.log("Error Found:", err))
   })
</script>
</body>
</html>

輸出

結論

這就是我們如何使用fetch() API將檔案上傳到給定URL的方法。在這裡，我們可以上傳任何型別的檔案，例如jpg、pdf、word等，並且可以一次上傳一個檔案或多個檔案。在下一篇文章中，我們將學習Fetch API如何處理響應。

Fetch API - 處理二進位制資料

二進位制資料是指以二進位制格式而不是文字格式存在的資料，例如 new Uint8Array([0x43, 0x21])。它包括影像、音訊、影片和其他非純文字檔案。我們可以在Fetch API中傳送和接收二進位制資料。在Fetch API中處理二進位制資料時，務必設定正確的標頭和響應型別。對於二進位制資料，我們使用“Content-Type”：“application/octet-stream”和“responseType”屬性設定為“arraybuffer”或“blob”，這表示接收二進位制資料。

讓我們透過以下示例瞭解如何在Fetch API中傳送和接收二進位制資料。

傳送二進位制資料

要傳送二進位制資料，我們使用XMLHttpRequest的send()方法，該方法可以使用ArrayBuffer、Blob或File物件輕鬆傳輸二進位制資料。

示例

在下面的程式中，我們建立了一個程式，該程式將二進位制資料傳送到伺服器。首先，我們建立二進位制資料，然後使用Blob()建構函式將二進位制資料轉換為Blob。此建構函式接受兩個引數：二進位制資料和二進位制資料的標頭。然後我們建立一個FormData物件並將Blob新增到FormData物件。然後我們使用fetch()函式將請求傳送到伺服器，然後處理伺服器返回的響應，並處理髮生的錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Binary data 
   var BinaryData = new Uint8Array([0x32, 0x21, 0x45, 0x67]);

   // Converting binary data into Blob
   var blobObj = new Blob([BinaryData], {type: 'application/octet-stream'});

   // Creating FormData object
   var obj = new FormData();

   // Add data to the object
   // Here myfile is the name of the form field
   obj.append("myfile", blobObj);

   // Sending data using POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",

      // Adding body which we want to send
      body: obj
   })
   // Handling the response
   .then(response =>{
      if (response.ok){
         console.log("Binary data send Successfully");
      }
   })
   // Handling the error
   .catch(err=>{
      console.log("Found error:", err)
   });
</script>
   <h2>Sent Binary Data</h2>
</body>
</html>

輸出

接收二進位制資料

在Fetch API中，接收二進位制資料意味著在發出請求後從伺服器檢索響應資料。要接收二進位制資料，我們已將responseType的值設定為ArrayBuffer()或Blob()。

示例

在下面的程式中，我們建立了一個程式，該程式將從伺服器接收二進位制資料。我們使用fetch()函式從給定的URL獲取二進位制資料。在fetch()中，我們定義標頭，告訴瀏覽器我們期望二進位制響應並將responseType設定為arraybuffer，以便它告訴瀏覽器您正在接收ArrayBuffer作為響應。然後我們在.then()塊中接收promise並檢查狀態是否為OK。如果狀態為OK，則使用arrayBuffer()函式將響應轉換為ArrayBuffer。下一個.then()處理返回的二進位制資料並相應地顯示資料。.catch()函式處理發生的錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Receiving data using GET request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding Get request
      method: "GET",

      // Setting headers
      headers: {
         'Content-Type': 'application/octet-stream',
      },
      // Setting response type to arraybuffer 
      responseType: "arraybuffer"
   })

   // Handling the received binary data
   .then(response =>{
      if (response.ok){
         return response.arrayBuffer();
      }
      console.log("Binary data send Successfully");
   })
   .then(arraybuffer => console.log("Binary data received Successfully"))

   // Handling the error
   .catch(err=>{
      console.log("Found error:", err)
   });
</script>
   <h2>Binary Data Example</h2>
</body>
</html>

輸出

結論

這就是我們如何使用Fetch API處理二進位制資料的方法。要處理二進位制資料，我們需要將二進位制資料轉換為適當的資料格式。我們還可以以檔案、字串、ArrayBuffer和Blob的形式傳送二進位制資料。在下一章中，我們將學習如何使用Fetch API查詢狀態程式碼。

Fetch API - 狀態碼

Fetch API提供了一個特殊的屬性，用於查詢請求的狀態，此屬性的名稱為status屬性。它是Response介面的一個只讀屬性，返回伺服器傳送的給定請求的響應的HTTP狀態程式碼。例如，404 - 資源未找到，200 - 成功，400 - 錯誤請求等。所有現代網路瀏覽器都支援它。

語法

response.status

status屬性返回的值是一個無符號短整數，表示當前請求的狀態。

狀態程式碼

HTTP狀態返回的狀態程式碼如下：

成功

成功的狀態程式碼是指伺服器在請求成功完成時返回的狀態程式碼。一些常用的成功狀態程式碼及其含義如下：

重定向

重定向狀態程式碼是指表示重定向響應狀態的狀態程式碼。一些常用的重定向狀態程式碼及其描述如下：

客戶端錯誤

客戶端錯誤狀態程式碼表示請求期間客戶端發生的錯誤。或者我們可以說它們通知客戶端由於錯誤導致請求失敗。一些常用的客戶端錯誤狀態程式碼及其描述如下：

伺服器錯誤

伺服器錯誤狀態程式碼表示請求期間伺服器端發生的錯誤。或者我們可以說它們通知客戶端由於伺服器錯誤導致請求失敗。一些常用的伺服器錯誤狀態程式碼及其描述如下：

示例1：使用fetch()函式查詢狀態程式碼

在下面的程式中，我們查詢當前請求的狀態程式碼。為此，我們從給定的URL獲取資料。如果伺服器返回的響應為OK，則顯示狀態程式碼。如果不是，則顯示請求失敗狀態。如果我們得到錯誤，則此程式碼使用catch()函式處理錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   fetch("https://jsonplaceholder.typicode.com/todos")
   .then(response=>{
      if (response.ok){

      const mystatus = response.status;

      // Display output in HTML page
      document.getElementById("sendData").innerHTML = JSON.stringify(mystatus);
      }else{
         console.log("Request Fail:", mystatus);
      }
   })
   // Handling error
   .catch(err =>{
      console.log("Error is:", err)
   });
</script>
<h2>Status code of request</h2>
<div>
   <p>Status of the current request is </p>
   <!-- Displaying data-->
   <p id = "sendData"></p>
</div>
</body>
</html>

輸出

示例2：使用帶有async/await的fetch()函式查詢狀態程式碼

在下面的程式中，我們查詢當前請求的狀態程式碼。為此，我們建立一個非同步函式。在此函式中，我們使用fetch()函式從給定的URL獲取資料。如果伺服器返回的響應為OK，則在控制檯日誌中顯示狀態程式碼。如果不是，則顯示請求失敗狀態。如果我們得到錯誤，則此程式碼使用catch()函式處理該錯誤。

<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
</head>
<body>
<h1>Example of Fetch API</h1>
<script>
   async function getStatus() {
      try {
         const myResponse = await fetch("https://jsonplaceholder.typicode.com/todos");
   
         // Finding the status of the request
         console.log("Status of the request:", myResponse.status);
         console.log(myResponse);
      } catch (err) {
         console.log("Error is:", err);
      }
   }
   getStatus();
</script>
</body>
</html>

輸出

結論

這就是我們如何找到伺服器返回的當前請求的狀態碼的方法。 使用這些狀態碼，我們可以執行各種操作，例如檢查請求是否成功，處理指定的錯誤或對伺服器返回的響應執行適當的操作。在下一篇文章中，我們將瞭解Fetch API如何處理錯誤。

Stream API - 基礎

Stream API允許開發人員使用JavaScript程式語言訪問透過網路接收的資料流，並根據需要逐位處理它們。其中，流是我們希望以小塊的形式透過網路接收的資料序列，然後我們逐位處理這些小塊。

在流式傳輸之前，如果我們要處理影片、音訊或文字檔案，我們需要從網路下載該完整檔案，並等待將其反序列化為指定的格式，然後處理已下載的完整檔案。

引入流之後，整個工作方式發生了變化，現在我們可以使用JavaScript在客戶端接收到資料後立即開始逐位處理資料，而無需建立任何額外的緩衝區或Blob。使用流，我們可以執行各種任務，例如查詢流的起始和結束位置，將流連結在一起，輕鬆處理錯誤，取消流等等。

流式傳輸用於建立諸如Netflix、亞馬遜Prime影片、Zee5、Voot、YouTube等影片流式傳輸應用程式之類的現實世界應用程式。這樣，使用者就可以輕鬆線上觀看電影、電視節目等，而無需下載它們。Stream API提供了各種功能，例如ReadableStream、Teeing、WritableStream、Pipe Chains、背壓、內部佇列和佇列策略。讓我們逐一詳細討論它們。

可讀流 (Readable Stream)

可讀流允許您使用 ReadableStream 物件在 JavaScript 中從源讀取資料/塊。塊是要由讀取器順序讀取的小資料塊。它可以是一個位元，也可以是像型別化陣列這樣的大尺寸資料。為了讀取可讀流，API 提供了一個讀取器。它從流中讀取塊，然後處理塊的資料。一次只有一個讀取器可以讀取一個流，不允許其他讀取器讀取該流。

可寫流 (Writable Stream)

可寫流允許您使用 Writable Stream 物件在 JavaScript 中寫入資料。資料由寫入器寫入流。寫入器一次寫入一個塊的資料。當寫入器建立並開始寫入流時，該流會被鎖定到該寫入器，不允許其他寫入器訪問該流，並且使用內部佇列來跟蹤寫入器寫入的塊。

分流 (Teeing)

分流是一個將流分成兩個相同流副本的過程，以便兩個單獨的讀取器可以同時讀取該流。我們可以藉助ReableStream.tee()方法實現分流。此方法返回一個數組，其中包含指定流的兩個相同副本，可以由兩個讀取器讀取。

管道鏈 (Pipe Chains)

管道鏈是一個將多個流連線在一起以建立資料處理流程的過程。在Stream API中，我們可以使用管道鏈結構將一個流管道到另一個流中。管道鏈的起點稱為原始源，管道鏈的終點稱為最終接收器。

要管道化流，我們可以使用以下方法：

ReadableStream.pipeThrough() - 此方法用於將當前流透過轉換流管道傳輸。轉換流包含一對可讀和可寫流。

ReadableStream.pipeTo() - 此方法用於將當前 ReadableStream 管道到指定的 WritableStream，並將返回一個 Promise，該 Promise 在管道過程成功完成或由於某些錯誤而被拒絕時解析。

背壓 (Backpressure)

背壓是 Stream API 中的一個特殊概念。在此過程中，單個流或管道鏈控制讀/寫速度。假設我們有一個流，這個流很忙，無法接收新的資料塊，因此它透過鏈向後傳送訊息，告訴轉換流降低塊的交付速度，以便我們可以避免瓶頸。

我們可以在 ReadableStream 中使用背壓，因此我們需要藉助 ReadableStreamDefaultContriller.desiredSize 屬性找到使用者所需的塊大小。如果塊大小非常小，則 ReadableStream 可以指示其底層源停止傳送更多資料，並沿著流鏈傳送背壓。

當使用者再次需要接收到的資料時，我們使用 pull 方法告訴底層源將資料傳送到流。

內部佇列和佇列策略

內部佇列是跟蹤尚未處理或完成的塊的佇列。例如，在可讀流中，內部佇列跟蹤已排隊但尚未讀取的塊。內部佇列使用佇列策略來表示根據內部佇列狀態傳送背壓訊號的方式。

結論

這些是 Stream API 的基本概念。它通常用於線上流媒體。當您線上觀看影片時，瀏覽器或應用程式會在後臺接收連續的資料塊流，然後瀏覽器或應用程式對其進行處理以顯示影片。在下一篇文章中，我們將學習Stream API的可讀流。

Stream API - 可讀流

在 Stream API 中，可讀流是一個數據源，我們可以從中以順序和非同步的方式讀取資料。它是從底層源獲取資料的標準化方式。底層源是網路上存在的資源。它們有以下兩種型別：

推送源 (Push source) - 在訪問資料時將資料推送到您。您可以控制流，例如何時啟動、何時暫停甚至何時終止當前流。例如，影片遊戲流。

拉取源 (Pull source) - 您需要顯式地向其請求資料。例如，使用 Fetch 或 XHR 呼叫訪問檔案。

在可讀流中，資料以小塊的形式存在，因此它按順序讀取，一次一個塊。一個塊可以是一個位元組，也可以是更大的尺寸。因此，流中塊的大小可能不同。現在讓我們瞭解可讀流的工作原理。

可讀流的工作原理

可讀流的工作原理非常簡單。在可讀流中，資料塊放在入隊中。這意味著塊正在佇列中等待讀取。這裡我們還有另一個佇列，即內部佇列，它跟蹤未讀取的塊。塊由讀取器讀取。它一次處理一個塊的資料，並允許您對資料執行操作。一個讀取器一次只能讀取一個流。當讀取器開始讀取流時，該流會被鎖定到該讀取器，這意味著不允許其他讀取器讀取該流。如果您希望另一個讀取器讀取該流，則必須終止第一個讀取器或建立分流。此外，每個讀取器都有自己的控制器，允許您控制流，例如啟動、關閉或暫停。

它還有一個使用者，負責處理從可讀流接收到的資料並對其進行處理，並且能夠對其執行操作。

可讀流介面

Stream API 支援三種類型的可讀流介面：

• ReableStream 介面

• ReableStreamDefaultReader 介面

• ReadableStreamDefaultController 介面

ReadableStream 介面

ReadableStream 介面用於表示可讀的資料流。它通常與 Fetch API 一起使用來處理響應流。它還可以處理開發人員定義的流的響應流。

建構函式

為了為給定的處理程式建立可讀流物件，ReadableStream 介面提供了一個 ReadableStream() 建構函式。

語法

const newRead = new ReadableStream()
Or
const newRead = new ReadableStream(UnderlyingSource)
Or
const newRead = new ReadableStream(UnderlyingSource, QueuingStrategy)

以下是 ReadableStream() 建構函式的可選引數：

UnderlyingSource - 此物件提供各種方法和屬性，這些方法和屬性定義了流例項的行為。方法有：start()、pull() 和 cancel()，而屬性有：type 和 autoAllocateChunkSize。

QueuingStrategy - 此物件用於為給定的流定義佇列策略。它接受兩個引數：highWaterMark 和 size(chunk)。

例項屬性

ReadableStream 介面提供的屬性是隻讀屬性。因此，ReadableStream 提供的屬性是：

方法

以下是 ReadableStream 介面常用的方法：

ReadableStreamDefaultReader 介面

ReadableStreamDefaultReader 介面用於表示預設讀取器，它將從網路讀取流資料。它也可以從 ReadableStream 讀取。

建構函式

為了建立 readableStreamDefualtReader 物件，ReadableStreamDefaultReader 介面提供了一個 ReadableStreamDefaultReader() 建構函式。

語法

const newRead = new ReadableStreamDefaultReader(myStream)

此建構函式只有一個引數 myStream。它將讀取 ReadableStream。

例項屬性

ReadableStreamDefaultReader 介面提供的屬性是隻讀屬性。因此，ReadableStreamDefaultReader 提供的屬性是：

方法

以下是 ReadableStream 介面常用的方法：

ReadableStreamDefaultController 介面

ReadableStreamDefaultController 介面表示一個控制器，它允許我們控制 ReadableStream 狀態或內部佇列。它不提供任何控制器，並且在構造 ReadableStream 時會自動建立例項。

例項屬性

ReadableStreamDefaultController 介面提供的屬性是隻讀屬性。因此，ReadableStreamDefaultController 提供的屬性是：

方法

以下是 ReadableStreamDefaultController 介面常用的方法：

示例 - 建立 ReadableStream

在下面的程式中，我們將使用 ReadableStream 建構函式建立一個自定義的可讀流。首先，我們建立一個函式，該函式以塊的形式生成資料。然後，我們使用包含 start() 函式的 ReadableStream() 建構函式建立一個可讀流。此 start() 函式使用 pData() 遞迴函式，在控制器的幫助下將 myData() 函式中的資料推送到消費者，其中每個推送操作之間設定 1 秒的超時。現在，我們建立一個讀取器，使用 getReader() 函式從流中讀取資料。然後，我們建立一個 readMyData() 函式，在讀取器的幫助下遞迴地從流中讀取資料。當流結束時，done 標誌設定為 true，我們退出遞迴迴圈。

<!DOCTYPE html>
<html>
<body>
<script>
   // Function that produces data for the stream
   function* myData() {
      yield 'pink';
      yield 'blue';
      yield 'yellow';
      yield 'green';
   }
   // Create a readable stream using ReadableStream() function
   const readStream = new ReadableStream({
      start(controller) {
         const data = myData();

         // Adding data to the stream
         function pData() {
            const { done, value } = data.next();

            if (done) {
               // Close the stream if no more data is available
               controller.close();
               return;
            }
            // Pushing the data to the consumer
            controller.enqueue(value);

            // Continue pushing data after 1 sec
            setTimeout(pData, 1000);
         }
         // Calling the pData function to start pushing data
         pData();
      }
   });
   // Create a reader for the readable stream
   const myreader = readStream.getReader();
   function readMyData() {
      myreader.read().then(({ done, value }) => {
         if (done) {
            // Stream is closed
            console.log('Stream is closed');
            return;
         }
         // Processing the received data
         console.log('Received data:', value);

         // Continue reading the data 
         readMyData();
      });
   }
   // Calling readMyData() function to start 
   // reading data from the readable stream
   readMyData();
</script>
</body>
</html>

輸出

結論

這就是 Stream API 中的可讀流。它們是 Stream API 中最重要和最常用的流。幾乎所有 Web 瀏覽器（如 Chrome、Firefox、Opera、Edge、Safari 等）都支援它們。在下一篇文章中，我們將學習 Stream API 的可寫流。

Stream API - 可寫流

可寫流是可以寫入資料的流。它們通常在 JavaScript 中由 WritableStrem 物件表示。它在底層接收器上建立了一個抽象。底層接收器是一個較低級別的輸入/輸出接收器，原始資料寫入其中。

在可寫流中，寫入器寫入資料。它一次寫入一個塊，其中一個塊是一段資料。此外，您可以使用任何程式碼來生成要寫入的塊，寫入器和相關的程式碼一起稱為生產者。在一個流上，只允許一個寫入器寫入資料。此時，流被鎖定到指定的寫入器，不允許其他寫入器寫入。如果要讓另一個寫入器寫入，則必須終止第一個寫入器，然後才能允許另一個寫入器寫入。每個寫入器都有自己的控制器來控制流。

此外，可寫流與可讀流一樣，具有內部佇列。它還跟蹤已寫入但尚未由底層接收器處理的塊。

可寫流介面

Stream API 支援三種類型的可寫流介面：

• WritableStream 介面

• WritableStreamDefaultWriter 介面

• WritableStreamDefaultController 介面

WritableStream 介面

WritableStream 介面用於將流資料寫入接收器。其物件具有內建的反壓和排隊功能。

建構函式

要建立 WritableStream 物件，WritableStream 介面提供了一個 WritableStream() 建構函式。

語法

const newWrite = new WritableStream(UnderlyingSink)
Or
const newWrite = new WritableStream(UnderlyingSink, QueuingStrategy)

WritableStream() 建構函式具有以下可選引數：

UnderlyingSink − 此物件提供各種方法和屬性，這些方法和屬性顯示寫入流例項的行為。它接受四個引數：start(controller)、write(chunk, controller)、close(controller) 和 abort(reason)。

QueuingStrategy − 此物件用於定義寫入流的排隊策略。它接受兩個引數：highWaterMark 和 size(chunk)。

例項屬性

WritableStream 介面提供的屬性是隻讀屬性。因此，WritableStream 提供的屬性為：

方法

以下是 WritableStream 介面常用的方法：

WritableStreamDefaultWriter 介面

WritableStreamDefaultWriter 介面用於表示一個預設寫入器，它將資料塊寫入流。

建構函式

要建立 WritableStreamDefaultWriter 物件，WritableStreamDefaultWriter 介面提供了一個 WritableStreamDefaultWriter() 建構函式。

語法

const newWrite = new WritableStreamDefaultWriter(myStream)

此建構函式只有一個引數 myStream。它將讀取 ReadableStream。

例項屬性

WritableStreamDefaultWriter 介面提供的屬性是隻讀屬性。因此，WritableStreamDefaultWriter 提供的屬性為：

方法

以下是 WritableStreamDefaultWriter 介面常用的方法：

WritableStreamDefaultController 介面

WritableStreamDefaultController 介面表示一個控制器，允許我們控制 WritableStream 狀態。它不提供任何控制器，例項在構造 WritableStream 時自動建立。

例項屬性

WritableStreamDefaultController 介面提供的屬性是隻讀屬性。因此，WritableStreamDefaultController 提供的屬性為：

方法

以下是 WritableStreamDefaultController 介面常用的方法：

示例 - 建立可寫流

在下面的程式中，我們建立一個自定義的可寫流。要建立可寫流，Stream API 提供了 WritableStream() 建構函式，以及 write()、cancel() 和 abort() 函式。write() 函式用於記錄接收到的塊，cancel() 函式用於處理流被取消的情況，abort() 函式用於處理流被中止的情況。現在，我們使用 getWriter() 方法建立一個寫入器，以將資料寫入流中。因此，寫入器以塊的形式寫入資料，並在完成寫入操作後關閉流。

<!DOCTYPE html>
<html>
<body>
<script>
   // Creating a writable stream
   const writStream = new WritableStream({
      // processing the received chunks
      write(chunk) {
         console.log('Received chunk:', chunk);
      },
      // Closing the stream
      close(){
         console.log('Stream is closed');
      },
      // Handling the aborting stream
      abort(reason){
         console.log('Stream is aborted:', reason);
      }
   });
   // Create a writer to write in the stream 
   const myWriter = writStream.getWriter();

   // Writing in the stream
   myWriter.write('Orange');
   myWriter.write('Blue');
   myWriter.write('Pink');
   myWriter.write('Red');

   // Close the stream
   myWriter.close();
</script>
</body>
</html>

輸出

結論

這就是可寫流。藉助可寫流，我們可以輕鬆地將資料寫入資源，而無需將所有資料載入到記憶體中。在下一篇文章中，我們將討論 Stream API 中的轉換流。

Stream API - 變換流

在 Stream API 中，轉換流用於實現管道鏈的概念。管道鏈是一個過程，其中多個流相互連線。原始源稱為管道鏈的起點，而最終接收器稱為管道鏈的終點。

TransformStream 介面

Stream API 支援兩種型別的轉換流介面：

• TransformStream 介面

• TransformStreamDefaultController

TransformStream 介面

TransformStream 介面用於實現管道鏈轉換流方法。

建構函式

要建立轉換流物件，TransformStream 介面提供了一個 TransformStream() 建構函式。此物件表示一對流，即可寫端的 WritableStream 和可讀端的 ReadableStream。

語法

const newTrans = new TransformStream()
Or
const newTrans = new TransformStream(mtransform)
Or
const newTrans = new TransformStream(mtransform, writableStrategy)
Or
const newTrans = new TransformStream(mtransform, writableStrategy, readableStrategy)

以下是 TransformStream() 建構函式的可選引數：

• mtransform − 此物件表示轉換器。start(controller)、transform(chunk, controller) 和 flush(controller) 是轉換器物件包含的方法。其中控制器是 TransformStreamDefaultController 的例項。

• writableStrategy − 此物件用於定義寫入流的排隊策略。它接受兩個引數：highWaterMark 和 size(chunk)。

• readableStrategy − 此物件用於定義讀取流的排隊策略。它接受兩個引數：highWaterMark 和 size(chunk)。

例項屬性

TransformStream 介面提供的屬性是隻讀屬性。因此，TransformStream 提供的屬性為：

TransformStreamDefaultController 介面

TransformStreamDefaultController 介面提供各種方法來操作 ReadableStream 和 WritableStream。當我們建立一個 TransformStream 時，TransformStreamDefaultController 會自動建立。因此，它不需要任何單獨的建構函式。

例項屬性

TransformStreamDefaultController 介面提供的屬性是隻讀屬性。因此，TransformStreamDefaultController 提供的屬性為：

方法

以下是 TransformStreamDefaultController 介面常用的方法：

示例 - 建立轉換流

在下面的程式中，我們建立一個自定義的轉換流。要建立轉換流，我們使用 TransformStream() 建構函式以及 transform()、flush()、start() 和 cancel() 函式。transform() 函式實現接收塊，然後將其轉換為大寫，然後使用 enqueue() 方法入隊資料。flush() 方法用於處理流終結，start() 方法用於處理初始化，cancel() 方法用於處理取消。現在，我們使用 getWriter() 方法從轉換流中獲取寫入器，以讀取流的資料。然後，我們使用 getReader() 函式獲取轉換流的讀取器。它在 myread() 函式的幫助下讀取和處理來自流的轉換後的資料。

<!DOCTYPE html>
<html>
<body>
<script>
   // Create a transform stream using TransformStream() constructor
   const newTransform = new TransformStream({
      transform(chunk, controller) {
         // Processing the received chunk in uppercase
         const tData = chunk.toString().toUpperCase();

         // Enqueue the transformed data and passed it to the downstream
         controller.enqueue(tData);
      },
      // Handling the finalized data, if required
      flush(controller) {
         console.log('Stream is flushing');
      },
      // Performing the initialization, if required
      start(controller) {
         console.log('Stream is started');
      },
      // Handling the stream if it is cancelled  
      cancel(reason) {
         console.log('Stream got canceled:', reason);
      }
   });
   // Creating a writer for the transform stream
   const twriter = newTransform.writable.getWriter();

   // Writing the data into the transform stream 
   twriter.write('pink');
   twriter.write('green');
   twriter.write('blue');

   // Closing the stream
   twriter.close();

   // Creating a reader for the transform stream
   const treader = newTransform.readable.getReader();

   // Read and process data from the transform stream
   function myread(){
      treader.read().then(({ done, value }) => {
         if (done) {
            console.log('Stream is ended');
            return;
         }
         // Processing the received transformed data
         console.log(value);

         // Continue reading data from the stream
         myread();
      });
   }
   // Calling the myread() to start reading from the transform stream
   myread();
</script>
</body>
</html>

結論

這就是轉換流的工作方式。當我們將多個流連線在一起時，通常會使用它。在下一篇文章中，我們將學習 Stream API 中的物件模式。

Stream API - 請求物件

request 物件用於從伺服器獲取資源。request 物件是使用 Request 介面提供的 Request() 建構函式建立的。因此，當建立新的 Request 物件時，允許我們將 ReadableStream 傳遞到 Request 物件的主體，此類請求稱為流請求。然後將此 request 物件傳遞給 fetch() 函式以獲取資源。

語法

const myobject = new Request(URL, {
   method: 'POST',
   body: Stream,
   headers: {'Content-Type'},
   duplex: 'half',
});

這裡 Request() 建構函式包含以下引數：

• URL − 資源的地址。

• method − 它表示 HTTP 請求方法，例如 GET、POST 等。

• body − 包含 ReadableStream 物件。

• headers − 包含適合主體的標頭。

• duplex − 設定為 half 以建立雙工流。

示例

在下面的程式中，我們建立了一個流式請求。為此，我們首先使用 `ReadableStream()` 建構函式以及實現 `ReadableStream` 邏輯和其他操作的 `start()` 函式建立一個可讀流。然後，我們使用 `Request()` 建構函式以及以下選項建立一個請求物件：`method` 選項包含用於傳送請求的 POST 請求，`body` 選項包含流，`headers` 選項包含相應的標頭，並且 `duplex` 選項設定為 `half` 以使其成為雙工流。建立請求物件後，我們將其傳遞給 `fetch()` 函式以發出請求，此函式使用 `then()` 處理響應，並使用 `catch()` 函式處理錯誤（如果發生）。在這裡，您可以使用一個有效的 API/URL 來代替 https://exampleApi.com/，該 API/URL 以塊的形式傳送/接收資料。

<script>
   // Create a readable stream using the ReadableStream constructor()  
   const readStream = new ReadableStream({
      start(controller) {
         // Here implement your ReadableStream 
         // Also with the help of controller, you can enqueue data and 
         // signal the end of the stream
      },
   });
   
   // Create a request objecct using Request() constructor
   const request = new Request('https://exampleApi.com/', {
      // Set the method
      method: 'POST',
   
      // Passing the stream to the body of the request
      body: stream,
   
      // Setting suitable header
      headers: {'Content-Type': 'application/octet-stream'},
      duplex: 'half' 
   });
   
   // After creating a request object pass the object 
   // to fetch() function make a request or perform operations
   fetch(request)
   .then(response => {
      // Handling the response
   })
   .catch(error => {
      // Handling any errors if occur
   });
</script>

限制

流式請求是一項新功能，因此有一些限制，它們是：

半雙工 - 要執行流式請求，我們必須將 `duplex` 選項設定為 `half`。如果在流式請求中未設定此選項，則會收到錯誤。此選項表示請求體是雙工流，其中雙工流是同時接收資料（可寫）和傳送資料（可讀）的流。

需要 CORS 並觸發預檢請求 - 我們知道流式請求在請求體中包含一個流，但不包含 "Content-Length" 標頭。因此，對於此類請求，需要 CORS，並且它們始終會觸發預檢請求。此外，不允許使用 no-cors 流式請求。

在 HTTP/1.x 上不起作用 - 如果連線是 HTTP/1.x，則根據 HTTP/1.x 規則，它將拒絕 `fetch`。根據 HTTP/1.x 規則，請求和響應體需要傳送 Content-Length 標頭。以便另一方可以記錄已接收的資料量，或者可以更改格式以使用分塊編碼。分塊編碼很常見，但對於請求來說卻非常罕見。

伺服器端不相容性 - 一些伺服器不支援流式請求。因此，始終僅使用支援流式請求的伺服器，例如 NodeJS 等。

結論

這就是我們如何為流建立請求物件，或者可以說這就是我們如何使用 `fetch()` 函式建立流式請求的方法。流式請求對於傳送大型檔案、即時資料處理、媒體流、連續資料饋送等非常有用。在下一篇文章中，我們將學習 Stream API 中的響應體。

Stream API - 響應主體

在 Stream API 中，`body` 是 `Response` 介面的一個屬性。它用於獲取 `ReadableStream` 的主體內容。這是一個只讀屬性。響應體不是以單個主體傳送，而是以小塊傳送，客戶端一旦收到資料就開始處理。它不必等到完整的響應。

語法

Response.body

此屬性對於任何使用 `null` 主體屬性建立的 `Response` 物件，返回 `ReadableStream` 或 `null`。

示例

在下面的程式中，我們將看到如何在 Stream API 中使用響應體。為此，我們使用 `fetch()` 向給定的 URL 傳送 GET 請求。如果響應成功，則使用 `response.body.getReader()` 將響應體作為 "ReadableStream" 獲取。然後，我們定義一個 `readMyStream()` 函式來讀取從流接收到的資料塊。如果發生任何錯誤，則 `catch()` 函式會成功處理。

<script>
   // fetch() function to send GET request 
   fetch('http://example.com/')
   .then(response => {
      if (response.ok) {
      // Using body property we get the ReadableStream 
      const myReader = response.body.getReader();
   
      // Using this function we read the chunks 
      function readMyStream() {
         return myReader.read().then(({ done, value }) => {
            if (done) {
               // Stream is completed
               return;
            }
            // Process the data from the chunks 
            const receivedData = new TextDecoder().decode(value);
            console.log(receivedData);
   
            // Continue reading 
            return readMyStream();
         });
      }
      return readMyStream();
      } 
   })
   .catch(error => {
      // Handling error
      console.log('Found Error:', error);
   });
</script>

結論

這就是響應體 `body` 的工作方式。在使用響應體之前，請務必檢查指定的 API 是否支援流式響應。因為並非所有 API 都支援流式響應。在下一篇文章中，我們將學習 Stream API 中的位元組讀取器。

Stream API - 錯誤處理

在使用流式 API 時，有時由於網路中斷、伺服器端問題、資料傳輸等原因會導致錯誤。因此，為了處理這些錯誤，每個 API 在流式處理過程中都使用其自己的錯誤處理機制。這使得應用程式更加健壯和具有彈性。因此，常用的錯誤處理方法是：

錯誤事件監聽器 - 幾乎所有流式 API 都支援錯誤事件監聽器。當發生錯誤時，錯誤事件監聽器會發揮作用，並允許您適當地處理錯誤。它可以與合適的物件一起使用，例如 WebSocket、Fetch API 或 ReadableStream。

Try-Catch 塊 - 允許您在使用特定型別的流中的同步程式碼時使用 try-catch 塊來處理錯誤。

Promise 和 Async/Await - 在使用 Promise 或 Async/Await 與流式 API 時，您可以使用 catch 塊來處理流式處理期間發生的錯誤。

回退和重試方法 - 如果您的錯誤不是暫時的，則可以使用回退和重試方法。在這種方法中，應用程式會等待資料一小段時間，如果在此時間段內未收到資料，則會從失敗的操作重試。

使用者友好的錯誤訊息 - 如果發生錯誤，請向終端使用者提供簡單易懂的錯誤訊息，避免顯示可能使使用者困惑的技術細節，並能夠避免安全風險。

資料驗證 - 始終確保對來自流式 API 的傳入資料進行正確驗證和清理，以避免資料格式錯誤或意外資料處理問題。

結論

始終徹底檢查錯誤處理實現，以確保其正常工作。在下一篇文章中，我們將學習 fetch API 中的 body 資料。