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 kullanılmaktalar. Es6 ile birlikte promise yapısı ve async&await geldi.

AJAX

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

Veriler JSON veya Xml olarak gelebiliyor. 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). Tüm modern tarayıcılar XmlHttpRequest nesnesine sahiptir. XmlHttpRequest objemizin altında çeşitli methodlar bulunmaktadır.

readystate, response , responsetext, status vb.

Biz bu objeye onreadystatechange methodunu baglarsak state’mizde  herhangi bir değişiklik oldugunda onreadystatechange methodumuza düşer.
State 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 baglantı 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 oldugu için 200 sonuçları döner.

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
console.log(Status : this.status);
console.log(ReadyState : this.readystate);
if(this.status ==200 && this.readystate ==4){
console.log(if’in içi : this.responseText);
}
}

xhr.open(“GET”,”URL”,true); // true değeri async mı senkron mu onu belirliyor.
xhr.send();

Ç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() methodu 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.

xhr.onload = function() {
console.log(this.readystate);
if(this.status ===200) {
console.log(this.responseText)
}
}

Çı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.

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open(“GET”, “ajax_info.txt”, false);
xhttp.send();
console.log(xhttp.responseText);
}