Bagaimanakah Saya Boleh Membuat Panggilan AJAX Hanya Menggunakan JavaScript Vanila?

Membuat Panggilan AJAX Tanpa jQuery: Meneroka Pendekatan JavaScript Vanila

Membuat panggilan AJAX tanpa jQuery ialah keperluan biasa bagi pembangun yang ingin memanfaatkan kuasa komunikasi tak segerak tanpa bergantung pada perpustakaan pihak ketiga yang luas. Berikut ialah penerokaan terperinci tentang cara untuk mencapai ini menggunakan JavaScript biasa:

Vanilla JavaScript XHR Object

Objek XMLHttpRequest (XHR) ialah asas kepada panggilan AJAX dalam JavaScript vanila . Untuk bermula, nyatakan objek XHR menggunakan pembina XMLHttpRequest() baharu.

Fungsi Pengendalian dan Panggil Balik Peristiwa

Seterusnya, tentukan pendengar acara yang memantau keadaan objek XHR (readyState). Apabila keadaan beralih kepada XMLHttpRequest.DONE (biasanya 4), ia menandakan bahawa permintaan telah selesai.

Permintaan HTTP dan Pemprosesan Respons

Kaedah open() dimulakan permintaan HTTP, menyatakan kaedah permintaan (cth., GET, POST), URL sasaran dan sama ada permintaan itu harus tidak segerak (ditetapkan kepada benar untuk AJAX). Kaedah send() menghantar permintaan.

Setelah menerima respons, nilaikan sifat status objek XHR. Kod status 200 menunjukkan permintaan yang berjaya, manakala kod lain (seperti 400 atau 500) menunjukkan ralat. Kendalikan senario ini dengan sewajarnya.

Kod Contoh

Coretan kod berikut menunjukkan cara membuat dan memproses panggilan AJAX menggunakan JavaScript vanila:

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}

Kesimpulan

Memahami cara membuat Panggilan AJAX tanpa jQuery mengembangkan kit alat anda sebagai pembangun. Dengan memanfaatkan objek JavaScript XHR vanila, anda memperoleh kawalan sepenuhnya ke atas proses komunikasi tak segerak, membolehkan pemindahan data yang fleksibel dan cekap dalam aplikasi web.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Panggilan AJAX Hanya Menggunakan JavaScript Vanila?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!