۳
آذر

جلسه ۴۸ : ساخت خبر خوان با Ajax

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

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

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
در این جلسه قصد داریم تا یک خبر خوان (RSS Reader) را با استفاده از Ajax بسازیم.
در ادامه خواهیم دید که ساخت خبر خوان با ajax ساده می باشد.

یک خبر خوان یا RSS Reader برای خواندن خوراک RSS استفاده می شود.

ساخت RSS Reader با Ajax

در ادامه برنامه ای می نویسیم (Rss Reader با Ajax) که خبر ها را از سایت های مختلف جمع آوری می کند و به کاربر نشان می دهد.

ساخت rss reader با ajax

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

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

مثال :

<html>
<head>
<script>
function showRSS(str) {
  if (str.length==0) {
    document.getElementById("rssOutput").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("rssOutput").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","getrss.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select onchange="showRSS(this.value)">
<option value="">Select an RSS-feed:</option>
<option value="Google">Google News</option>
<option value="NBC">NBC News</option>
</select>
</form>
<br>
<div id="rssOutput">RSS-feed will be listed here...</div>
</body>
</html>

<html>

<head>

function showRSS(str) {

if (str.length==0) {

document.getElementById("rssOutput").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("rssOutput").innerHTML=this.responseText;

}

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

xmlhttp.send();

}

</script>

</head>

<body>

<form>

<option value="">Select an RSS-feed:</option>

<option value="Google">Google News</option>

</select>

</form>

<br>

<div id="rssOutput">RSS-feed will be listed here...</div>

</body>

</html>

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

چک کردن انتخاب شدن لیست
ایجاد یک XMLHttpRequest object
اگر server response آماده بود تابعی برای اجرا ایجاد می کند
یک درخواست به فایل php ارسال می کند
توجه داشته باشید که پارامتر q به url اضافه شده است. (با محتوای گزینه انتخاب شده لیست)

فایل PHP

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

مثال :

<?php
//get the q parameter from URL
$q=$_GET["q"];

//find out which feed was selected
if($q=="Google") {
  $xml=("http://news.google.com/news?ned=us&topic=h&output=rss");
} elseif($q=="NBC") {
  $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
}

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

//get elements from "<channel>"
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;

//output elements from "<channel>"
echo("<p><a href='" . $channel_link
  . "'>" . $channel_title . "</a>");
echo("<br>");
echo($channel_desc . "</p>");

//get and output "<item>" elements
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++) {
  $item_title=$x->item($i)->getElementsByTagName('title')
  ->item(0)->childNodes->item(0)->nodeValue;
  $item_link=$x->item($i)->getElementsByTagName('link')
  ->item(0)->childNodes->item(0)->nodeValue;
  $item_desc=$x->item($i)->getElementsByTagName('description')
  ->item(0)->childNodes->item(0)->nodeValue;
  echo ("<p><a href='" . $item_link
  . "'>" . $item_title . "</a>");
  echo ("<br>");
  echo ($item_desc . "</p>");
}
?>

<?php

//get the q parameter from URL

$q=$_GET["q"];

//find out which feed was selected

if($q=="Google") {

$xml=("http://news.google.com/news?ned=us&topic=h&output=rss");

} elseif($q=="NBC") {

$xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");

}

$xmlDoc = new DOMDocument();

$xmlDoc->load($xml);

//get elements from "<channel>"

$channel=$xmlDoc->getElementsByTagName('channel')->item(0);

$channel_title = $channel->getElementsByTagName('title')

->item(0)->childNodes->item(0)->nodeValue;

$channel_link = $channel->getElementsByTagName('link')

->item(0)->childNodes->item(0)->nodeValue;

$channel_desc = $channel->getElementsByTagName('description')

->item(0)->childNodes->item(0)->nodeValue;

//output elements from "<channel>"

echo("<p><a href='" . $channel_link

. "'>" . $channel_title . "</a>");

echo("<br>");

echo($channel_desc . "</p>");

//get and output "<item>" elements

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

for ($i=0; $i<=2; $i++) {

$item_title=$x->item($i)->getElementsByTagName('title')

->item(0)->childNodes->item(0)->nodeValue;

$item_link=$x->item($i)->getElementsByTagName('link')

->item(0)->childNodes->item(0)->nodeValue;

$item_desc=$x->item($i)->getElementsByTagName('description')

->item(0)->childNodes->item(0)->nodeValue;

echo ("<p><a href='" . $item_link

. "'>" . $item_title . "</a>");

echo ("<br>");

echo ($item_desc . "</p>");

}

وقتی که یک درخواست از طرف جاوااسکریپت برای یک RSS feed فرستاده می شود، کار های زیر انجام می شوند:

بررسی این که کدام گزینه از لیست انتخاب شده است
ایجاد یک شئ جدید XML DOM
بارگذاری سند RSS در متغیر xml
استخراج و چاپ عناصر از عنصر channel
استخراج و چاپ عناصر از عنصر item

جلسه ساخت خبر خوان با Ajax نیست به پایان رسید.
در جلسه بعد یک سیستم نظرسنجی را با استفاده از Ajax خواهیم ساخت. با ما همراه باشید.

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

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

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

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

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

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

جلسه ۴۸ : ساخت خبر خوان با Ajax

ساخت RSS Reader با Ajax

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

فایل PHP

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

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

PHP Forms

MySQL Database

PHP - XML

PHP - AJAX

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ