AJAX 简介

Apa itu impian para pengembang, karena Anda dapat:

  • Perbarui halaman tanpa me-refresh halaman
  • Meminta data dari server setelah halaman dimuat
  • Terima data dari server setelah halaman dimuat
  • Kirim data ke server di latar belakang

AJAX 实例

Klik tombol di bawah ini untuk memperbarui teks ini dengan Ajax:

Coba sendiri

Penjelasan Contoh AJAX

Halaman HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Biarkan AJAX mengubah teks ini</h2>
  <button type="button" onclick="loadDoc()">Ubah teks</button>
</div>
</body>
</html>

Halaman HTML ini mengandung <div> dan <button>.

<div> untuk menampilkan informasi dari server.

<button> Panggil fungsi (ketika ia di klik).

Fungsi ini meminta data dari server web dan menampilkannya:

Function 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 JvaScript And XML.

AJAX bukan bahasa pemrograman.

AJAX hanya gabungan dari:

  • Objek XMLHttpRequest bawaan browser (mengajukan data dari server web)
  • JavaScript dan HTML DOM (menampilkan atau menggunakan data)

Ajax adalah nama yang menarik. Aplikasi Ajax mungkin menggunakan XML untuk mengirim data, tetapi pengiriman data sebagai teks asli atau teks JSON juga umum terjadi.

Ajax memungkinkan pengupdatean asinkron halaman web melalui pertukaran data dengan server web di belakang latar. Ini berarti bagian halaman dapat diupdate tanpa perlu menggelincir halaman keseluruhan lagi.

Bagaimana AJAX bekerja

AJAX
  1. Sebuah acara terjadi di halaman (pemuat halaman, klik tombol)
  2. Objek XMLHttpRequest dibuat oleh JavaScript
  3. Objek XMLHttpRequest mengirim permintaan ke server web
  4. Server mengolah permintaan
  5. Server mengirim tanggapan kembali ke halaman
  6. Membaca tanggapan oleh JavaScript
  7. Melakukan tindakan yang benar oleh JavaScript (seperti mengupdate halaman)