Ajax ile post ve get işlemleri sonucunda dönen sonucun olumlu olması halinde success fonksiyonu tarafından tetiklenip sonuç alınmaktadır veya bir hata oluşma durumunda Http durumuna göre error fonksiyonu tetiklenmektedir.
Global Ajax Olay Yakalayıcıları
Bizim konumuz tam olarak her ajax işleminde gerçekleşen sonucun tek bir yerden yakalabilmesini sağlamak örnek olarak ajax işlemlerinizde yaşanan bir hatayı log’lamak için yüzlerce gerçekleştirdiğimiz ajax sınıfınıza error fonksiyonu eklemektense Global olarak .ajaxError() fonksiyonu ile yakalamanız fazla kod yazmaktan kurtaracaktır ve okunabilirliği arttıracaktır diğer bir örnek ise şöyle düşünebiliriz. Loading barı olduğunu varsayalım sayfamızda .ajaxStart() fonksiyonu ile bu loading barı gösterilir .ajaxComplete() işlemi ile tüm ajax işlemleri bittiğinde loading bar gizlenebilir şimdi bu global ajax yakalayıcılarını ve loading bar örneğimizi görelim.
Global Ajax Olay Yakalayıcıları
| Olay Yakalayıcıları | Açıklama |
|---|---|
| .ajaxComplete() | Ajax isteği tamamlandığında bu event tetiklenir. |
| .ajaxError() | Ajax isteğinizde hata oluşma durumunda bu event tetiklenir. |
| .ajaxSend() | Ajax isteğiniz gönderildiğinde bu event tetiklenir. |
| .ajaxStart() | Ajax gönderim işlemine başlandığında bu event tetiklenir. |
| .ajaxStop() | Tüm Ajax işlemleri tamamlandığında ve durdurulduğunda bu event tetiklenir. |
| .ajaxSuccess() | Ajax isteğiniz olumlu sonuçlandığında tetiklenecek event’dir. |
Örnek
Yukarıdaki tüm ajax olay yakalayıcılarını alttaki örnekte kullandım ve hangi sırayla tetiklendiğini verinin hangi aşamada işlenip işlenme aşamasından sonra hangi olayın tetiklendiğini Sonuç kısmında görebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(document).ajaxSuccess(function(res){ console.log("ajaxSuccess: Ajax sonucu başarılı"); }).ajaxComplete(function(res){ console.log("ajaxComplete: Ajax işlemleri tamamlandı"); }).ajaxError(function(res){ console.log("ajaxError: Ajax isteğinde hata"); }).ajaxSend(function(res){ console.log("ajaxSend: Ajax isteğinde gönderildi"); }).ajaxStart(function(res){ console.log("ajaxStart: Ajax isteğinde başladı"); }).ajaxStop(function(res){ console.log("ajaxStop: Ajax isteği tamamlandı ve durduruldu"); }); $.get("http://beta.json-generator.com/api/json/get/OZKYHfa", function(res){ console.log("Veriler Alındı İşleniyor: " + res); }); |
Üstteki örneğimizde jQuery kütüphanesini kullandığımız için jQuery kütühanesini projenize eklemeyi unutmayınız. global olay yakalıyıcı fonksiyonlarına tanımladığım res adlı parametre ile çeşitli parametrelere olay içerisinde ulaşabiliyorsunuz bu detaya olayı deneyerek debug aşamasında gözatabilirsiniz.
Sonuç
Üstteki sonuca Google web araçlarında yer alan Konsol sekmesinden ulaştık tabi buraya değerleri bastırmak içinde örnek kısmında yer alan console.log() fonksiyonunu kullandık. Şimdi sonucu açıklamak gerekirse aslında dikkat edilmesi gereken konu ajaxSend yani isteği gönderdikten sonra verilere ulaşıyoruz ve işliyoruz ardından ajaxSuccess global olay yakalayıcımız çalışıyor eğer istek hatalı olsaydı ajaxSuccess yerine ajaxError olay yakalayıcısı yer alacaktı.
