AJAX Hatalarını ve Başarı Durumlarını Ele Alma
Dayanıklı uygulamalar için .fail() ve .always() geri çağrılarıyla sağlam hata ele alma mekanizmaları uygulayın ve başarılı veri alımını .done() ile işleyin.
AJAX Hatalarını ve Başarı Durumlarını Ele Alma, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.
Asenkron Sonuçları Yönetme
Bir AJAX isteği yaptığınızda bu, asenkron bir işlemdir. Yani kodunuz sunucunun yanıtını beklemez; diğer görevleri yürütmeye devam eder.
Sunucunun yanıtını (veya yanıt vermemesini) yönetmek için jQuery, geri çağırmalar adı verilen özel yöntemler sunar. Bu işlevler yalnızca başarı ya da başarısızlık gibi belirli olaylar gerçekleştiğinde çalışır.
Her Şey Yolunda Gittiğinde
.done() geri çağırması, başarılı AJAX isteklerini yönetmek için kullanacağınız temel yöntemdir. Sunucu, başarıyı belirten bir durum koduyla (genellikle 200-299) yanıt verdiğinde çalışır.
- Sunucudan döndürülen verileri alır.
- Kullanıcı arayüzünüzü güncel bilgilerle yenilemek için ideal yerdir.
Başarılı Verileri Görüntüleme
Biraz veri alıp istek başarılı olduğunda görüntüleyelim. .done() yönteminin $.ajax() çağrısına nasıl zincirlendiğine dikkat edin.
$(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>');
});
});İşler Ters Gittiğinde
Peki ya sunucu isteğinizi yerine getiremezse? İşte bu durumda .fail() geri çağırması devreye girer. AJAX isteği 404 (Bulunamadı) veya 500 (Sunucu Hatası) gibi bir hatayla karşılaştığında çalışır.
- Kullanıcıyı bilgilendirmenize veya sorunları günlüğe kaydetmenize yardımcı olur.
- Hata hakkında ayrıntıları alır.
Başarısızlıklara Yanıt Verme
Var olmayan bir URL'den veri almayı deneyelim. .fail() geri çağırması hatayı yakalayıp ayrıntılarını günlüğe kaydeder.
$(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>');
});
});Hata Parametrelerini Çözümleme
.fail() geri çağırması, neyin yanlış gittiğini anlamanıza yardımcı olan üç kullanışlı parametre sağlar:
jqXHR: Düşük düzeyli ayrıntılar sunan jQuery XMLHttpRequest nesnesi.textStatus: Hatanın türünü açıklayan bir dize (ör. "timeout", "error", "abort").errorThrown: HTTP durum metni (ör. 404 için "Not Found").
Kullanıcılarınıza özel geri bildirimler sağlamak için bunlardan yararlanın.
Ne Olursa Olsun Her Zaman Çalışır
Bazen AJAX isteğinin başarılı veya başarısız olmasından bağımsız olarak bir işlem gerçekleştirmeniz gerekir. .always() geri çağırmasının görevi budur.
- İster
.done()ister.fail()sonrasında her zaman çalışır. - Yükleniyor simgesini gizlemek veya bir düğmeyi yeniden etkinleştirmek gibi temizleme görevleri için idealdir.
Temizleme İşlemleri Gerçekleştirme
Önceki örneğimize .always() ekleyelim. Bir yüklenme durumunu taklit edecek ve istek başarılı olsa da başarısız olsa da bu durumun kaldırılmasını sağlayacağız.
$(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)');
});
});Geri Çağırmalarınızı Düzenleme
jQuery'nin AJAX yöntemleri, Promise benzeri bir nesne döndürür ve .done(), .fail() ve .always() yöntemlerini doğrudan zincirlemenize olanak tanır.
Bu zincirleme, kodunuzu daha temiz ve okunması daha kolay hâle getirir; başarı, hata ve son işlemlere ait kod bloklarını birbirinden açıkça ayırır.
Bilginizi Sınayın
Aşağıdaki jQuery AJAX isteğini inceleyin:
$.ajax({
url: "/api/data",
method: "GET"
})
.done(function() {
console.log("A");
})
.fail(function() {
console.log("B");
})
.always(function() {
console.log("C");
});
Sunucu 404 Not Found hatasıyla yanıt verirse konsola ne yazdırılır?
AJAX Yönetimini Özetleme
Sağlam AJAX yönetimi için gerekli temel geri çağırmalarda artık ustalaştınız:
.done(): Başarılı yanıtlar için..fail(): Hataları yönetmek için..always(): Ne olursa olsun çalışması gereken işlemler için.
Bunları kullanarak uygulamalarınız ağ etkileşimlerini zarif bir şekilde yönetebilir ve işler planlandığı gibi gitmediğinde bile kullanıcılara daha iyi bir deneyim sunabilir!
Sıkça Sorulan Sorular
“AJAX Hatalarını ve Başarı Durumlarını Ele Alma” dersi ücretsiz mi?
Evet — “AJAX Hatalarını ve Başarı Durumlarını Ele Alma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.
“AJAX Hatalarını ve Başarı Durumlarını Ele Alma” dersinde ne öğreneceğim?
Dayanıklı uygulamalar için .fail() ve .always() geri çağrılarıyla sağlam hata ele alma mekanizmaları uygulayın ve başarılı veri alımını .done() ile işleyin. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.
“AJAX Hatalarını ve Başarı Durumlarını Ele Alma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- AJAX İsteklerini Etkili Şekilde Yapılandırma
- AJAX Hatalarını ve Başarı Durumlarını Ele Alma
- Etki Alanları Arası AJAX (CORS/JSONP)