Menguasai XMLHttpRequest: Panduan untuk Panggilan AJAX dalam JavaScript

Permintaan XMLHttp untuk Panggilan AJAX

Objek XMLHttpRequest (XHR) ialah ciri teras JavaScript yang membolehkan anda menghantar dan menerima data secara tidak segerak daripada pelayan tanpa memuat semula halaman web. Ia membentuk asas AJAX (Asynchronous JavaScript and XML), yang membolehkan aplikasi web dinamik dan interaktif.

---

1. Apakah XMLHttpRequest?

XMLHttpRequest ialah API dalam JavaScript yang memudahkan komunikasi dengan pelayan melalui permintaan HTTP. Ia menyokong:

• Pendapatan semula data tanpa muat semula halaman.
• Mengendalikan pelbagai format seperti JSON, XML, HTML dan teks.
• Kedua-dua operasi segerak dan tak segerak (walaupun mod segerak ditamatkan untuk kebanyakan kes penggunaan).

---

2. Mencipta Objek XMLHttpRequest

Untuk menggunakan XHR, buat contoh objek XMLHttpRequest:

const xhr = new XMLHttpRequest();

---

3. Langkah-langkah untuk Membuat Panggilan XHR

1. Buat Objek XHR:

   const xhr = new XMLHttpRequest();

1. Mulakan Permintaan: Gunakan kaedah open() untuk menentukan kaedah HTTP, URL dan sama ada panggilan itu tidak segerak.

   xhr.open("GET", "https://api.example.com/data", true);

1. Sediakan Panggilan Balik untuk Respons: Gunakan acara onreadystatechange atau acara muatkan.

   xhr.onload = function () {
       if (xhr.status === 200) {
           console.log("Response:", xhr.responseText);
       } else {
           console.error("Error:", xhr.status, xhr.statusText);
       }
   };

1. Hantar Permintaan:

   xhr.send();

---

4. Contoh Lengkap: GET Request

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log("Data retrieved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Failed to fetch data. Status:", xhr.status);
    }
};

xhr.onerror = function () {
    console.error("Request failed due to a network error.");
};

xhr.send();

---

5. Menghantar Data dengan Permintaan POST

XHR membenarkan penghantaran data ke pelayan menggunakan POST.

Contoh:

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function () {
    if (xhr.status === 201) {
        console.log("Data saved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Error:", xhr.status);
    }
};

const data = JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1
});

xhr.send(data);

---

6. Sifat dan Kaedah XHR

Sifat Utama:

• readyState: Mewakili keadaan permintaan (0 hingga 4).

  • 0: TIDAK DIHANTAR
  • 1: DIBUKA
  • 2: HEADERS_RECEIVED
  • 3: MEMBUAT
  • 4: SELESAI

• status: Kod status HTTP (cth., 200 untuk kejayaan, 404 untuk tidak ditemui).

• responseText: Badan tindak balas sebagai rentetan teks.

• responseXML: Badan tindak balas sebagai data XML (jika berkenaan).

Kaedah Utama:

• open(method, url, async): Memulakan permintaan.
• send(data): Menghantar permintaan ke pelayan.
• setRequestHeader(header, value): Menetapkan pengepala tersuai.
• abort(): Membatalkan permintaan.

---

7. Mengendalikan Keadaan Tindak Balas

Anda boleh menggunakan acara onreadystatechange untuk memantau kemajuan permintaan XHR.

Contoh:

const xhr = new XMLHttpRequest();

---

8. Kelebihan Menggunakan XHR

• Komunikasi Asynchronous: Elakkan menyekat utas utama.
• Sokongan Silang Penyemak Imbas: Berfungsi merentas penyemak imbas moden dan lama.
• Format Data Fleksibel: Menyokong JSON, XML, HTML dan teks biasa.

---

9. Had XHR

• Sintaks Verbose: Memerlukan lebih banyak kod berbanding API moden seperti fetch.
• Neraka Panggilan Balik: Permintaan yang rumit boleh membawa kepada panggilan balik yang sangat bersarang.
• Ciri Moden Terhad: Tidak mempunyai ciri seperti Janji atau async/menunggu.

---

10. Alternatif Moden: Ambil API

Walaupun XHR masih disokong secara meluas, Fetch API menawarkan pendekatan moden berasaskan janji untuk membuat permintaan HTTP.

Contoh Ambil:

   const xhr = new XMLHttpRequest();

---

11. Kesimpulan

XMLHttpRequest ialah alat yang boleh dipercayai dan disokong dengan baik untuk membuat panggilan AJAX, tetapi API moden seperti fetch atau pustaka seperti Axios biasanya lebih disukai kerana kesederhanaan dan ciri yang dipertingkatkan. Walau bagaimanapun, memahami XHR adalah penting untuk mengekalkan kod warisan dan memperoleh pengetahuan yang lebih mendalam tentang cara komunikasi tak segerak berfungsi dalam JavaScript.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Menguasai XMLHttpRequest: Panduan untuk Panggilan AJAX dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!