JavaScript XML Okuma

Yazıda JavaScript ile XML okumak için kullanılan AJAX teknolojisi ile ilgili bilgi yer almaktadır.

XML okuma

JavaScript, web sayfasını yenilemeden arka planda web sayfası isteği yapmak için AJAX isimli bir teknolojiyi kullanır.

AJAX kelimesi Asynchronous JavaScript And XML yani Eşzamanlı JavaScript ve XML kelimelerinin baş harflerinden meydana gelmektedir.

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 nesnesi 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", "XML_dosyasi.xml");
</script>

AJAX isteği sırasında XMLHttpRequest nesnesinin onloadstart, onloadend, onerror vb. olayları tetiklenir.

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

AJAX işlem durumları 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", "XML_dosyasi.xml");
</script>

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

XML işlemleri için verileri responseXML ile almak faydalı olacaktır.

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

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

      alert(this.responseXML);

    }
  }

  xhr.open("GET", "XML_dosyasi.xml");
</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) {

      alert(this.responseXML);

    }
  }

  xhr.open("GET", "XML_dosyasi.xml");
  xhr.send();
</script>

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

Sadece XML dosyası içeriğini okumak için response veya responseText özelliği kullanılabilir.

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

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

      alert(this.response);
      //alert(this.responseText);

    }
  }

  xhr.open("GET", "XML_dosyasi.xml");
  xhr.send();
</script>

AJAX işlemleri benzerlik gösterdiğinden kod tekrarını azaltmak için AJAX işlemlerini fonksiyon haline getirmek daha sonraki işlemleri kolaylaştıracaktır.

<script>
"use strict";
  function UrlAc(URL, GeriBildirim) {
    var xhr = new XMLHttpRequest();

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

        GeriBildirim(this);

      }
    }

    xhr.open("GET", URL);
    xhr.send();
  }

  UrlAc("XML_dosyasi.xml", Islemler);

  function Islemler(sonuc) {

    alert(sonuc.responseText);

  }
</script>

Diğer JavaScript XML işlemlerine JavaScript derslerinden ulaşabilirsiniz.

Hayırlı günler dilerim.

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir