JavaScript AJAX Nedir? Kullanımı

JavaScript ile web sayfasını yenilemeden arka planda veri alışverişi için kullanılan AJAX ile ilgili bilgiler yer alıyor.

AJAX nedir?

AJAX Asynchronous JavaScript And XML yani Eşzamanlı JavaScript ve XML kısaltmasıdır.

JavaScript AJAX teknolojisi web sayfalarını yenilemeden arka planda veri gönderme ve veri alma işlemleri için kullanılır.

AJAX kullanımı

AJAX istekleri XMLHttpRequest nesnesi ile yapılır.

<script>
'use strict';
  var xhr = new XMLHttpRequest();
</script>

XMLHttpRequest nesnesi çeşitli metot, olay ve özelliğe sahiptir.

XMLHttpRequest nesnesine ait open metodu AJAX isteği açmak için kullanılır.

XMLHttpRequest.open(method, url, async, user, password);

Metota ilk iki parametrenin eklenmesi yeterli olacaktır.

<script>
'use strict';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'url-adres');
</script>

AJAX isteği sırasında XMLHttpRequest nesnesine ait olaylar(onloadstart, onloadend, onerror, …) tetiklenir.

AJAX işlemleri durum her değiştiğinde tetiklenen onreadystatechange olayı içinde yapılır.

AJAX işlem durumu readyState özelliği ile kontrol edilir.

İstek başlatılmadığında readyState özelliği 0, açıldığında 1, istek gönderildiğinde 2, yüklendiğinde 3 ve tamamlandığında 4 değerini alır.

İşlemleri readyState değeri 4 ve HTTP durum kodunun 200 olması ile gerçekleştirmek olası hataları önleyecektir.

<script>
'use strict';
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {

      // işlemler

    }
  }

  xhr.open('GET', 'url-adres');
</script>

İstek sonucunda dönen değerler response, responseText ve responseXML ile alınır.

<script>
'use strict';
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {

      console.log(this.response);

    }
  }

  xhr.open('GET', 'url-adres');
</script>

AJAX isteği başlatılmadığından herhangi bir dönüş olmayacaktır.

AJAX isteği send metodu ile başlatılır.

<script>
'use strict';
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {

      console.log(this.response);

    }
  }

  xhr.open('GET', 'url-adres');
  xhr.send();
</script>

Metot ayrıca setRequestHeader metodu ile birlikte POST metoduna göre veri göndermek içinde kullanılır.

<script>
'use strict';
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {

      console.log(this.response);

    }
  }

  xhr.open('POST', 'url-adres');
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send();
</script>

NOT: İstek sırasında adresin yanlış yazılması veya tarayıcının isteği engellemesinden hata oluşabilir.

AJAX işlemleri benzerlik gösterdiğinden kod tekrarını azaltmak için AJAX işlemlerini fonksiyon haline getirmek tekrar kullanım için faydalı olacaktır.

<script>
'use strict';
  function ysAjax(url, method, data, callback) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        if (typeof callback == 'function') {
          callback(this);
        }
      }
    }

    xhr.open(method, url);
    if (method == 'POST' && !(data instanceof FormData)) {
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    xhr.send(data);
  }
</script>

Ajax ile dosya okuma örneği aşağıda yer almaktadır.

<script>
'use strict';
  ysAjax('metin.txt', 'GET', null, yazdir);

  function yazdir (sonuc) {
    console.log(sonuc.responseText);
  }
</script>

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.