MohirDox

Ko'rinishi

AJAX — XML Ilovalar ​

Ushbu bobda XML, HTTP, DOM va JavaScript-dan foydalangan holda ba'zi HTML ilovalari namoyish etiladi.

Ishlatilgan XML hujjati ​

Ushbu bobda biz "cd_catalog.xml" deb nomlangan XML faylidan foydalanamiz.

XML ma'lumotlarini HTML jadvalida ko'rsatish ​

Ushbu misol har bir <CD> elementi bo'ylab aylanib chiqadi va <ARTIST> hamda <TITLE> elementlarining qiymatlarini HTML jadvalida ko'rsatadi:

Misol ​

html
<table id="demo"></table>

<script>
  function loadXMLDoc() {
    const xhttp = new XMLHttpRequest()
    xhttp.onload = function () {
      const xmlDoc = xhttp.responseXML
      const cd = xmlDoc.getElementsByTagName('CD')
      myFunction(cd)
    }
    xhttp.open('GET', 'cd_catalog.xml')
    xhttp.send()
  }

  function myFunction(cd) {
    let table = '<tr><th>Artist</th><th>Title</th></tr>'
    for (let i = 0; i < cd.length; i++) {
      table +=
        '<tr><td>' +
        cd[i].getElementsByTagName('ARTIST')[0].childNodes[0].nodeValue +
        '</td><td>' +
        cd[i].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue +
        '</td></tr>'
    }
    document.getElementById('demo').innerHTML = table
  }
</script>

Birinchi CD-ni HTML div elementida ko'rsatish ​

Ushbu misol id="showCD" bo'lgan HTML elementida birinchi CD elementini ko'rsatish funksiyasidan foydalanadi:

Misol ​

js
const xhttp = new XMLHttpRequest()
xhttp.onload = function () {
  const xmlDoc = xhttp.responseXML
  const cd = xmlDoc.getElementsByTagName('CD')
  myFunction(cd, 0)
}
xhttp.open('GET', 'cd_catalog.xml')
xhttp.send()

function myFunction(cd, i) {
  document.getElementById('showCD').innerHTML =
    'Artist: ' +
    cd[i].getElementsByTagName('ARTIST')[0].childNodes[0].nodeValue +
    '<br>Title: ' +
    cd[i].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue +
    '<br>Yil: ' +
    cd[i].getElementsByTagName('YEAR')[0].childNodes[0].nodeValue
}

CD-lar orasida harakatlanish (Navigation) ​

Yuqoridagi misoldagi CD-lar orasida harakatlanish uchun next() (keyingi) va previous() (oldingi) funksiyalarini yarating:

Misol ​

js
function next() {
  // Agar oxirgi CD-da bo'lmasangiz, keyingisini ko'rsatish
  if (i < len - 1) {
    i++
    displayCD(i)
  }
}

function previous() {
  // Agar birinchi CD-da bo'lmasangiz, oldingisini ko'rsatish
  if (i > 0) {
    i--
    displayCD(i)
  }
}

CD ni bosganda albom ma'lumotlarini ko'rsatish ​

Oxirgi misol foydalanuvchi CD-ni bosganda albom ma'lumotlarini qanday ko'rsatish mumkinligini namoyish etadi:

Misol ​

js
function displayCD(i) {
  document.getElementById('showCD').innerHTML =
    'Artist: ' +
    cd[i].getElementsByTagName('ARTIST')[0].childNodes[0].nodeValue +
    '<br>Title: ' +
    cd[i].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue +
    '<br>Yil: ' +
    cd[i].getElementsByTagName('YEAR')[0].childNodes[0].nodeValue
}