XML ਐਪਲੀਕੇਸ਼ਨ

ਇਸ ਖੰਡ ਵਿੱਚ ਅਸੀਂ XML, HTTP, DOM ਅਤੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ HTML ਐਪਲੀਕੇਸ਼ਨ ਦਿਖਾਵਾਂਗੇ。

ਵਰਤੇ ਜਾਣ ਵਾਲੇ XML ਦਸਤਾਵੇਜ਼

ਇਸ ਖੰਡ ਵਿੱਚ ਅਸੀਂ ਨਾਮ "music_list.xml" ਦਾ XML ਫਾਇਲ

XML ਡਾਟਾ ਨੂੰ HTML ਟੇਬਲ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਹਰੇਕ <TRACK> ਐਲੀਮੈਂਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਫਿਰ <ARTIST> ਅਤੇ <TITLE> ਐਲੀਮੈਂਟਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ HTML ਟੇਬਲ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ:

ਮਾਡਲ

<html>
<body>
<table id="demo"></table>
<script>
function loadXMLDoc() {
   var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange =  function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
     }
  };
  xmlhttp.open("GET", "music_list.xml", true);
   xmlhttp.send();
}
function myFunction(xml) {
  var i;
   var xmlDoc = xml.responseXML;
  var table="<tr><th>艺术家</th><th>曲目</th></tr>";
   var x = xmlDoc.getElementsByTagName("TRACK");
  for (i = 0; i <x.length;  i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue  +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue  +
    "</td></tr>";
  }
   document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>

آزمایش کنید

ਜਿਸ ਵਿੱਚ ਜਾਣਕਾਰੀ ਦੇਣੀ ਹੈ ਕਿ JavaScript ਅਤੇ XML DOM ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਸੰਦਰਭਿਤ ਕਰੋ DOM ਸੂਚਨਾ。

id="displayMUSIC" ਦੇ HTML div ਐਲੀਮੈਂਟ ਵਿੱਚ ਪਹਿਲੇ ਗਾਣੇ ਨੂੰ ਦਿਖਾਉਣ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ ਫੰਕਸ਼ਨ ਵਰਤੋਂ ਕੀਤੀ ਗਈ ਹੈ ਜੋ id="displayMUSIC" ਦੇ HTML ਐਲੀਮੈਂਟ ਵਿੱਚ ਪਹਿਲੇ ਗਾਣੇ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ:

ਮਾਡਲ

displayMUSIC(0);
function displayMUSIC(i) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this, i);
    }
  };
  xmlhttp.open("GET", "music_list.xml", true);
  xmlhttp.send();
}
function myFunction(xml, i) {
  var xmlDoc = xml.responseXML; 
  x = xmlDoc.getElementsByTagName("TRACK");
  document.getElementById("showMUSIC").innerHTML =
  "<ul>" + 
  "<li>ਗਾਣਾ: " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
  "<li>هنرمند: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li>آلبوم: " +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li>کشور: " +
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>شرکت: " +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>سال: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}

آزمایش کنید

ਗਾਣਿਆਂ ਵਿੱਚ ਨੇਵੀਗੇਸ਼ਨ

ਉਸ ਉਦਾਹਰਣ ਵਿੱਚ ਗਾਣਿਆਂ ਵਿੱਚ ਨੇਵੀਗੇਸ਼ਨ ਕਰਨ ਲਈ next() ਅਤੇ previous() ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਜੋੜੋ:

ਮਾਡਲ

function next() {
  // ਆਖਰੀ ਗਾਣਾ ਪਹੁੰਚਿਆ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਅਗਲੇ ਗਾਣੇ ਨੂੰ ਦਿਖਾਓ
   if (i < x.length-1) {
    i++;
    displayMUSIC(i);
  }
}
function previous() {
  // ਪਹਿਲਾ ਗਾਣਾ ਪਹੁੰਚਿਆ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਪਿਛਲੇ ਗਾਣੇ ਨੂੰ ਦਿਖਾਓ
   if (i > 0) {
  i--;
  displayMUSIC(i);
  }
}

آزمایش کنید

ਗਾਣੇ ਨੂੰ ਕਲਿੱਕ ਕਰਦੇ ਹੋਏ ਆਲਬਮ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ

ਆਖਰੀ ਇਸ ਮਾਡਲ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਦਿੱਤਾ ਗਿਆ ਹੈ ਕਿ ਕਿਵੇਂ ਯੂਜ਼ਰ ਇੱਕ ਗਾਣੇ ਨੂੰ ਕਲਿੱਕ ਕਰਦੇ ਹੋਏ ਆਲਬਮ ਜਾਣਕਾਰੀ ਦਿਖਾਇਆ ਜਾਵੇ:

ਮਾਡਲ

function displayMUSIC(i) {
  document.getElementById("showMUSIC").innerHTML =
  "<ul>" + 
  "<li>ਗਾਣਾ: " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
  "<li>هنرمند: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li>آلبوم: " +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li>کشور: " +
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>شرکت: " +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>سال: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}

آزمایش کنید