Tutorial AJAX: Apa itu AJAX dan Cara Menggunakannya

Pengaturcaraan

Apa itu AJAX?

AJAX bermaksud JavaScript dan XML Asinkron . Ia bukan bahasa pengaturcaraan. Ini adalah teknologi untuk mengembangkan Aplikasi Web yang lebih baik, cepat dan interaktif menggunakan HTML, CSS, JavaScript dan XML.

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

Apakah maksud Asynchronous dalam AJAX?

Asinkron bermaksud bahawa Aplikasi Web dapat menghantar dan menerima data dari Pelayan Web tanpa memuat semula halaman. Proses latar belakang menghantar dan menerima data dari pelayan bersama-sama dengan mengemas kini bahagian yang berlainan dari laman web menentukan sifat / ciri Asynchronous dari AJAX.

Bagaimana AJAX berfungsi

AJAX menggunakan objek XMLHttpRequest bawaan penyemak imbas untuk meminta data dari Pelayan Web dan DOM HTML untuk memaparkan atau menggunakan data.

Objek XMLHttpRequest : Ini adalah API dalam bentuk objek yang kaedahnya membantu dalam pemindahan data antara penyemak imbas web dan pelayan web.

HTML DOM : Apabila halaman web dimuat, penyemak imbas membuat Model Objek Objek Dokumen halaman.

Buat Objek XMLHttpRequest:

var xhttp = new XMLHttpRequest();

Sifat objek XMLHttpRequest:

readystate adalah harta benda XMLHttpRequest yang memegang status XMLHttpRequest.

  • 0: permintaan tidak dimulakan
  • 1: sambungan pelayan dibuat
  • 2: permintaan diterima
  • 3: memproses permintaan
  • 4: permintaan selesai dan respons sudah siap

"onreadystatechange" adalah harta benda XMLHttpRequest yang menentukan fungsi yang akan dipanggil ketika properti siapState berubah.

"Status" adalah harta Objek XMLHttpRequest yang mengembalikan status-status permintaan

  • 200: "OK"
  • 403 Terlarang"
  • 404: "Tidak Ditemui"

Kaedah Objek XMLHttpRequest: Untuk mengirim permintaan ke Pelayan Web, kami menggunakan kaedah terbuka () dan mengirim () objek XMLHttpRequest.

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

Buat perubahan fungsiContent () 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 menukar kandungan 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(); }

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