MohirDox

Ko'rinishi

AJAX — XML Misoli ​

AJAX-dan XML fayli bilan interaktiv muloqot qilish uchun foydalanish mumkin.

AJAX XML Misoli ​

Quyidagi misol veb-sahifa AJAX yordamida XML faylidan qanday qilib ma'lumot olishini ko'rsatib beradi:

Misol ​

html
<div id="demo">
  <button onclick="loadDoc()">CD ma'lumotlarini olish</button>
</div>

<script>
  function loadDoc() {
    const xhttp = new XMLHttpRequest()
    xhttp.onload = function () {
      myFunction(this)
    }
    xhttp.open('GET', 'cd_catalog.xml')
    xhttp.send()
  }

  function myFunction(xml) {
    const xmlDoc = xml.responseXML
    const x = xmlDoc.getElementsByTagName('CD')
    let table = '<tr><th>Artist</th><th>Title</th></tr>'
    for (let 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>

Misol Tushuntirishi ​

Foydalanuvchi yuqoridagi "CD ma'lumotlarini olish" tugmasini bosganda, loadDoc() funksiyasi bajariladi.

  • loadDoc() funksiyasi XMLHttpRequest obyektini yaratadi;
  • Server javobi tayyor bo'lganda bajariladigan funksiyani qo'shadi;
  • So'rovni serverga yuboradi.

Server javobi tayyor bo'lganda, HTML jadvali tuziladi, tugunlar (elementlar) XML faylidan ajratib olinadi va yakunida "demo" elementi XML ma'lumotlari bilan to'ldirilgan HTML jadvali bilan yangilanadi.

XML fayli ​

Yuqoridagi misolda ishlatilgan XML fayli ("cd_catalog.xml") taxminan quyidagicha ko'rinishga ega:

xml
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  ...
</CATALOG>