۳
آذر

جلسه ۴۶: استفاده از Ajax در XML

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

با عرض سلام و ادب خدمت کاربران سایت پی وی لرن.
در این جلسه قصد داریم تا استفاده از ajax در XML و دریافت اطلاعات از فایل XML با Ajax را یاد بگیریم.

Ajax می تواند ارتباط تعاملی با یک فایل XML برقرار کند.

استفاده از Ajax در XML

در ادامه برنامه ایی خواهیم نوشت که نشان می دهد چطور اطلاعات را از فایل xml توسط Ajax دریافت کنیم:

دریافت اطلاعات از فایل XML با Ajax

توضیحات برنامه

هنگامی که کاریر گزینه ای را از لیست انتخاب می کند، تابع ()showCD اجرا می شود.
این تابع توسط رویداد onchange اجرا می شود:

مثال :

<html>
<head>
<script>
function showCD(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","getcd.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>

</body>
</html>

<html>

<head>

function showCD(str) {

if (str=="") {

document.getElementById("txtHint").innerHTML="";

return;

}

if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else { // code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

if (this.readyState==4 && this.status==200) {

document.getElementById("txtHint").innerHTML=this.responseText;

}

xmlhttp.open("GET","getcd.php?q="+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<form>

Select a CD:

<option value="">Select a CD:</option>

<option value="Bob Dylan">Bob Dylan</option>

<option value="Cat Stevens">Cat Stevens</option>

</select>

</form>

<div id="txtHint"><b>CD info will be listed here...</b></div>

</body>

</html>

تابع ()showCD کار های زیر را انجام می دهد:

چک کردن انتخاب شدن گزینه
یک XMLHttpRequest object ایجاد می کند
وقتی server responce آماده باشد، تابع اجرا می شود
یک درخواست به فایل php ارسال می کند
توجه داشته باشید که پارامتر q به url اضافه شده است

فایل PHP

صفحه ای که توسط جاوااسکریپت در کد بالا فرخوانده شده، getcd.php نام دارد

اسکریپت php یک فایل xml را بارگداری می کند.(cd_catalog.xml)
یک کوئری را در فایل xml انجام می دهد و نتایج را در به فرم HTML بر می گرداند:

مثال :

<?php
$q=$_GET["q"];

$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++) {
  //Process only element nodes
  if ($x->item($i)->nodeType==1) {
    if ($x->item($i)->childNodes->item(0)->nodeValue == $q) {
      $y=($x->item($i)->parentNode);
    }
  }
}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++) {
  //Process only element nodes
  if ($cd->item($i)->nodeType==1) {
    echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
    echo($cd->item($i)->childNodes->item(0)->nodeValue);
    echo("<br>");
  }
}
?>

<?php

$q=$_GET["q"];

$xmlDoc = new DOMDocument();

$xmlDoc->load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++) {

//Process only element nodes

if ($x->item($i)->nodeType==1) {

if ($x->item($i)->childNodes->item(0)->nodeValue == $q) {

$y=($x->item($i)->parentNode);

}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++) {

//Process only element nodes

if ($cd->item($i)->nodeType==1) {

echo("<b>" . $cd->item($i)->nodeName . ":</b> ");

echo($cd->item($i)->childNodes->item(0)->nodeValue);

echo("<br>");

}

هنگامی که درخواست ارسال شود، کارهای زیر انجام می شود:

php یک XML DOM object ایجاد می کند
تمام عنصر <artist> را که با نام مورد نظر تطابق داشته باشد را پیدا می کند
خروجی را چاپ می کند

جلسه کار با Ajax در PHP نیز به پایان رسید.
در جلسه بعد به مبحث Live Search (جستجوی زنده) در Ajax خواهیم پرداخت. با ما همراه باشید.

همچنین می توانید نظرات و سوالات خود را از طریق بخش نظرات سایت با ما در میان بگذارید.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 2

رسول
بهمن ۷, ۱۳۹۸
سلام
فایل cd_catalog.xml رو باید از کجا دانلود کرد ؟؟؟؟
پاسخ دادن
- پی وی لرن
  بهمن ۸, ۱۳۹۸
  سلام
  از این بخش می توانید کپی و استفاده نمایید
  مشاهده فایل
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۴۶: استفاده از Ajax در XML

استفاده از Ajax در XML

توضیحات برنامه

فایل PHP

لیست مطالب دوره

مقدمات آموزش PHP

PHP Forms

MySQL Database

PHP - XML

PHP - AJAX

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ