Javascript

Pengantar AJAX: Contoh dan Codenya

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" >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>

Penjelasan Contoh AJAX

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Biarkan AJAX mengubah teks ini</h2>
  <button type="button" >

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.

Bagaimana AJAX Bekerja?

1. Event terjadi di halaman web (halaman dimuat, tombol diklik)

2. Objek XMLHttpRequest dibuat dengan JavaScript

3. Objek XMLHttpRequest mengirimkan permintaan ke server web

4. Server memproses permintaan tersebut

5. Server mengirimkan respon kembali ke halaman web

6. Respon dibaca oleh JavaScript

7. Tindakan yang tepat (seperti pembaruan halaman) dilakukan oleh JavaScript


Catur Kurnia Sari

Share
Tags: AJAXjavascript