Ringkasan AJAX

AJAX adalah impian para pengembang, karena Anda dapat:

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

Contoh 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 Tekst</button>
</div>
</body>
</html>

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

<div> untuk menampilkan informasi dari server.

<button> Panggil fungsi (ketika di klik).

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 kombinasi dari:

  • Objek XMLHttpRequest bawaan browser (mengambil data dari server web)
  • JavaScript dan HTML DOM (menampilkan atau menggunakan data)

Ajax adalah nama yang menyesatkan. Aplikasi Ajax dapat menggunakan XML untuk mentransfer data, tetapi pengiriman data sebagai teks bersih atau teks JSON juga umum terjadi.

Ajax memungkinkan pengupdatean asinkron halaman web melalui pertukaran data dengan server web di belakang latar. Ini berarti bagian halaman web dapat diupdate tanpa memanggil kembali seluruh halaman.

Bagaimana AJAX bekerja

AJAX
  1. Sebuah peristiwa terjadi di halaman web (pemanggilan halaman, klik tombol)
  2. Objek XMLHttpRequest dibuat oleh JavaScript
  3. Objek XMLHttpRequest mengirimkan permintaan ke server web
  4. Server menangani permintaan ini
  5. Server mengirimkan respons kembali ke halaman
  6. Respons dibaca oleh JavaScript
  7. Aksi yang benar dilakukan oleh JavaScript (seperti pembaruan halaman)