AJAX: Asynchronous JavaScript And XML

0
33
Baraja Coding

AJAX (Asynchronous JavaScript And XML) bukanlah bahasa pemrograman, melainkan teknologi yang digunakan untuk mengembangkan aplikasi web yang lebih baik, lebih cepat, dan interaktif menggunakan HTML, CSS, JavaScript, dan XML. AJAX memungkinkan Anda untuk mengirim dan menerima data dari server secara asinkron.

Bagaimana AJAX Bekerja

Berikut adalah cara kerja AJAX:

  1. Sebuah event terjadi di halaman web (halaman dimuat, tombol diklik).
  2. Objek XMLHttpRequest dibuat oleh JavaScript.
  3. Objek XMLHttpRequest mengirim permintaan ke server web.
  4. Server memproses permintaan tersebut.
  5. Server mengirim respons kembali ke halaman web.
  6. Respons dibaca oleh JavaScript.
  7. Tindakan yang tepat (seperti pembaruan halaman) dilakukan oleh JavaScript.

Komponen AJAX

AJAX adalah kumpulan teknologi yang saling terkait seperti JavaScript, DOM, XML, HTML/XHTML, CSS, dan XMLHttpRequest. AJAX memungkinkan Anda untuk mengirim dan menerima data secara asinkron tanpa harus memuat ulang halaman web. Jadi, AJAX cepat.

Penerapan AJAX

Contoh aplikasi yang menggunakan AJAX adalah Gmail, Google Maps, Youtube, dan tab Facebook. Pengguna dapat terus menggunakan aplikasi sementara program klien meminta informasi dari server di latar belakang.

AJAX dan jQuery

jQuery, sebuah library JavaScript populer, menyediakan metode .ajax() yang memudahkan penggunaan AJAX. Metode ini melakukan permintaan HTTP asinkron (Ajax) dan mengembalikan objek jqXHR.

Membuat Objek AJAX

Berikut adalah cara membuat objek AJAX:

JavaScript

var xhr = new XMLHttpRequest();

Objek XMLHttpRequest memiliki beberapa properti dan metode yang digunakan untuk menangani permintaan dan respons HTTP.

Properti Objek XMLHttpRequest

  • readyState: Menyimpan status dari XMLHttpRequest. Nilai ini bisa berubah dari 0 sampai 4, di mana 0 berarti permintaan belum diinisialisasi, 1 berarti koneksi server telah dibuat, 2 berarti permintaan diterima, 3 berarti permintaan sedang diproses, dan 4 berarti permintaan selesai dan respons siap.
  • status: Mengembalikan status-number dari permintaan. Misalnya, 200 berarti “OK”, 403 berarti “Forbidden”, dan 404 berarti “Not Found”.

Metode Objek XMLHttpRequest

  • open(method, url, async): Menentukan jenis permintaan, URL tujuan, dan apakah permintaan harus ditangani secara asinkron atau tidak.
  • send(): Mengirim permintaan ke server.

Contoh Penggunaan AJAX

Berikut adalah contoh penggunaan AJAX untuk mengubah konten halaman web:

HTML

<!DOCTYPE html>
<html>
<body>
<div id="foo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="changeContent()">Change Content</button>
</div>
<script>
function changeContent() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("foo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
}
</script>
</body>
</html>

Pada contoh di atas, kita mengambil data dari server dengan metode GET. Lalu hasilnya langsung dimasukkan ke dalam elemen <div id="foo">.

AJAX memungkinkan pengembangan aplikasi web yang lebih cepat dan interaktif. Dengan AJAX, halaman web dapat diperbarui secara asinkron dengan bertukar data dengan server web di belakang layar. Ini berarti bahwa dimungkinkan untuk memperbarui bagian dari halaman web, tanpa memuat ulang seluruh halaman.