Ketahui tentang kawalan Ajax yang paling popular!

Dalam pembangunan web, teknologi Ajax membenarkan komunikasi tak segerak antara halaman web dan pelayan, meningkatkan kelajuan tindak balas dan pengalaman pengguna halaman web. Kawalan Ajax ialah sejenis alat yang dibangunkan atas dasar ini, yang boleh membantu kami melaksanakan pelbagai fungsi dengan lebih mudah dan meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan dan menganalisis beberapa kawalan Ajax yang lebih biasa digunakan.

1. jQuery

jQuery ialah pustaka Javascript yang paling popular pada masa ini Sokongan Ajaxnya sangat berkuasa dan ia agak mudah digunakan. Melalui kursus di MOOC.com, kami juga boleh mempelajari beberapa penggunaan asas jQuery.

$.ajax({

url:"/api/someApi",
type:"POST",
dataType: "json",
data:{
    id:123,
    name:"test"
},
success:function(result){
    console.log(result);
},
error:function(err){
    console.log(err);
}

});

Melalui kod di atas, kita dapat melihat bahawa menggunakan jQuery untuk menulis permintaan Ajax hanya memerlukan memanggil fungsi $.ajax() dan menghantar beberapa parameter untuk mencapai komunikasi tak segerak. Antaranya, parameter seperti url, jenis, data dan dataType masing-masing mewakili URL yang diminta, jenis permintaan, parameter permintaan, jenis data permintaan, dsb. Pada masa yang sama, kejayaan dan ralat mewakili fungsi panggil balik selepas permintaan berjaya dan gagal masing-masing, yang boleh mengendalikan hasil respons dengan mudah.

2. Vue.js

Vue.js kini merupakan rangka kerja bahagian hadapan yang popular Ia bukan sahaja menyokong perpustakaan AJAXnya sendiri, tetapi juga menyokong penggunaan pustaka axios plug-in luaran. Axios bukan sahaja mempunyai beberapa ciri jQuery, seperti kemudahan dan kesederhanaan, tetapi juga mempunyai banyak fungsi berkuasa, seperti pemintas, permintaan pembatalan, dsb.

Vue.prototype.$http = axios.create({

baseURL: 'https://api.example.com/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}

});

Vue.js menyokong memuatkan pemalam Axios ke dalam contoh Vue, supaya anda boleh menggunakan Axios dalam Vue.js dengan cepat untuk melaksanakan komunikasi Ajax. Kaedah permintaan khusus adalah serupa dengan jQuery.

ini.$http.post('/api/someApi', {

id:123,
name:"test"

}).then(respons => {

console.log(response);

}, response => {

console.log(error);

});

melalui di atas Kita boleh lihat daripada kod bahawa menggunakan Vue.js dan Axios untuk menulis permintaan Ajax memerlukan pemalam Axios dimuatkan ke dalam contoh Vue sebelum menggunakan kaedahnya. Kaedah ini agak lebih kompleks daripada jQuery, tetapi ia boleh menyokong lebih banyak fungsi.

3. Ambil API

Selain jQuery dan Vue.js, terdapat cara lain untuk menggunakan Ajax, dan itu ialah Ambil asli. API Ambil membenarkan kami menggunakan Ajax tanpa menggunakan perpustakaan pihak ketiga. Kelebihan utama Fetch ialah ia menyokong Promise, dan kodnya lebih ringkas dan jelas daripada jQuery.

fetch('/api/someApi', {

method: 'POST',
body: JSON.stringify({
    id: 123,
    name: "test"
})

})
.then(respons => response.json())
.then(result => {

console.log(result);

})
.catch(error => {

console.log(error);

});

Melalui kod di atas, kita dapat melihat dengan jelas bahawa menggunakan Fetch untuk menulis permintaan Ajax hanya memerlukan memanggil fungsi fetch() dan menghantar parameter permintaan. Pada masa yang sama, mengembalikan kandungan juga sangat mudah Anda hanya perlu menggunakan fungsi then() Promise untuk memproses hasil tindak balas.

Ringkasan

Melalui pengenalan dan analisis di atas, kami tahu bahawa dalam pembangunan bahagian hadapan, menggunakan teknologi Ajax untuk komunikasi tak segerak telah menjadi trend umum, dan menguasai kemahiran kawalan Ajax tertentu boleh membantu kami melaksanakan banyak fungsi dengan lebih pantas dan meningkatkan kecekapan pembangunan . Dalam kerja sebenar, kawalan Ajax yang sesuai harus dipilih mengikut situasi tertentu untuk mencipta tapak web berkualiti tinggi.

Atas ialah kandungan terperinci Ketahui tentang kawalan Ajax yang paling popular!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!