Mendedahkan kuasa Ajax

Fungsi Ajax didedahkan, contoh kod khusus diperlukan

Ajax (Asynchronous JavaScript dan XML) ialah teknologi yang digunakan untuk interaksi data tak segerak pada halaman web. Ia membolehkan anda berinteraksi dengan pelayan, mendapatkan data dan mengemas kini bahagian tertentu halaman web tanpa menyegarkan keseluruhan halaman. Kemunculan Ajax memainkan peranan penting dalam meningkatkan pengalaman pengguna, meningkatkan dinamik dan kelajuan tindak balas halaman web. Artikel ini akan mendedahkan fungsi Ajax dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakannya dengan lebih baik.

Pertama, mari kita lihat penggunaan asas Ajax. Dalam halaman HTML, permintaan tak segerak boleh dihantar melalui objek XMLHttpRequest JavaScript. Berikut ialah contoh kod ringkas:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Kod di atas mula-mula mencipta objek XMLHttpRequest, dan kemudian menetapkan fungsi panggil balik onreadystatechange, yang akan dipanggil apabila pelayan mengembalikan respons. Apabila readyState ialah 4 (menunjukkan bahawa respons pelayan telah selesai) dan status ialah 200 (menunjukkan kejayaan), kod akan memaparkan data yang dikembalikan oleh pelayan dalam id daripada elemen demo . onreadystatechange，该函数会在服务器返回响应时被调用。当readyState为4（表示服务器响应已完成）且status为200（表示成功）时，代码会将服务器返回的数据展示在id为demo的元素内。

接下来，我们将看到Ajax的一个重要特性——实现动态加载内容。通过Ajax，我们可以在不刷新整个页面的情况下，从服务器加载其他页面的内容。下面是一个利用Ajax实现动态加载内容的示例：

function loadContent() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML = this.responseText;
    }
  };
  var pageUrl = "news.html";
  xhttp.open("GET", pageUrl, true);
  xhttp.send();
}

上述代码中，通过XMLHttpRequest对象发送了一个GET请求，其中pageUrl变量为将要加载的页面的URL。服务器返回的页面内容将被显示在id为content的元素内。

另外，Ajax还可以与服务器进行数据交互，使得网页能够在不刷新的情况下实时更新数据。下面是一个通过Ajax实现实时获取服务器数据的示例：

function updateData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      document.getElementById("data").innerHTML = data.value;
    }
  };
  var url = "data.json";
  xhttp.open("GET", url, true);
  xhttp.send();
}

// 每隔一段时间调用updateData函数
setInterval(updateData, 5000); // 每5秒更新一次

通过上述代码，页面会每隔5秒从服务器上获取一次数据，然后将数据展示在id为data的元素内。这样就实现了实时更新数据的效果。

除了GET请求外，Ajax也支持POST请求。POST请求常用于提交表单数据到服务器。下面是一个使用Ajax发送POST请求的示例：

function postData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      document.getElementById("result").innerHTML = response;
    }
  };
  var data = new FormData();
  data.append('username', 'john');
  data.append('password', '123456');
  xhttp.open("POST", "login.php", true);
  xhttp.send(data);
}

上述代码中，FormData

Seterusnya, kita akan melihat ciri penting Ajax - pemuatan kandungan yang dinamik. Melalui Ajax, kami boleh memuatkan kandungan halaman lain dari pelayan tanpa menyegarkan keseluruhan halaman. Berikut ialah contoh penggunaan Ajax untuk memuatkan kandungan secara dinamik:

rrreee

Dalam kod di atas, permintaan GET dihantar melalui objek XMLHttpRequest, di mana pembolehubah pageUrl adalah halaman yang akan dimuatkan. Kandungan halaman yang dikembalikan oleh pelayan akan dipaparkan dalam elemen dengan id kandungan.

Selain itu, Ajax juga boleh berinteraksi dengan pelayan untuk data, membolehkan halaman web mengemas kini data dalam masa nyata tanpa menyegarkan. Berikut ialah contoh mendapatkan data pelayan dalam masa nyata melalui Ajax: 🎜rrreee🎜Dengan kod di atas, halaman akan memperoleh data daripada pelayan setiap 5 saat, dan kemudian memaparkan data dalam elemen dengan id data Di dalam. Ini mencapai kesan mengemas kini data dalam masa nyata. 🎜🎜Selain permintaan GET, Ajax juga menyokong permintaan POST. Permintaan POST sering digunakan untuk menyerahkan data borang ke pelayan. Berikut ialah contoh penggunaan Ajax untuk menghantar permintaan POST: 🎜rrreee🎜Dalam kod di atas, objek FormData digunakan untuk menyimpan data yang perlu dihantar. Apabila parameter ketiga dalam fungsi terbuka ditetapkan kepada benar, permintaan akan menjadi tak segerak, iaitu permintaan Ajax. 🎜🎜Melalui contoh kod di atas, saya percaya pembaca akan mempunyai pemahaman yang lebih mendalam tentang fungsi Ajax. Perlu dinyatakan bahawa untuk memastikan keserasian pelayar, perpustakaan JavaScript seperti jQuery boleh digunakan untuk memudahkan operasi Ajax. 🎜🎜Untuk meringkaskan, Ajax berkuasa dan boleh membantu kami memuatkan kandungan secara dinamik, mendapatkan data pelayan dalam masa nyata dan menyerahkan borang. Dengan menggunakan Ajax, kami boleh meningkatkan interaktiviti dan kelajuan tindak balas halaman web dan memberikan pengguna pengalaman yang lebih baik. Saya harap contoh kod khusus dalam artikel ini dapat membantu pembaca memahami dan menggunakan teknologi Ajax dengan lebih baik. 🎜

Atas ialah kandungan terperinci Mendedahkan kuasa Ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!