Ringkasan AJAX

Apa itu AJAX, impian para pengembang karena Anda dapat:

  • Perbarui halaman tanpa me-refresh halaman
  • Minta 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> Digunakan untuk menampilkan informasi dari server.

<button> Pemanggilan fungsi (ketika disentuh).

Fungsi ini mengirimkan permintaan data ke 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 mengecam. Aplikasi Ajax mungkin menggunakan XML untuk mentransfer data, tetapi pengiriman data sebagai teks asli atau teks JSON juga umum terjadi.

Ajax memungkinkan untuk memperbarui halaman asinkron dengan mengganti data yang dihubungkan dengan server web. Ini berarti bagian halaman dapat diperbarui 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 mengirim permintaan ke server web
  4. Server menangani permintaan ini
  5. Server mengirimkan tanggapan kembali ke halaman
  6. Respons dibaca oleh JavaScript
  7. Aksi yang benar dilakukan oleh JavaScript (seperti memperbarui halaman)