Javascript 14 — Ajax

Asenkron yapılar için kullanabileceklerimiz ;

• Ajax
• Fetch, Axios
• Node.js

Ajax diğer teknolojilere göre eski bir yapıya sahiptir. Es6 öncesinde callback’lar vardı. Eski olmasına rağmen hala callback methodlar kullanılmaktalar. Es6 ile birlikte promise yapısı ve async&await geldi.
Ben mantığı anlamak açısından Ajax ile başlıcam daha sonra yeni teknolojilerde aynı örnekleri yapıcam.

AJAX

Ajax acılımı Asynchronous Javascript and Xml.
AJAX bir programlama dili değildir. Veri alma ve veri gönderme işlemlerini asenkron olarak yapar.
Web sayfaları için hiç bekletmeden arka plandan (asenkron olarak) sayfaların yenilenmesine gerek kalmadan veri gönderip alabilmeyi sağlıyor.

Veriler JSON veya Xml formatında olabiliyor. Tüm işlemler sayfa yenilenmesine gerek kalmadan arka planda yapılıyor.

XHR (XmlHttpRequest) objesini kullanarak bu işlemleri yapıyoruz. Internet explorer’in eski sürümleri için ActiveX objesini kullanmalıyız.(XmlHttpRequest yerine). Zaten tüm modern tarayıcılar XmlHttpRequest nesnesine sahiptir. XmlHttpRequest objemizin altında çeşitli methodlar bulunmaktadır.

readystate, response , responsetext, status vb.

Biz XHR objesine onreadystatechange methodunu bağlarsak state’mizde herhangi bir değişiklik olduğunda onreadystatechange methodumuza düşer.
State ise 0,1,2,3,4 şeklinde değerler alıyor.

• 0 → Herhangi bir istekte bulunulmadı.
• 1 → Serverla connection kuruldu.
• 2 → Request ulaştı.
• 3 → Request alındı ve işleniyor.
• 4 → Request bitti ve response döndü.

Örneğin ;

Bir server’a rest atınca(çalışan bir service) 4 defa yanıt döner. 1,2,3,4 stateleri için. Ayrıca bu yanıtlar da sırasıyla status olarak bir tane 0 , 3 tane 200 gelir.
İlk başta readystate 1 oldugunda sadece bağlantı kurulmuş olur. Herhangi bir request yollamadığımız için status’umuz 0 doner. Diğer durumlarda(2,3,4 stateleri) request atabildik yani böyle bir url de olduğu için 200 sonuçları döner.

ÇIKTI :

Status : 0
ReadyState : 1
Status : 200
ReadyState : 2
Status : 200
ReadyState : 3
Status : 200
ReadyState : 4
if’in içi : restin sonucu

Ancak böyle bir method bağlamak(onreadystatechange) eski ve gereksiz olarak birden fazla kez değer döner. Biz mecburen bu durumu if check’lerle kontrol ederiz.
Bunun yerine sadece response hazır oldugunda çalışacak olan onload() methodunu kullanabiliriz.
Bu methoda sadece readystate 4 oldugunda girecektir. Ancak sonuç hatalı dönebilir. Mesela ; state 4 olur yani request döner ancak hata atabilir , hatalı durumu tespit etmek gerekir. Burada hata atmaktan kasıt ; url kırık olabilir veya sonuç dönerken service de yapılan işlemler sırasında hata alınmış olabilir. Biz sadece hatasız durumda sonucu almak istersek status’e göre ayrı bir kontrol çakmalıyız.

Çıktı :

4

Response

İhtiyaca göre readystate 3 oldugunda çalışacak olan onprogress() methodu da vardır. Yani request alındı ve işleniyor böyle bir duruma ihtiyacımız var ise
onprogress() methodu kullanılabilir.

Son olarak Ajax’ı senkron olarak kullanmak pek önerilmez. (XmlHttpRequest (async=false) ). Çünkü sunucu yanıt dönene kadar JS’in çalışması durur.

Eğer olurda senkron olarak Ajax’ı kullanırsak onreadystatechange() veya onload() methoduna gerek yoktur. Kod bloğumuzda zaten sunucudan gelecek olan response’u beklenecek ve sonraki satırlara ilerlemeyeceği için direk sonucu yazdırabiliriz. Zaten response işlemler bittikten sonra dönecektir.

Makalelerimin tamamına erişmek isteyen arkadaşlar için hepsinin linkinin bulunduğu bir tutorial hazırladım. Aşağıdaki linkte paylaşıyorum.

https://medium.com/@omercelikceng/javascript-makalelerimin-tamam%C4%B1-45a71ac3b386