Ajax的實用功能概述
在現代Web開發中，Ajax（Asynchronous JavaScript and XML）已經成為一個非常常用的工具。透過使用Ajax，我們可以在頁面上實現無刷新的資料交互，提高使用者體驗，減少伺服器負載。本文將對Ajax的幾個實用功能進行概述，並附上具體的程式碼範例。
一、無刷新提交表單
使用Ajax的最基本功能之一是無刷新提交表單。傳統的HTML表單提交會導致整個頁面刷新，而使用Ajax可以在不刷新頁面的情況下提交表單並接收伺服器的回應。
以下是一個簡單的實作範例：
<form id="myForm" action="submit.php" method="post">
<input type="text" name="username">
<input type="password" name="password">
<button onclick="submitForm()">提交</button>
</form>
<script>
function submitForm() {
var form = document.getElementById("myForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = xhr.responseText;
// 处理服务器响应
}
};
xhr.send(formData);
}
</script>在上面的程式碼中，當點擊提交按鈕時，submitForm()函數會被呼叫。此函數透過FormData物件取得表單的數據，並使用XMLHttpRequest物件傳送POST請求到伺服器。當伺服器回傳回應時，我們可以在xhr.onreadystatechange事件中處理伺服器的回應。
二、動態載入資料
透過Ajax，我們可以在不刷新整個頁面的情況下動態載入資料。這在創建互動性強的網頁應用程式時非常有用。
以下程式碼展示如何使用Ajax從伺服器端動態載入資料並展示在頁面上：
<div id="dataContainer"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var container = document.getElementById("dataContainer");
data.forEach(function(item) {
var element = document.createElement("div");
element.textContent = item.name;
container.appendChild(element);
});
}
};
xhr.send();
</script>在上面的程式碼中，我們使用XMLHttpRequest物件傳送GET請求到伺服器，取得名為data.json的資料。當伺服器回傳回應時，我們使用JSON.parse()解析回應的文本，並將資料展示在名為dataContainer的<div>元素中。
三、即時搜尋
Ajax也可以用來實現即時搜尋功能。當使用者在搜尋框中輸入關鍵字時，頁面會立即向伺服器發送請求並載入對應的搜尋結果，從而實現即時展示搜尋結果的效果。
以下是一個基本的即時搜尋範例程式碼：
<input type="text" id="searchInput" oninput="search()" placeholder="搜索...">
<ul id="searchResults"></ul>
<script>
function search() {
var keyword = document.getElementById("searchInput").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var results = JSON.parse(xhr.responseText);
var resultsList = document.getElementById("searchResults");
resultsList.innerHTML = "";
results.forEach(function(item) {
var li = document.createElement("li");
li.textContent = item.name;
resultsList.appendChild(li);
});
}
};
xhr.send();
}
</script>在上面的程式碼中，當使用者在搜尋框中輸入關鍵字時，search()函數會被呼叫。此函數透過取得輸入框的值，並將其作為參數傳送到伺服器進行搜尋。當伺服器傳回搜尋結果時，我們將結果展示在名為searchResults的<ul></ul>元素中。
結語
本文介紹了Ajax的三個常用功能：無刷新提交表單、動態載入資料和即時搜尋。透過實際的程式碼範例，我們展示瞭如何使用Ajax在頁面上實現這些功能。當然，這只是Ajax功能的冰山一角，Ajax還有很多其他強大的功能和用途。希望本文能為你對Ajax的使用提供一些啟示，並在你的Web開發專案中發揮作用。
以上是Ajax的功能和用途簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！
