資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律如何建立自己的 Ajax 功能？
Ajax（非同步 JavaScript 和 XML）請求是使用 JavaScript 發出的 HTTP 請求，通常使用 XMLHttpRequest 物件，用於與伺服器交換資料並更新網頁的特定部分，而無需重新整理整個頁面。建立自己的 Ajax 功能有兩種方法。您可以使用 JSONPlaceholder API 或您自己的檔案。在本教程中，我們將詳細討論這兩種方法。
使用 JSONPlaceholder API
JSONPlaceholder 是一個免費的線上 REST API，您可以使用它來測試和練習您的開發技能。
語法
使用者可以按照以下語法使用 JavaScript 的“XMLHttpRequest”物件建立 Ajax 請求。
let xhr = new XMLHttpRequest();
xhr.open("HTTP_METHOD" , "API_URL" , true);
//HTTP_METHOD can be "GET" , "POST" , "PUT", etc.
xhr.onload = function(){
if(xhr.status === 200) {
//handle the response
} else {
//show xhr.status
}
};
xhr.send();
這將建立一個新的 XMLHttpRequest 物件，使用指定的 HTTP_METHOD 開啟到指定的 API_URL 的連線，併發送請求。onload 函式將在請求完成後被呼叫，而 xhr.status 屬性將包含響應的 HTTP 狀態程式碼。您可以在 onload 函式中處理響應資料，並相應地更新您的 HTML、JavaScript 或 JSON。
請記住，您需要提供您的 API_URL，並檢查 API 文件以瞭解要使用的正確 HTTP_METHOD 和引數。
步驟
按照以下步驟使用 JSONPlaceholder API 建立自己的 Ajax 功能：
步驟 1 - 在 HTML 頁面上建立一個按鈕元素，並使用 onclick 事件呼叫 getUsers() 函式。
步驟 2 - 在 HTML 頁面上建立一個具有 id 屬性“user-list”的無序列表元素和一個具有 id 屬性“error”的 div 元素。
步驟 3.1 - 建立一個新的 XMLHttpRequest 物件並將其分配給名為“xhr”的變數。
步驟 3.2 - 使用 xhr 物件向指定的 API URL 發出新的 GET 請求，並將請求設定為非同步。
步驟 4.1 - 將 xhr 物件的“onload”函式設定為在請求完成後呼叫。
步驟 4.2 - 在“onload”函式中，檢查 xhr 物件的“xhr.status”屬性。
步驟 4.3 - 如果狀態程式碼為 200 -
解析 xhr 物件的 responseText 並將結果物件分配給變數“users”。
將 id 為“user-list”的元素分配給變數“list”。
建立一個 for 迴圈，迭代“users”物件的長度。
在 for 迴圈中，建立一個新的列表項元素，將其 innerHTML 設定為當前使用者的 name 屬性，並將其追加到“list”元素。
步驟 4.4 - 如果狀態程式碼不是 200，則使用狀態程式碼更新錯誤 div。
步驟 5 - 將請求傳送到伺服器。
示例
以下是如何使用 JavaScript 和 JSONPlaceholder API 建立自己的 Ajax 功能的示例，JSONPlaceholder API 是一個免費的開源 API，用於測試和原型設計。
此示例顯示了一個簡單的 HTML 頁面，該頁面從 API 中檢索使用者列表並在列表中顯示其姓名。
<html>
<body>
<h3>User List</h3>
<button onclick = "getUsers()"> Get Users </button>
<ul id = "user-list"></ul>
<div id = "error" > </div>
<script>
function getUsers() {
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xhr.onload = function() {
if (xhr.status === 200) {
let users = JSON.parse(xhr.responseText);
let list = document.getElementById("user-list");
list.innerHTML = "";
for (let i = 0; i < users.length; i++) {
let li = document.createElement("li");
li.innerHTML = users[i].name;
list.appendChild(li);
}
} else {
let error = document.getElementById("error");
error.innerHTML = "Error: " + xhr.status;
}
};
xhr.send();
}
</script>
</body>
</html>
使用我們自己的檔案
我們還可以使用自己的檔案建立 Ajax 請求。我們需要提供檔案路徑而不是 API_URL。
語法
按照以下語法使用此方法建立 Ajax 請求。
let xhr = new XMLHttpRequest();
xhr.open("HTTP_METHOD" , "FILE_PATH" , true);
FILE PATH 是您要請求的檔案或資源的 URL。這可以是網頁、影像、JSON 檔案、文字檔案等。“true”表示請求是非同步的，並且指令碼將在處理請求時繼續執行。
步驟
按照以下步驟使用我們自己的檔案建立自己的 Ajax 功能：
步驟 1 - 建立 XMLHttpRequest 物件的例項。
步驟 2 - 向“example.txt”發出 GET 請求（如果檔案位於子目錄中，您可以指定目錄和檔名）。
步驟 3 - 新增 onload 事件監聽器；在 onload 事件中，檢查請求狀態。
步驟 3.1 - 如果狀態為 200，則讀取檔案內容並將其設定為變數'fileContent'。獲取 id 為'file-content'的元素並將該元素的 innerHTML 設定為 fileContent。
步驟 3.2 - 如果狀態不是 200，則獲取 id 為'error'的元素並將該元素的 innerHTML 設定為包含狀態程式碼的錯誤訊息。
步驟 4 - 將請求傳送到伺服器。
示例
“example.txt”是一個包含訊息“您正在閱讀示例文字檔案”的文字檔案。您可以用文字檔案的實際名稱替換“example.txt”，並確保文字檔案與 HTML 檔案位於同一目錄中，或者使用目錄提供您的檔名。
以下是如何使用 Ajax 請求讀取文字檔案並在網頁上顯示其內容的示例。
<html>
<body>
<h3>Text File Reader</h3>
<button onclick = "readTextFile()"> Read Text File </button>
<div id = "file-content" ></div>
<div id = "error" > </div>
<script>
function readTextFile() {
let xhr = new XMLHttpRequest();
xhr.open("GET" , "/about/topics_list.txt" , true);
xhr.onload = function() {
if (xhr.status === 200) {
let fileContent = xhr.responseText;
let contentDiv = document.getElementById("filecontent");
contentDiv.innerHTML = fileContent;
}
else {
let error = document.getElementById("error");
error.innerHTML = "Error: " + xhr.status;
}
};
xhr.send();
}
</script>
</body>
</html>
請注意，狀態程式碼 200 是成功 HTTP 請求的標準響應。它表示伺服器已接收、理解並接受請求。
請注意，此程式碼僅在文字檔案與 HTML 檔案位於同一域中時才有效；如果您嘗試從另一個域訪問檔案，則會收到 CORS 錯誤。
我們已經學習瞭如何使用 JSONPlaceholder API 使用 JavaScript 的 XMLHttpRequest 物件建立 Ajax 請求，以及如何使用我們自己的檔案建立 Ajax 請求。
260 次瀏覽
