Eine Einführung in die Funktionen und Verwendungsmöglichkeiten von Ajax

Überblick über die praktischen Funktionen von Ajax

In der modernen Webentwicklung ist Ajax (Asynchronous JavaScript and XML) zu einem sehr häufig verwendeten Werkzeug geworden. Durch die Verwendung von Ajax können wir eine Dateninteraktion ohne Seitenaktualisierung erreichen, die Benutzererfahrung verbessern und die Serverlast reduzieren. Dieser Artikel bietet einen Überblick über mehrere praktische Funktionen von Ajax mit konkreten Codebeispielen.

1. Senden Sie das Formular ohne Aktualisierung

Eine der grundlegendsten Funktionen bei der Verwendung von Ajax ist das Senden des Formulars ohne Aktualisierung. Beim herkömmlichen Senden von HTML-Formularen wird die gesamte Seite aktualisiert. Mit Ajax können Sie jedoch das Formular senden und die Antwort des Servers empfangen, ohne die Seite zu aktualisieren.

Das Folgende ist ein einfaches Implementierungsbeispiel:

<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>

Wenn im obigen Code auf die Schaltfläche „Senden“ geklickt wird, wird die Funktion submitForm() aufgerufen. Diese Funktion ruft die Formulardaten über das Objekt FormData ab und verwendet das Objekt XMLHttpRequest, um eine POST-Anfrage an den Server zu senden. Wenn der Server eine Antwort zurückgibt, können wir die Antwort des Servers im Ereignis xhr.onreadystatechange verarbeiten. 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>

2. Daten dynamisch laden

Über Ajax können wir Daten dynamisch laden, ohne die gesamte Seite zu aktualisieren. Dies ist nützlich, wenn Sie hochgradig interaktive Webanwendungen erstellen.

Der folgende Code zeigt, wie man Ajax verwendet, um Daten dynamisch von der Serverseite zu laden und auf der Seite anzuzeigen: 🎜rrreee🎜Im obigen Code verwenden wir das XMLHttpRequest-Objekt, um eine GET-Anfrage zu senden zum Server und rufen Sie die Daten mit dem Namen „The data of data.json“ ab. Wenn der Server eine Antwort zurückgibt, verwenden wir JSON.parse(), um den Text der Antwort zu analysieren und die Daten in einem <div> mit dem Namen <code>dataContainer anzuzeigen code>-Element. 🎜🎜3. Echtzeitsuche🎜🎜Ajax kann auch zur Implementierung der Echtzeitsuchfunktion verwendet werden. Wenn der Benutzer ein Schlüsselwort in das Suchfeld eingibt, sendet die Seite sofort eine Anfrage an den Server und lädt die entsprechenden Suchergebnisse, wodurch der Effekt erzielt wird, dass die Suchergebnisse in Echtzeit angezeigt werden. 🎜🎜Das Folgende ist ein einfacher Beispielcode für die Echtzeitsuche: 🎜rrreee🎜Wenn der Benutzer im obigen Code Schlüsselwörter in das Suchfeld eingibt, wird die Funktion search() aufgerufen. Diese Funktion sucht, indem sie den Wert des Eingabefelds abruft und ihn als Parameter an den Server sendet. Wenn der Server Suchergebnisse zurückgibt, zeigen wir die Ergebnisse in einem <ul></ul>-Element mit dem Namen searchResults an. 🎜🎜Fazit🎜🎜In diesem Artikel werden drei allgemeine Funktionen von Ajax vorgestellt: Formulare ohne Aktualisierung senden, Daten dynamisch laden und Echtzeitsuche durchführen. Anhand praktischer Codebeispiele zeigen wir, wie Sie Ajax verwenden, um diese Funktionen auf der Seite zu implementieren. Natürlich ist dies nur die Spitze des Eisbergs der Ajax-Funktionalität. Ajax verfügt über viele weitere leistungsstarke Funktionen und Einsatzmöglichkeiten. Ich hoffe, dieser Artikel kann Ihnen Inspiration für die Verwendung von Ajax geben und eine Rolle bei Ihren Webentwicklungsprojekten spielen. 🎜