Apa itu AJAX?
AJAX adalah impian pengembang, karena Anda dapat:
- Membaca data dari server web - setelah halaman web dimuat
- Perbarui halaman web tanpa memuat ulang halaman
- Kirim data ke server web - di latar belakang
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();
}
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
Tutorial AJAX Lengkap
Ini adalah deskripsi singkat tentang AJAX.
Untuk tutorial AJAX lengkap, buka Tutorial AJAX W3Schools .
Untuk lebih banyak contoh AJAX pergi ke W3Schools Contoh AJAX .