Tutorial AJAX: Apa Itu AJAX dan Bagaimana Menggunakannya

Apa itu AJAX?

AJAX adalah singkatan dari Asynchronous JavaScript And XML . Ini bukan bahasa pemrograman. Ini adalah teknologi untuk mengembangkan Aplikasi Web yang lebih baik, lebih cepat, dan interaktif menggunakan HTML, CSS, JavaScript, dan XML.

  1. HTML: Hypertext Markup Language (HTML) digunakan untuk mendefinisikan struktur Aplikasi Web.
  2. CSS: Cascading Style Sheet (CSS) digunakan untuk memberikan tampilan dan gaya pada Aplikasi Web.
  3. JavaScript: JavaScript digunakan untuk membuat Aplikasi Web interaktif, menarik dan ramah pengguna.
  4. XML: Extensible Markup Language (XML) adalah format untuk menyimpan dan mengangkut data dari Server Web.

Apa Arti Asynchronous di AJAX?

Asinkron berarti bahwa Aplikasi Web dapat mengirim dan menerima data dari Server Web tanpa menyegarkan halaman. Proses latar belakang pengiriman dan penerimaan data dari server bersama dengan memperbarui bagian berbeda dari halaman web mendefinisikan properti / fitur Asynchronous dari AJAX.

Bagaimana AJAX bekerja

AJAX menggunakan objek XMLHttpRequest bawaan browser untuk meminta data dari Server Web dan HTML DOM untuk menampilkan atau menggunakan data.

XMLHttpRequest Object : Ini adalah API dalam bentuk objek yang metodenya membantu dalam transfer data antara web browser dan web server.

HTML DOM : Saat halaman web dimuat, browser membuat Model Objek Dokumen halaman.

Buat Objek XMLHttpRequest:

var xhttp = new XMLHttpRequest();

Properti objek XMLHttpRequest:

readystate adalah properti Objek XMLHttpRequest yang memegang status XMLHttpRequest.

  • 0: permintaan tidak diinisialisasi
  • 1: koneksi server dibuat
  • 2: permintaan diterima
  • 3: memproses permintaan
  • 4: permintaan selesai dan tanggapan siap

`` `` onreadystatechange``` adalah properti Objek XMLHttpRequest yang mendefinisikan fungsi yang akan dipanggil ketika properti readyState berubah.

`` `status``` adalah properti dari Objek XMLHttpRequest yang mengembalikan nomor-status permintaan

  • 200: "OK"
  • 403: "Terlarang"
  • 404 tidak ditemukan"

Metode Objek XMLHttpRequest: Untuk mengirim permintaan ke Server Web, kita menggunakan metode open () dan send () dari objek XMLHttpRequest.

xhttp.open("GET", "content.txt", true); xhttp.send();

Buat fungsi changeContent () menggunakan JavaScript:

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(); }

Contoh AJAX untuk mengubah konten halaman web:

The XMLHttpRequest Object

Change Content 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(); }

File tersebut content.txtharus ada di direktori root Aplikasi Web.