XML: Perkenalan AJAX

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

by Hanifah Nurbaeti October 20, 2020

Beberapa keuntungan AJAX sebagai berikut:

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

Section Artikel

1 Contoh AJAX pada setiap BAB
2 AJAX
3 Penjelasan Contoh AJAX
4 Apa itu AJAX?
5 Cara Kerja AJAX

Contoh AJAX pada setiap BAB

Di setiap bab, kita bisa mengedit contoh secara online dan mengklik tombol untuk melihat hasilnya.

Contoh AJAX :

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>Objek XMLHttpRequest</h1>
<button type="button" onclick="loadDoc()">Ubah Konten</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>

Berikut ini hasil jika tombol “Ubah Konten” di klik :

AJAX

AJAX bukanlah bahasa pemrograman.

AJAX adalah teknik untuk mengakses server web dari halaman web.

AJAX adalah singkatan dari Asynchronous JavaScript And XML.

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 Konten</button>
</div>

</body>
</html>

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

Bagian <div> digunakan untuk menampilkan informasi dari server.

Bagian <button> berfungsi untuk memanggil fungsi (jika di klik).

Fungsi tersebut 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();
}

“ajax_info.txt” seperti ini:

<h1> AJAX </h1>
<p> AJAX bukanlah bahasa pemrograman. </p>
<p> AJAX adalah teknik untuk mengakses server web dari halaman web. </p>
<p> AJAX adalah singkatan dari Asynchronous JavaScript And XML. </p>

Apa itu AJAX?

AJAX = JavaScript dan XML Asinkron.

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 mengangkut data, tetapi umumnya untuk mengangkut 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.