AJAX 简介

Ajax adalah impian para pengembang, karena Anda dapat:

  • Perbarui halaman tanpa me-refresh halaman
  • Meminta data dari server setelah halaman dimuat
  • Dapatkan data dari server setelah halaman dimuat
  • Kirim data ke server di latar belakang

AJAX 实例

Klik tombol di bawah ini untuk memperbarui teks ini dengan Ajax:

Coba Sendiri

Penjelasan Contoh AJAX

Halaman HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Biarkan AJAX mengubah teks ini</h2>
  <button type="button" onclick="loadDoc()">Ubah teks</button>
</div>
</body>
</html>

Halaman HTML ini mengandung <div> dan <button>.

<div> Digunakan untuk menampilkan informasi dari server.

<button> Panggil fungsi (ketika ia disentuh).

Fungsi ini meminta data dari server web dan menampilkannya:

Function loadDoc()
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();
}

Apa itu AJAX?

AJAX = Asynchronous JvaScript And XML.

AJAX bukan bahasa pemrograman.

AJAX hanya gabungan:

  • Objek XMLHttpRequest baku browser (mengambil data dari pelayan web)
  • JavaScript dan HTML DOM (tunjukkan atau menggunakan data)

Ajax adalah nama yang mengecam. Aplikasi Ajax boleh menggunakan XML untuk menghantar data, tetapi penghantaran data sebagai teks biasa atau teks JSON juga umum.

Ajax memungkinkan untuk mengupdate halaman asinkron melalui pertukaran data dengan pelayan web di belakang latar. Ini berarti bahawa sebahagian daripada halaman boleh diupdate tanpa memanggil kembali seluruh halaman.

Bagaimana AJAX bekerja

AJAX
  1. Sebuah acara terjadi di halaman (pemanggilan halaman, klik tombol)
  2. Objek XMLHttpRequest dibuat oleh JavaScript
  3. Objek XMLHttpRequest menghantar permintaan kepada pelayan web
  4. Permintaan diproses oleh pelayan
  5. Respons akan dihantar kembali kepada halaman oleh pelayan
  6. Respons diambil oleh JavaScript
  7. Aksi yang benar dijalankan oleh JavaScript (seperti mengupdate halaman)