XML

XML: Perkenalan AJAX

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

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

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:

  1. Objek XMLHttpRequest bawaan browser (untuk meminta data dari server web)
  2. 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.

Cara Kerja AJAX

  1. Suatu peristiwa 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
  5. Server mengirimkan respon kembali ke halaman web
  6. Responnya dibaca oleh JavaScript
  7. Tindakan yang tepat (seperti pembaruan halaman) dilakukan oleh JavaScript


Hanifah Nurbaeti

Share
Tags: AJAXXML