Ajaxの機能と使い方を紹介します。

Ajax の実際的な機能の概要

現代の Web 開発では、Ajax (非同期 JavaScript および XML) が非常に一般的に使用されるツールになっています。 Ajax を使用することで、ページを更新せずにデータのやり取りを実現し、ユーザー エクスペリエンスを向上させ、サーバーの負荷を軽減できます。この記事では、Ajax のいくつかの実用的な機能の概要を、具体的なコード例とともに説明します。

1. 更新せずにフォームを送信する

Ajax を使用する最も基本的な機能の 1 つは、更新せずにフォームを送信することです。従来の 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 イベントでサーバーの応答を処理できます。

2. データを動的にロードする

Ajax を使用すると、ページ全体を更新せずにデータを動的にロードできます。これは、高度にインタラクティブな Web アプリケーションを作成する場合に役立ちます。

次のコードは、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> 要素にデータを表示します。 ＃＃ 真ん中。 <code>3. リアルタイム検索

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 の 3 つの一般的な機能、更新せずにフォームを送信する、データを動的にロードする、リアルタイム検索を紹介します。実際のコード例を通じて、Ajax を使用してこれらの関数をページに実装する方法を示します。もちろん、これは Ajax 機能の氷山の一角にすぎません。Ajax には他にも多くの強力な機能と用途があります。この記事が Ajax の使用に関するインスピレーションを提供し、Web 開発プロジェクトに役立つことを願っています。