Pengenalan kepada fungsi dan kegunaan Ajax

Ikhtisar fungsi praktikal Ajax

Dalam pembangunan web moden, Ajax (JavaScript Asynchronous dan XML) telah menjadi alat yang sangat biasa digunakan. Dengan menggunakan Ajax, kami boleh mencapai interaksi data tanpa memuat semula halaman, meningkatkan pengalaman pengguna dan mengurangkan beban pelayan. Artikel ini akan memberikan gambaran keseluruhan beberapa fungsi praktikal Ajax, dengan contoh kod khusus.

1. Hantar borang tanpa menyegarkan

Salah satu fungsi paling asas menggunakan Ajax ialah menyerahkan borang tanpa menyegarkan. Penyerahan borang HTML tradisional menyebabkan keseluruhan halaman dimuat semula, tetapi menggunakan Ajax membolehkan anda menyerahkan borang dan menerima respons pelayan tanpa memuat semula halaman.

Berikut ialah contoh pelaksanaan mudah:

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

Dalam kod di atas, apabila butang hantar diklik, fungsi submitForm() akan dipanggil. Fungsi ini mendapatkan data borang melalui objek FormData dan menggunakan objek XMLHttpRequest untuk menghantar permintaan POST ke pelayan. Apabila pelayan mengembalikan respons, kami boleh mengendalikan respons pelayan dalam acara xhr.onreadystatechange. 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. Muatkan data secara dinamik

Melalui Ajax, kami boleh memuatkan data secara dinamik tanpa memuat semula keseluruhan halaman. Ini berguna apabila membuat aplikasi web yang sangat interaktif.

Kod berikut menunjukkan cara menggunakan Ajax untuk memuatkan data secara dinamik dari sisi pelayan dan memaparkannya pada halaman: 🎜rrreee🎜Dalam kod di atas, kami menggunakan objek XMLHttpRequest untuk menghantar permintaan GET ke pelayan dan dapatkan data bernama Data data.json. Apabila pelayan mengembalikan respons, kami menggunakan JSON.parse() untuk menghuraikan teks respons dan memaparkan data dalam <div> bernama <code>dataContainer code> elemen. 🎜🎜3. Carian masa nyata🎜🎜Ajax juga boleh digunakan untuk melaksanakan fungsi carian masa nyata. Apabila pengguna memasukkan kata kunci dalam kotak carian, halaman akan segera menghantar permintaan kepada pelayan dan memuatkan hasil carian yang sepadan, dengan itu mencapai kesan memaparkan hasil carian dalam masa nyata. 🎜🎜Berikut ialah kod contoh carian masa nyata asas: 🎜rrreee🎜Dalam kod di atas, apabila pengguna memasukkan kata kunci dalam kotak carian, fungsi search() akan dipanggil. Fungsi ini mencari dengan mendapatkan nilai kotak input dan menghantarnya ke pelayan sebagai parameter. Apabila pelayan mengembalikan hasil carian, kami memaparkan hasilnya dalam elemen <ul></ul> bernama searchResults. 🎜🎜Kesimpulan🎜🎜Artikel ini memperkenalkan tiga fungsi biasa Ajax: menyerahkan borang tanpa menyegarkan, memuatkan data secara dinamik dan carian masa nyata. Melalui contoh kod praktikal, kami menunjukkan cara menggunakan Ajax untuk melaksanakan fungsi ini pada halaman. Sudah tentu, ini hanyalah puncak gunung ais fungsi Ajax yang mempunyai banyak ciri dan kegunaan lain yang berkuasa. Saya harap artikel ini dapat memberi anda sedikit inspirasi tentang penggunaan Ajax dan memainkan peranan dalam projek pembangunan web anda. 🎜