Mengendalikan Ralat dan Kejayaan AJAX
Laksanakan mekanisme pengendalian ralat yang kukuh dengan panggilan balik .fail() dan .always(), serta proses pengambilan data yang berjaya dengan .done() untuk aplikasi yang tahan lasak.
Mengendalikan Ralat dan Kejayaan AJAX ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran jQuery Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.
Mengendalikan Hasil Tak Segerak
Apabila Anda membuat permintaan AJAX, operasi itu bersifat tak segerak. Ini bermakna kod Anda tidak menunggu respons daripada pelayan; kod tersebut terus melaksanakan tugas lain.
Untuk mengendalikan balasan pelayan (atau ketiadaan balasan), jQuery menyediakan kaedah khas yang dipanggil fungsi panggil balik. Fungsi ini hanya dijalankan apabila peristiwa tertentu berlaku, seperti kejayaan atau kegagalan.
Apabila Semuanya Berjalan Lancar
Fungsi panggil balik .done() ialah pilihan utama Anda untuk mengendalikan permintaan AJAX yang berjaya. Fungsi ini dilaksanakan apabila pelayan memberikan respons dengan kod status yang menunjukkan kejayaan (biasanya 200-299).
- Fungsi ini menerima data yang dikembalikan oleh pelayan.
- Fungsi ini amat sesuai untuk mengemas kini antara muka pengguna Anda dengan maklumat terkini.
Memaparkan Data yang Berjaya Diterima
Mari kita dapatkan beberapa data dan paparkannya apabila permintaan berjaya. Perhatikan bahawa .done() dirangkaikan dengan panggilan $.ajax().
$(document).ready(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
method: "GET"
})
.done(function(data) {
console.log("Success! Data received:");
console.log(data.title); // Access a property
$('body').append('<p>Post Title: ' + data.title + '</p>');
});
});Apabila Berlaku Masalah
Namun, bagaimana jika pelayan tidak dapat memenuhi permintaan Anda? Di sinilah fungsi panggil balik .fail() digunakan. Fungsi ini dijalankan apabila permintaan AJAX mengalami ralat, seperti 404 (Tidak Ditemui) atau 500 (Ralat Pelayan).
- Fungsi ini membantu Anda memaklumkan pengguna atau merekodkan masalah.
- Fungsi ini menerima butiran tentang ralat tersebut.
Memberi Respons terhadap Kegagalan
Mari kita cuba mendapatkan data daripada URL yang tidak wujud. Fungsi panggil balik .fail() akan menangkap ralat tersebut dan merekodkan butirannya.
$(document).ready(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/nonexistent", // This URL will fail
method: "GET"
})
.done(function(data) {
console.log("This won't run on error.");
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log("Error! Status: " + textStatus);
console.log("HTTP Error: " + errorThrown);
$('body').append('<p>Error fetching data!</p>');
$('body').append('<p>Status: ' + textStatus + '</p>');
});
});Mentafsir Parameter Ralat
Fungsi panggil balik .fail() menyediakan tiga parameter berguna untuk membantu Anda memahami perkara yang berlaku:
jqXHR: Objek jQuery XMLHttpRequest yang memberikan butiran peringkat rendah.textStatus: Rentetan yang menerangkan jenis ralat (contohnya, "timeout", "error", "abort").errorThrown: Teks status HTTP (contohnya, "Not Found" untuk 404).
Gunakan parameter ini untuk memberikan maklum balas khusus kepada pengguna Anda.
Sentiasa Berjalan, Walau Apa Pun
Kadangkala, Anda perlu melaksanakan tindakan tanpa mengira sama ada permintaan AJAX berjaya atau gagal. Inilah tugas fungsi panggil balik .always().
- Fungsi ini sentiasa dilaksanakan selepas sama ada
.done()atau.fail(). - Sesuai untuk tugas pembersihan seperti menyembunyikan pemutar pemuatan atau mengaktifkan semula butang.
Melaksanakan Pembersihan
Mari kita tambahkan .always() pada contoh sebelumnya. Kita akan mensimulasikan keadaan pemuatan dan memastikan keadaan itu dibuang sama ada permintaan berjaya atau gagal.
$(document).ready(function() {
$('body').append('<p id="status">Loading data...</p>'); // Simulate loading
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1", // Try changing to 'nonexistent' to see fail+always
method: "GET"
})
.done(function(data) {
console.log("Success! Data: " + data.title);
$('#status').text('Data loaded successfully!');
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log("Failed! " + textStatus);
$('#status').text('Failed to load data!');
})
.always(function() {
console.log("Request finished (success or failure).");
// This could be where you hide a spinner or re-enable a button
$('#status').append(' (Finished)');
});
});Menyusun Fungsi Panggil Balik Anda
Kaedah AJAX jQuery mengembalikan objek yang seakan janji, yang membolehkan Anda merangkaikan kaedah .done(), .fail() dan .always() secara langsung.
Perangkaian ini menjadikan kod Anda lebih kemas dan mudah dibaca, serta memisahkan blok logik kejayaan, ralat dan akhir dengan jelas.
Uji Pengetahuan Anda
Pertimbangkan permintaan AJAX jQuery berikut:
$.ajax({
url: "/api/data",
method: "GET"
})
.done(function() {
console.log("A");
})
.fail(function() {
console.log("B");
})
.always(function() {
console.log("C");
});
Jika pelayan memberikan respons dengan ralat 404 Not Found, apakah yang akan dicetak pada konsol?
Merumuskan Pengendalian AJAX
Anda telah menguasai fungsi panggil balik penting untuk pengendalian AJAX yang mantap:
.done(): Untuk respons yang berjaya..fail(): Untuk mengendalikan ralat..always(): Untuk tindakan yang perlu dijalankan walau apa pun yang berlaku.
Dengan menggunakannya, aplikasi Anda boleh mengendalikan interaksi rangkaian dengan baik, lalu memberikan pengalaman yang lebih baik kepada pengguna walaupun perkara tidak berjalan seperti yang dirancang!
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 22
- Pelajaran
- 48
Soalan Lazim
Adakah pelajaran “Mengendalikan Ralat dan Kejayaan AJAX” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Mengendalikan Ralat dan Kejayaan AJAX”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.
Apakah yang akan saya pelajari dalam “Mengendalikan Ralat dan Kejayaan AJAX”?
Laksanakan mekanisme pengendalian ralat yang kukuh dengan panggilan balik .fail() dan .always(), serta proses pengambilan data yang berjaya dengan .done() untuk aplikasi yang tahan lasak. Anda berlatih jQuery Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan jQuery Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran jQuery Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 3.
Berapa lamakah pelajaran “Mengendalikan Ralat dan Kejayaan AJAX” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran jQuery Academy ini?
Ya. Setiap pelajaran jQuery Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Mengkonfigurasi Permintaan AJAX dengan Berkesan
- Mengendalikan Ralat dan Kejayaan AJAX
- AJAX Rentas Domain (CORS/JSONP)