Laksanakan sarang ajax tanpa jquery

Teknologi AJAX ialah bahagian yang sangat penting dalam pembangunan web moden, yang membolehkan kami memuatkan kandungan, komunikasi interaktif dan pertukaran data bahagian hadapan dan belakang secara dinamik. Walau bagaimanapun, apabila teknologi terus berkembang, semakin ramai pembangun mula menggunakan JavaScript asli tanpa menggunakan perpustakaan jQuery untuk melaksanakan permintaan AJAX untuk mengelakkan kebergantungan tambahan. Walau bagaimanapun, ramai pemula belum biasa dengan kaedah melaksanakan permintaan AJAX dalam JavaScript asli, jadi artikel ini akan berkongsi petua tentang cara melaksanakan permintaan AJAX bersarang tanpa menggunakan perpustakaan jQuery.

Pengenalan AJAX

AJAX (Asynchronous JavaScript and XML) ialah teknologi berdasarkan interaksi tak segerak antara penyemak imbas dan pelayan Ia boleh membuat permintaan HTTP dan memproses respons melalui JavaScript, menjadikan bahagian hadapan-. halaman akhir menyedari komunikasi tak segerak dan keupayaan muat semula separa. Kelebihan terbesar AJAX ialah ia boleh menjadikan interaksi halaman sangat kaya, dan ia juga boleh meningkatkan prestasi tapak web.

Gunakan JS asli untuk melaksanakan permintaan AJAX bersarang

Dalam pembangunan web tradisional, kita selalunya perlu menggunakan teknologi AJAX untuk melaksanakan beberapa interaksi dengan pelayan. Kadangkala kami perlu menghantar permintaan kedua selepas permintaan AJAX pertama selesai, tetapi untuk pertimbangan pelaksanaan dan kecekapan, kami tidak mahu menggunakan perpustakaan seperti jQuery untuk melaksanakan permintaan AJAX bersarang Artikel ini akan menunjukkan cara Gunakan JavaScript asli untuk melaksanakan ini kefungsian.

1. Objek XMLHttpRequest

Apabila menulis AJAX menggunakan JavaScript asli, kita perlu menggunakan objek XMLHttpRequest, juga dikenali sebagai "XHR". Objek XMLHttpRequest boleh menghantar permintaan kepada pelayan dan menerima respons daripada pelayan. Ia boleh menyokong pelbagai kaedah HTTP, seperti GET, POST, PUT, dll.

Kod sampel adalah seperti berikut:

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'url', true); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4 && xhr.status == 200) { 
        console.log(xhr.responseText); 
    }
}; 
xhr.send();

2. Objek Promise

Promise ialah objek penting dalam ES6, yang boleh melakukan tindakan tertentu apabila asynchronous operasi selesai Kandungan, merealisasikan tugas automatik mengendalikan operasi tak segerak. Kaedah asas menggunakan Promise adalah seperti berikut:

const promise = new Promise((resolve, reject) => { 
    // 异步操作
    if (异步操作成功)
        resolve('Success');
    else
        reject('Failure');
}); 
promise.then((value) => { 
    console.log(value); 
}).catch((error) => { 
    console.error(error); 
});

3. Melaksanakan permintaan AJAX bersarang

Seterusnya, kami menggunakan Promise untuk menggabungkan berbilang permintaan AJAX untuk mencapai permintaan Asynchronous bersarang, kod sampel adalah seperti berikut:

function ajax(url) { 
    return new Promise(function (resolve, reject) { 
        var xhr = new XMLHttpRequest(); 
        xhr.open('GET', url, true); 
        xhr.onreadystatechange = function() { 
            if (xhr.readyState === 4 && xhr.status == 200) { 
                resolve(xhr.responseText); 
            } 
        }; 
        xhr.send(); 
    }); 
} 

ajax('url1').then(function(result1) { 
    return ajax('url2' + result1); 
}).then(function(result2) { 
    return ajax('url3' + result2); 
}).then(function(result3) { 
    console.log(result3); 
}).catch(function(error) { 
    console.error(error); 
});

Dalam kod di atas, kami mula-mula mentakrifkan fungsi ajax, yang menggunakan Promise untuk merangkum proses XMLHttpRequest melaksanakan permintaan tak segerak, dan kemudian akses url1 dalam urutan, dan hasil akses ialah digunakan seperti semasa mengakses Parameter url2, akses bersarang berbilang alamat URL mengikut urutan.

Pada ketika ini, kami telah berjaya melaksanakan permintaan AJAX bersarang menggunakan JavaScript asli, mencapai operasi tak segerak yang elegan tanpa bergantung pada perpustakaan luaran seperti jQuery. Kaedah ini mempunyai kelebihan besar dari segi pengoptimuman prestasi penulisan dan sekatan persekitaran, dan juga merupakan titik kemahiran penting yang tidak boleh diabaikan dalam pembangunan web.

Atas ialah kandungan terperinci Laksanakan sarang ajax tanpa jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!