Ajax的功能和用途簡介

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>元素中。 <p>三、即時搜尋</p> <p>Ajax也可以用來實現即時搜尋功能。當使用者在搜尋框中輸入關鍵字時，頁面會立即向伺服器發送請求並載入對應的搜尋結果，從而實現即時展示搜尋結果的效果。 </p> <p>以下是一個基本的即時搜尋範例程式碼：</p><pre class='brush:html;toolbar:false;'>&lt;input type=&quot;text&quot; id=&quot;searchInput&quot; oninput=&quot;search()&quot; placeholder=&quot;搜索...&quot;&gt; &lt;ul id=&quot;searchResults&quot;&gt;&lt;/ul&gt; &lt;script&gt; function search() { var keyword = document.getElementById(&quot;searchInput&quot;).value; var xhr = new XMLHttpRequest(); xhr.open(&quot;GET&quot;, &quot;search.php?keyword=&quot; + keyword, true); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE &amp;&amp; xhr.status === 200) { var results = JSON.parse(xhr.responseText); var resultsList = document.getElementById(&quot;searchResults&quot;); resultsList.innerHTML = &quot;&quot;; results.forEach(function(item) { var li = document.createElement(&quot;li&quot;); li.textContent = item.name; resultsList.appendChild(li); }); } }; xhr.send(); } &lt;/script&gt;</pre><p>在上面的程式碼中，當使用者在搜尋框中輸入關鍵字時，<code>search()函數會被呼叫。此函數透過取得輸入框的值，並將其作為參數傳送到伺服器進行搜尋。當伺服器傳回搜尋結果時，我們將結果展示在名為searchResults的<ul></ul>元素中。

結語

本文介紹了Ajax的三個常用功能：無刷新提交表單、動態載入資料和即時搜尋。透過實際的程式碼範例，我們展示瞭如何使用Ajax在頁面上實現這些功能。當然，這只是Ajax功能的冰山一角，Ajax還有很多其他強大的功能和用途。希望本文能為你對Ajax的使用提供一些啟示，並在你的Web開發專案中發揮作用。