Pengantar AJAX: Contoh dan Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 26, 2020

AJAX adalah impian para pengembang, karena dapat:

Membaca data dari server web – setelah halaman dimuat
Perbarui halaman web tanpa memuat ulang halaman
Mengirim data ke server web – di latar belakang

Contoh AJAX:

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>Objek XMLHttpRequest</h2>
<button type="button" onclick="loadDoc()">Ubah Content</button>
</div>

<script>
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();
}
</script>

</body>
</html>

Section Artikel

1 Penjelasan Contoh AJAX
2 Fungsi loadDoc ()
3 Apa itu AJAX?
4 Bagaimana AJAX Bekerja?

Penjelasan Contoh AJAX

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Halaman HTML berisi bagian <div> dan <button>.

Bagian <div> digunakan untuk menampilkan informasi dari server.

Dan <buttom> berfungsi untuk memanggil fungsi (jika diklik).

Fungsi meminta data dari server web dan menampilkannya.

Fungsi 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 JavaScript And XML.

AJAX bukanlah bahasa pemrograman.

AJAX hanya menggunakan kombinasi dari:

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

AJAX adalah nama yang menyesatkan. Aplikasi AJAX mungkin menggunakan XML untuk transport data, tetapi umum pada transport data sebagai teks biasa atau teks JSON.

AJAX memungkinkan halaman web diperbarui secara asinkron dengan bertukar data dengan server web di belakang layar. Artinya, dimungkinkan untuk memperbarui bagian-bagian dari halaman web, tanpa memuat ulang seluruh halaman.