Mustafa Çağatay KIZILTAN

10. Xml – Javascript bağlantısı

XML ile javascript bağlantısı kurup xml verileri üzerinde işlem yapmamız ve onları html sayfamızda sunmamız gerekebilir. Bunun için aşama aşama aşağıdaki yolları izlemeliyiz.

1. Xml verisi javascript içerisinde bir değişkene alınır.

function veri_getir()
 {
   var parser;
   var xmlString = "";

   xmlString = "<mail_kutusu>" +
     "<mail>" +
     "<kime>cagatay</kime>" +
     "<kimden>MUSTAFA</kimden>" +
     "<konu>YAZILIM</konu>" +
     "<mesaj>MESAJ ICERIGI</mesaj>" +
     "</mail >" +
     "</mail_kutusu>";

  }

2.  Fonksiyon içerisinde xml’i parse edecek bir yapı oluşturulur.

   if (window.DOMParser) {
     parser = new DOMParser();
     xmlDoc = parser.parseFromString(xmlString, "text/xml"); //stringi pars eder.
    }
   else {

    xmlDoc = new ActiveXObject("Microsotf.XMLDOM");
    XmlDoc.async = false;
    XMLDoc.loadXML(xmlString); //parse iki formu var bu ikincisi
   }

3.  Xmlin sunulacağı html tagleri idleri üzerinden yakalanır.

   var _mesaj = document.getElementById("Id1");
   var _kime = document.getElementById("Id2") ;
   var _kimden = document.getElementById("Id3");
   var _konu = document.getElementById("Id4");

4.  Parse edilmiş değişken üzerinden DOM ile gerekli verilere ulaşılır ve innerHTML ile ekranda sunulur.

   _mesaj.innerHTML = xmlDoc.getElementsByTagName("mesaj")[0].childNodes[0].nodeValue;
   _kime.innerHTML = xmlDoc.getElementsByTagName("kime")[0].childNodes[0].nodeValue;
   _kimden.innerHTML = xmlDoc.getElementsByTagName("kimden")[0].childNodes[0].nodeValue;
   _konu.innerHTML = xmlDoc.getElementsByTagName("konu")[0].childNodes[0].nodeValue;

5. TAM KOD AŞAĞIDA YER ALMAKTADIR.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 
 <script>

 function veri_getir()
 {
   var parser;
   var xmlString = "";

  xmlString = "<mail_kutusu>" +
   "<mail>" +
   "<kime>cagatay</kime>" +
   "<kimden>MUSTAFA</kimden>" +
   "<konu>YAZILIM</konu>" +
   "<mesaj>MESAJ ICERIGI</mesaj>" +
   "</mail >" +
   "</mail_kutusu>";

   if (window.DOMParser) {
     parser = new DOMParser();
     xmlDoc = parser.parseFromString(xmlString, "text/xml"); //stringi pars eder.
   }
   else {

     xmlDoc = new ActiveXObject("Microsotf.XMLDOM");
     XmlDoc.async = false;
     XMLDoc.loadXML(xmlString); //parse iki formu var bu ikincisi
   }
 
   var _mesaj = document.getElementById("Id1");
   var _kime = document.getElementById("Id2") ;
   var _kimden = document.getElementById("Id3");
   var _konu = document.getElementById("Id4");

   _mesaj.innerHTML = xmlDoc.getElementsByTagName("mesaj")[0].childNodes[0].nodeValue;
   _kime.innerHTML = xmlDoc.getElementsByTagName("kime")[0].childNodes[0].nodeValue;
   _kimden.innerHTML = xmlDoc.getElementsByTagName("kimden")[0].childNodes[0].nodeValue;
   _konu.innerHTML = xmlDoc.getElementsByTagName("konu")[0].childNodes[0].nodeValue;
 
  }
 
 </script>
 </head>
   <body>
      <form>
        <span id="Id1"></span><br />
        <span id="Id2"></span><br />
        <span id="Id3"></span><br />
        <span id="Id4"></span><br />
 
        <input type="button" value="veri getir" onclick="veri_getir()" />
      </form>

  </body>
</html>