A-AA+then

มีสมาชิกท่านหนึ่งแนะนำเว็บ http://www.googeek.com มาซึ่งเป็นเว็บ RSS อีกเว็บหนึ่ง ซึ่งเว็บนี้มีวิธีการเก็บรูปไว้ที่ description ซึ่งต่างจาก RSSThai ก็เลยได้โอกาศเขียน โดยการใช้ JSON ในการรับส่งข้อมูลเสียที เพื่อเป็นแนวทางให้ไปพัฒนาใช้กันอีกที

ในโปรเจ็คนี้ ผมอ่าน XML(ข่าว RSS) ออกมาแล้วก็คัดเลือกข้อมูลที่ต้องการ แล้วก็ส่งกลับมายัง Browser ด้วย JSON หลังจากนั้นจึงใช้ Javascript เพื่อจัดการแสดงผลอีกที ซี่งต่างจาก ของ RSSThai โดยที่ของ RSSThai ผมคืนค่าเป็น Text แล้วมาแสดงผลเลย โดยใช้การจัดการแสดงผลดัวย PHP บน Server

<?
  $listcount = $count;
  echo "[";
  for ($i=0; $i<count($rss) & ($listcount>0 || $count==-1); $i++) {
    $image = $rss[$i][description][data];
    if ($image != "") {//เลือกคืนค่าที่มีรูป
      //JSON data
      if ($listcount==$count) echo "{";//รายการแรก
      else echo ",{";//รายการอื่นๆ
      echo '"link":"'.$rss[$i][link][data].'",';
      echo '"title":"'.$rss[$i][title][data].'",';
      echo '"pubDate":"'.$rss[$i][pubDate][data].'",';
      echo '"image":"'.getImage($image).'"';
      echo "}";
      $listcount--;
    }
  }
  echo "]";
?>

โค้ดหน้า reader.php มีส่วนที่ต่างจาก rss แค่ในส่วนของการคืนค่ารูป(ดูได้จากโค้ด) โค้ดข้างบน เป็นการจัดการส่ง ค่าต่างๆกลับไปยัง server ด้วย JSON (การคืนค่าในแบบของ JSON ให้คืนค่าแต่ละรายการต่อกันไปเลย โดยไม่เว้นช่องว่าง หรือแทรกด้วย หรือ )

function loadNews(url, handle, count) {
  var req = Inint_AJAX()
  req.onreadystatechange = function () {
    if (req.readyState==4) {
      if (req.status==200) {
        var datas = eval('('+req.responseText+')') //รับค่า JSON แล้วแปลงให้ Javascript เข้าใจ
        var obj = document.getElementById(handle)
        obj.style.backgroundImage = "url()"
        //จัดการแสดงผล
        var data = '<table class="googeek_news_table"><tr>'
        var col = cols;
        for (var n=0; n<datas.length; n++) {
          col--
          if (col<0) {
            col = cols
            data+='</tr>
<tr>'
          }
          data+='<td class="googeek_news_td"><div class="googeek_news_image"><img src="'+datas[n].image+'" width="'+imagewidth+'" alt="" /></div></td>'
          data+='<td class="googeek_news_detail"><a href="'+datas[n].link+'" target="_blank">'+datas[n].title+'</a>'
          data+='<br />('+datas[n].pubDate+')</td>'
        }
        data+='</tr></table>'
        obj.innerHTML = data
      }
    }
  }
  req.open("POST", "ajax/googeek/reader.php", true)
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  req.send("url="+url+"&count="+count)//ส่งค่า
}

โค้ดนี้ เป็นส่วนของ AJAX และ Javascript ในการรับส่งค่า และจัดการแสดงผล

ในการใช้งานต้องกำหนด path ต่างๆให้ถูกต้องด้วยครับ เช่น ajax/googeek/ ให้กำหนดตาม path ที่นำโค้ดไปไว้ (ให้สังเกตุดูในโค้ดด้วยนะครับ)

 rar (336)


ถ้าต้องการให้แสดงข่าวที่ไม่มีรูปมาด้วย (โดยการแสดงรูปที่กำหนดไว้แทน) ให้ใช้โค้ดนี้ rar (293)

ตัวอย่าง
 

Relate

^