Pengenalan AJAX
AJAX adalah impian pengembang, karena Anda dapat:
- Perbarui halaman web tanpa memuat ulang halaman
- Minta data dari server - setelah halaman dimuat
- Terima data dari server - setelah halaman dimuat
- Kirim data ke server - di latar belakang
Coba Sendiri Contoh di Setiap Bab
Di setiap bab, Anda dapat mengedit contoh secara online, dan mengklik tombol untuk melihat hasilnya.
Contoh AJAX
Let AJAX change this text
Contoh AJAX Dijelaskan
Halaman HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
Halaman HTML berisi bagian <div> dan <button>.
Bagian <div> digunakan untuk menampilkan informasi dari server.
<button> memanggil fungsi (jika diklik).
Fungsi meminta data dari server web dan menampilkannya:
Fungsi memuatDoc()
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();
}
File "ajax_info.txt" yang digunakan dalam contoh di atas, adalah file teks sederhana dan terlihat seperti ini:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Apa itu AJAX?
AJAX = J avaScript A dan X ML yang sinkron .
AJAX bukan 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 sama umum 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. Ini berarti dimungkinkan untuk memperbarui bagian halaman web, tanpa memuat ulang seluruh halaman.
Bagaimana AJAX Bekerja
- 1. Suatu peristiwa terjadi di halaman web (halaman dimuat, tombol diklik)
- 2. Objek XMLHttpRequest dibuat oleh JavaScript
- 3. Objek XMLHttpRequest mengirimkan permintaan ke server web
- 4. Server memproses permintaan
- 5. Server mengirimkan tanggapan kembali ke halaman web
- 6. Responsnya dibaca oleh JavaScript
- 7. Tindakan yang tepat (seperti pembaruan halaman) dilakukan oleh JavaScript