Memahami versi Ajax: Evolusi dari zaman awal hingga zaman moden

Ajax ialah teknologi penting untuk mencipta aplikasi web dinamik. Apabila aplikasi web terus berkembang, Ajax terus berkembang dan bertambah baik. Artikel ini akan menerangkan secara terperinci sejarah pembangunan Ajax dari zaman awal hingga kini, dan memberikan contoh kod khusus.

1. Ajax Awal

Ajax Awal muncul sekitar tahun 2005, yang membolehkan halaman Web berinteraksi dengan pelayan tanpa menyegarkan. Pada peringkat ini, teknologi yang terlibat dalam menggunakan Ajax masih agak asas. Teknologi yang paling asas termasuk objek JavaScript, XML dan XMLHttpRequest. Gabungan teknologi ini membolehkan aplikasi web berkomunikasi dengan lancar antara pengguna dan pelayan.

Berikut ialah contoh mudah menggunakan Ajax untuk mencari tanpa memuat semula halaman:

function search() {
  var searchValue = document.getElementById("searchInput").value;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById("searchResult").innerHTML = xhr.responseText;
    }
  };
  xhr.open("GET", "/search?q=" + searchValue, true);
  xhr.send();
}

Dalam contoh ini, apabila pengguna memasukkan kata kunci dalam kotak carian dan menekan butang carian, JavaScript akan menggunakan objek XMLHttpRequest untuk menghantarnya kepada permintaan GET pelayan. Apabila pelayan mengembalikan hasil carian, JavaScript memaparkan hasil pada halaman tanpa memuat semula keseluruhan halaman.

2. Era jQuery

Dengan pembangunan berterusan Ajax, jQuery telah menjadi pilihan utama untuk menggunakan Ajax. jQuery menyediakan API yang ringkas dan mudah digunakan, menjadikan penggunaan Ajax lebih mudah. Menggunakan jQuery, anda boleh menghantar pelbagai jenis permintaan dengan mudah seperti GET, POST, PUT, DELETE, dll.

Berikut ialah contoh menggunakan jQuery untuk mencari tanpa memuat semula halaman:

function search() {
  var searchValue = $("#searchInput").val();
  $.get("/search?q=" + searchValue, function(data) {
    $("#searchResult").html(data);
  });
}

Dalam contoh ini, apabila pengguna memasukkan kata kunci dalam kotak carian dan menekan butang carian, JavaScript menggunakan Kaedah $.get() jQuery menghantar DAPATKAN permintaan kepada pelayan. Apabila pelayan mengembalikan hasil carian, jQuery memaparkan hasil pada halaman tanpa menyegarkan keseluruhan halaman.

3. Ajax Moden

Ajax Moden bukan lagi gabungan mudah objek JavaScript, XML dan XMLHttpRequest. Kini, pembangun bahagian hadapan mempunyai banyak rangka kerja dan perpustakaan untuk dipilih, seperti React, Vue.js, Angular, dsb. Rangka kerja dan perpustakaan ini bukan sahaja membolehkan pembangun menggunakan Ajax dengan lebih cekap, tetapi juga membolehkan aplikasi Web berprestasi lebih baik dari segi fungsi dan prestasi.

Berikut ialah contoh menggunakan Vue.js untuk melaksanakan carian tanpa memuat semula halaman:

<div id="app">
  <input type="text" v-model="searchValue">
  <button @click="search">Search</button>
  <div v-html="searchResult"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
  el: "#app",
  data: {
    searchValue: "",
    searchResult: ""
  },
  methods: {
    search() {
      var self = this;
      fetch("/search?q=" + this.searchValue)
      .then(response => response.text())
      .then(data => {
        self.searchResult = data;
      });
    }
  }
});
</script>

Dalam contoh ini, apabila pengguna memasukkan kata kunci dalam kotak carian dan menekan butang carian, Vue.js akan melaksanakan carian( ) kaedah. Fungsi fetch() digunakan dalam kaedah untuk menghantar permintaan GET ke pelayan. Apabila pelayan mengembalikan hasil carian, Vue.js memaparkan hasil ke halaman tanpa memuat semula keseluruhan halaman.

Kesimpulan

Ajax mempunyai sejarah pembangunan yang sangat panjang Daripada gabungan teknologi awal yang mudah kepada rangka kerja dan perpustakaan moden, makna dan nilainya telah terus diperluas dan diperdalamkan sepanjang perjalanan. Walaupun teknologi Ajax sudah menjadi pilihan yang sangat biasa dalam pembangunan bahagian hadapan Web, pembangun masih perlu memilih penyelesaian teknikal yang paling sesuai berdasarkan senario dan keperluan aplikasi tertentu semasa penggunaan.

Atas ialah kandungan terperinci Memahami versi Ajax: Evolusi dari zaman awal hingga zaman moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!