‎‎برنامه كاربردي در آجكسAJAX Applications -‎

Previous >    <Next  

‎دراين فصل بعضي از برنامه هاي كاربرديHTML با استفاده از HTTP,XML , DOM و جاوااسكريپت ‎رانشان ميدهد.

‎‎استفاده سند ايكس ام الThe XML Document Used -‎

‎دراين فصل براي نمونه از فايل ايكس ام ال 'cd_catalog.xml' ‎استفاده ميگردد.

‎Display XML Data in an HTML Table‎

‎‎نمايش داده هايXML در جدول HTML

‎دراين مثال از طريق هر عنصر‎<CD>‎ حلقه زده ميشود، و مقادير ‎<ARTIST>‎ ‎و‎<TITLE>‎ را در يك جدولHTML نمايش داده ميشود :

‎‎مثال ـ ايجاد جدولHTML از فايل XML

‎ 
<html>
<head>
<style>table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}
th, td {
  padding: 5px;
}
</style></head>
<body>

<button type="button" onclick="loadXMLDoc()">Get my CD collection
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if  (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true);
  xmlhttp.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 <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>

--(go to editor for change code and run)

‎براي اطلاعات بيشتر در مورد استفاده جاوااسكريپت وXML DOM به بخش DOM Intro ‎مراجعه كنيد.

‎Display The First CD in an HTML div Element‎

‎‎نمايش اولين عنصرCD در يك عنصر HTML div سند .

‎مثال ـ دراي مثال ازيك تابع براي نمايش اولينCD در يك عنصرHTML با ‎id=‎"showCD‎"‎ ‎استفاده ميشود:

‎ 
displayCD(0);

function displayCD(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if  (this.readyState == 4 && this.status == 200) {
            myFunction(this, i);
        }
    };
    xmlhttp.open("GET", "cd_catalog.xml", true);
    xmlhttp.send();
}

function myFunction(xml, i) {
    var xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsByTagName("CD");
    document.getElementById("showCD").innerHTML =
    "Artist: " +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "<br>Title: " +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "<br>Year: " +
    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}

--(go to editor for change code and run)

‎‎حركت دربين عناصرNavigate Between the CDs -‎ ‎<CD>‎

‎مثال ـ دراين مثال توابع‎‎next( ) , previous( )‎‎ براي حركت بين CD ‎ها ايجاد شده است:

‎ 
function next() {
  // display the next CD, unless you are on the last CD
  if  (i < x.length-1) {
    i++;
    displayCD(i);
  }
}

function previous() {
  // display the previous CD, unless you are on the first CD
  if  (i > 0) {
  i--;
  displayCD(i);
  }
}

--(go to editor for change code and run)

‎مثال ـ نمايش كامل آلبوم اطلاعات با كليك رويCD هر رديف جدول مشخصات كامل آن در بالاي ‎جدول نمايش داده ميشود.

‎ 
function displayCD(i) {
    document.getElementById("showCD").innerHTML =
    "Artist: " +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "<br>Title: " +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "<br>Year: " +
    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}

--(go to editor for change code and run)

Previous >    <Next