AJAX ilovalari
Ushbu bobda XML, HTTP, DOM va JavaScript-dan foydalanadigan ba’zi HTML ilovalari ko‘rsatilgan.
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 aylanadi va HTML jadvalidagi <ARTIST> va <TITLE> elementlarining qiymatlarini ko‘rsatadi:
Misol
<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>
</body>
</html>
O‘zingiz sinab ko‘ring »
JavaScript va XML DOM-dan foydalanish haqida ko‘proq ma’lumot olish uchun DOM Intro-ga o‘ting.
Birinchi CDni HTML div elementida ko‘rsatish
Ushbu misolda HTML elementidagi birinchi CD elementini id="showCD" bilan ko‘rsatish funksiyasidan foydalaniladi:
Misol
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>Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
O‘zingiz sinab ko‘ring »
CDlar orasida harakatlanish
Yuqoridagi misoldagi kompakt disklar orasida harakat qilish uchun a
next() va previous() funksiyasi:
Misol
function next()
{
// display the next CD, unless you are on the last CD
if (i < len-1) {
i++;
displayCD(i);
}
}
function previous()
{
// display the previous CD, unless you are on the first CD
if (i > 0) {
i--;
displayCD(i);
}
}
O‘zingiz sinab ko‘ring »
CD ustiga bosilganda albom ma’lumotlarini ko‘rsatish
Oxirgi misol foydalanuvchi CD-ni bosganida albom ma’lumotlarini qanday ko‘rsatish mumkinligini ko‘rsatadi:
Misol
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>Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!