گروه مقاله : طراحی سایت
تاريخ انتشار : 1396/07/17 - 12:04
كد :7887

مثال های ارتباط XML با ای جکس

در این مقاله در باره ارتباط بین 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;
}

 

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد

نظرات كاربران :