Ajax是一種用于在網頁中進行異步通信的技術，通過Ajax，我們可以在不刷新整個網頁的情況下，向服務器發送請求并獲取數據，然后將這些數據用于更新網頁的特定部分。本文將介紹如何使用Ajax來標記文本的背景色。通過這種方法，我們可以實現在不刷新頁面的情況下，根據某些條件動態改變文本的背景色。以下是一個使用Ajax標記文本背景色的示例。
假設我們有一個包含一篇文章的網頁，其中包含一些特定關鍵詞。我們希望當用戶在搜索框中輸入某個關鍵詞時，通過Ajax將與該關鍵詞相匹配的文本標記出來，并將背景色改變。首先，我們需要在網頁加載完成后向服務器發送一個初始請求，獲取所有文章內容，并將其顯示在網頁上。
以下是頁面的HTML結構：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax標記文本背景色</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>文章標題</h1>
<p id="content"></p>
<input type="text" id="searchInput">
<button onclick="search()">搜索</button>
</body>
</html>以下是main.js的代碼：
function search() {
var input = document.getElementById("searchInput").value; // 獲取用戶輸入的關鍵詞
var content = document.getElementById("content"); // 獲取文章內容的p標簽
var url = "https://example.com/search?keyword=" + input; // 根據關鍵詞構造Ajax請求的URL
axios.get(url)
.then(function(response) {
var keywords = response.data.keywords; // 服務器返回匹配的關鍵詞
for (var i = 0; i < keywords.length; i++) {
var keyword = keywords[i];
var regex = new RegExp("\\b" + keyword + "\\b", "gi"); // 創建正則表達式，匹配整個單詞，忽略大小寫
content.innerHTML = content.innerHTML.replace(regex, '<span class="highlight">$</span>'); // 將匹配的關鍵詞用帶有highlight類的span標簽包裹起來
}
})
.catch(function(error) {
console.log(error);
});
}