گروه مقاله : طراحی سایت
تاريخ انتشار : 1396/07/17 - 12:04
كد :7887
در این مقاله در باره ارتباط بین XML و AJAX چند مثال را ارائه داده ایم.
ای جکس براحتی میتواند با یک فایلXML مرتبط شود.
مثال های کار باXML توسط ای جکس:
مثال:
<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
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>
دانلود فایلcd_catalog.xml
توضیح مثال
هنگامی که کاربر روی دکمهGet CD info کلیک کند. عملگرloadDoc() پردازش می شود. عملگرloadDoc() یک شیئXMLHttpRequest ایجاد می کند. سپس هنگام آماده شدن پاسخ عملگر ارسال میگردد. حالا باید دستورsends the request off به سرور ارسال گردد. وقتیکه پاسخ سرور آماده شود یک جدولHTML ایجاد می شود. تگ های جدول با کمک فایلXML ایجاد می شود. سپس محتویات جدول از فایلXML خوانده میشود.
LoadXMLDoc()
function loadDoc() {
var xhttp =new XMLHttpRequest();
xhttp.onreadystatechange =function() {
if (this.readyState ==4 &&this.status ==200) {
myFunction(this);
}
};
xhttp.open("GET","cd_catalog.xml",true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Title</th><th>Artist</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i =0; i <x.length; i++) {
table +="<tr><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد