Cara menggunakan AJAX dalam JavaScript dan mengekalkan halaman daripada menyegarkan

Apabila tapak web menjadi semakin kompleks dan memerlukan pengalaman pengguna yang lebih tinggi, teknologi AJAX (Asynchronous JavaScript and XML) telah menjadi salah satu kemahiran penting untuk pembangunan bahagian hadapan tapak web. Ia membolehkan anda menghantar permintaan ke pelayan melalui JavaScript tanpa membuat keseluruhan halaman dimuat semula. Ini menjadikan tapak web lebih pantas dan lancar, dan pengguna tidak merasakan sebarang gangguan. Artikel ini akan menerangkan cara menggunakan AJAX dalam JavaScript dan mengekalkan halaman daripada menyegarkan.

1. AJAX dan XMLHttpRequest

Menggunakan AJAX dalam Javascript memerlukan penggunaan objek XMLHttpRequest, kerana ia adalah teras melaksanakan permintaan tak segerak. Objek XMLHttpRequest ialah objek JavaScript terbina dalam, sering dirujuk sebagai singkatan XHR. Ia menyediakan API untuk permintaan tak segerak melalui protokol HTTP, membolehkan kami mendapatkan respons pelayan, memproses permintaan dan mengemas kini halaman web tanpa menyegarkan keseluruhan halaman.

Berikut ialah contoh mudah menggunakan XHR untuk membuat permintaan:

let request = new XMLHttpRequest();
request.open('GET', '/api/data', true);
request.onreadystatechange = function() {
   if(request.readyState === 4 && request.status === 200) {
      let response = JSON.parse(request.responseText);
      // 处理响应并更新页面
   }
};
request.send();

Dalam kod di atas, kami mencipta contoh objek XMLHttpRequest dan membukanya menggunakan kaedah open() GET permintaan. Selepas membuka permintaan GET, kami menetapkan fungsi pengendali untuk acara onreadystatechange, yang akan dipanggil apabila atribut readyState objek XHR berubah dan semak sama ada kod status respons pelayan ialah 200. Jika semuanya berjalan lancar, kami menghuraikan teks respons (biasanya dalam format JSON) dan mengemas kini data yang berkaitan pada halaman.

2. AJAX dalam jQuery

Jika anda menggunakan jQuery, ia mengabstrakkan API yang lebih mudah di bawah hud untuk menggunakan AJAX. Berikut ialah contoh lengkap jQuery AJAX:

$.ajax({
   url: '/api/data',
   type: 'GET',
   dataType: 'json',
   success: function(data) {
      // 成功后更新页面
   }
});

Dalam kod di atas, kami menghantar permintaan GET menggunakan kaedah $.ajax() jQuery dan melaksanakan fungsi pengendali pada success . Sama seperti menggunakan objek XMLHttpRequest, kami boleh mengemas kini kandungan halaman dalam fungsi kejayaan.

3. Menggunakan AJAX untuk mengemas kini kandungan halaman

Setelah permintaan AJAX anda berjaya mengembalikan respons, anda mungkin mahu menggunakan JavaScript untuk mengemas kini kandungan pada halaman untuk mencerminkan yang baharu data. Berikut ialah contoh mudah:

function updatePage(response) {
   let div = document.getElementById('data-display');
   let html = '';
   response.forEach(function(item) {
      html += '<div>' + item.name + '</div>';
   });
   div.innerHTML = html;
}

Dalam kod di atas, kami mentakrifkan fungsi updatePage() untuk mengemas kini kandungan halaman. Ia mula-mula mencari elemen div dengan ID "paparan data" dan membina rentetan HTML secara dalaman, kemudian menetapkan rentetan itu kepada innerHTML elemen itu.

4. Elakkan permintaan pendua

Memandangkan AJAX dilaksanakan secara tidak segerak, pengguna boleh terus memulakan berbilang permintaan yang serupa atau berbeza, yang akan menyebabkan permintaan ini disilang dalam jumlah yang banyak, Ini boleh membawa kepada isu konkurensi dan beban pelayan yang berlebihan. Oleh itu, apabila menghantar permintaan AJAX, kita harus memberi perhatian untuk mengelakkan permintaan pendua.

Satu cara untuk mengelakkan permintaan pendua ialah menggunakan pembolehubah teg (atau bendera) untuk menyemak sama ada permintaan sebelumnya telah selesai. Contohnya:

let requesting = false;
function makeRequest() {
   if(requesting) {
      return;
   }
   requesting = true;
   $.ajax({
      url: '/api/data',
      type: 'GET',
      dataType: 'json',
      success: function(data) {
         updatePage(data);
      },
      complete: function() {
         requesting = false;
      }
   });
}

Dalam kod di atas, kami menggunakan pembolehubah "meminta" untuk mengenal pasti sama ada permintaan telah dikeluarkan. Untuk mengelakkan berbilang permintaan, kami terlebih dahulu menyemak status pembolehubah ini sebelum mula menghantar permintaan. Jika pembolehubah adalah benar, ia kembali dan tiada permintaan baharu dihantar. Jika permintaan berjaya atau gagal, kami menetapkan semula pembolehubah kepada palsu dalam fungsi panggil balik lengkap untuk membenarkan permintaan baharu.

5. Menggunakan AJAX untuk melaksanakan borang dinamik

Salah satu senario yang paling biasa untuk AJAX ialah menyerahkan data melalui borang dinamik dan mendapatkan respons pelayan tanpa memuat semula keseluruhan halaman. Berikut ialah contoh penggunaan jQuery untuk melaksanakan borang dinamik:

<form id="my-form">
   <input type="text" id="name" name="name" placeholder="Your name">
   <button type="submit">Submit</button>
</form>
<div id="result"></div>

<script type="text/javascript">
   $("#my-form").submit(function(e) {
      e.preventDefault();
      let $form = $(this);
      let url = $form.attr('action');
      let formData = $form.serialize();
      $.ajax({
         type: "POST",
         url: url,
         data: formData,
         dataType: 'json',
         success: function(response) {
            $('#result').html("Thank you, " + response.name + "!");
         }
      });
   });
</script>

Dalam kod di atas, kami mentakrifkan borang dan mengikat acara serah kepadanya. Apabila pengguna menyerahkan borang, kami menggunakan kaedah serialize() untuk mengumpul data borang dan menghantarnya ke pelayan sebagai data untuk permintaan AJAX. Jika pelayan berjaya memproses dan mengembalikan respons JSON, kami mengemas kini elemen div dengan "hasil" ID pada halaman dengan data dalam respons.

Kesimpulan

Seperti yang anda lihat, AJAX menjadikannya lebih mudah dan selesa untuk menghantar dan menerima data ke pelayan. Artikel ini menerangkan cara menggunakan AJAX dalam Javascript untuk menghantar permintaan tak segerak dan mengemas kini kandungan tanpa memuat semula keseluruhan halaman. Akhirnya kami membincangkan cara untuk mengelakkan permintaan pendua dan melaksanakan penyerahan borang dinamik. AJAX ialah teknologi yang sangat berguna yang boleh menjadikan tapak web anda lebih pantas dan lancar, dan akan meningkatkan pengalaman pengguna dengan banyak.

Atas ialah kandungan terperinci Cara menggunakan AJAX dalam JavaScript dan mengekalkan halaman daripada menyegarkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!