บทที่ 34 แสดงข่าวจาก RSSthai ด้วย AJAX

ปัญหาอย่างหนึ่งของการแสดงข่าว RSS จากเว็บไซต์ก็คือความเชื่องช้าในการโหลดหน้าเพจ เนื่องจากต้องรอโหลด RSS ให้เสร็จก่อน การแก้ปัญหาก็คือการใช้ AJAX ในการโหลดข่าวแทน ก็จะทำให้เพจแสดงได้เร็วขึ้น

เนื่ิองจากข่าวที่มาจาก RSSThai ไม่มีการแทรกรูปมาในเนื้อหาข่าวแต่สามารถอ่านรูปได้โดยวิธีพิเศษ ดังนั้นการแสดงรูปในข่าวจึงอาจมีความแตกต่างจากเว็บไซต์ข่าวอื่นๆ

function loadNews(url, handle) {
  var req = Inint_AJAX()
  req.onreadystatechange = function () {
    if (req.readyState==4) {
      if (req.status==200) {
        var obj = document.getElementById(handle)
        obj.style.backgroundImage = "url()"
        obj.innerHTML = req.responseText
      }
    }
  }
  req.open("POST", "reader.php", true)
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  req.send("url="+url) //ส่งค่า
}

loadNews เป็นฟังก์ชั่นเพื่อให้ทำการโหลดข่าว จาก url มาแสดงบน handle ครับ สำหรับ url สามารถหาหัวข้อข่าวต่างๆได้จาก RSSThai ครับ แต่สคริปต์นี้สามารถแสดงรูปได้จาก RSSThai เท่านั้นนะครับ โดยการแทรกโค้ดดังนี้ (ปกติควรจะแทรกโค้ดนี้ไว้ล่างสุดก่อน </body>)

window.onload = function () {
  loadNews('http://www.rssthai.com/rss/entertain.xml', 'entertain');
  loadNews('http://www.rssthai.com/rss/it.xml', 'it');
}

ในการใช้งาน ถ้านำข่าวไปแสดงยังไดเร็คทอรี่อื่น ให้กำหนด path ของ reader.php ให้ถูกต้องด้วย

สำหรับการดึงรูปจาก rssthai มาแสดง จะอ่านได้จากฟังก์ชั่นนี้ครับ

function getimage($itemlink, $imagedir, $imageresize, $imagewidth, $imageheight) {
  $parsedlink = parse_url($itemlink);
  list($tx,$rx) = split("&",$parsedlink["query"]);
  list($t,$type) = split("=",$tx);
  list($r,$rid) = split("=",$rx);
  $urlquery = "http://www.rssthai.com/images/?t=$type&r=$rid";
  if (! (strpos($itemlink,"mreader.php") === false)) $urlquery = "http://www.rssthai.com/images/?u=$type&r=$rid";
  
  if (! file_exists($imagedir)) {
    mkdir($imagedir);
  }
  
  $imagefilename = $imagedir.$type."_".$rid."_" . $imagewidth . "x" . $imageheight .".jpg";
  
  if (! file_exists($imagefilename)) {
    $imgContents = null;
   
    $fileHandle = @fopen($urlquery, "r");
    $fileuri = fread($fileHandle, 8192);
    fclose($fileHandle);

    $fileHandle = @fopen($fileuri, "rb");

    if($fileHandle) {
      while (!feof($fileHandle)) {
        $imgContents .= fread($fileHandle, 8192);
      }
      fclose($fileHandle);
    
      if ($imgContents) {
        if ($imageresize==false || function_exists("imagecreatefromstring")==false) {
          $handle = fopen($imagefilename, "wb");
          fwrite($handle, $imgContents);
          fclose($handle);
        } else {
          $source = imagecreatefromstring($imgContents);
          $imageX = imagesx($source);
          $imageY = imagesy($source);
          if ($imagewidth >= $imageX) {
            $handle = fopen($imagefilename, "wb");
            fwrite($handle, $imgContents);
            fclose($handle);
          } else {
            $thumbX = $imagewidth;
            $thumbY = (int)(($thumbX*$imageY) / $imageX );
            $dest = imagecreatetruecolor($thumbX, $thumbY);
            imagecopyresampled ($dest, $source, 0, 0, 0, 0, $thumbX, $thumbY, $imageX, $imageY);
            imagejpeg($dest,$imagefilename,75);
            imagedestroy($dest);
          }
          imagedestroy($source);
        }
      }
    }
  }

  return $imagefilename;
}

  echo '<td class=\"rssthai_news_td\"><div class="rssthai_news_image"><img src="../rssthai/'.getimage($rss[$i][link][data], "./", false, $imagewidth, $imageheight).'" alt="" /></div><div class="rssthai_news_detail"><a href="'.$rss[$i][link][data].'" target="_blank">'.$rss[$i][title][data]."</a></div></td> ";

สำหรับในไฟล์ reader.php ../rssthai/ คือ path ของรูปที่สร้างบน server ซึ่งปกติจะถูกสร้างอยู่ใน directory rssthai ควรกำหนดให้ถูกต้องด้วย

การใช้งานโค้ด ให้ปรับ chmod ไดเร็คทอรี่ rssthai เป็น 777 ด้วยเนื่องจากจะต้องมีการสร้างไฟล์ลงบน server ด้วย ส่วนโค้ดในหน้า index.php ให้แทรกลงในหน้าที่จะแสดงผล
rar (521)
ตัวอย่าง
ผู้เขียน Goragod โพสต์เมื่อ 01 เม.ย. 2551 เปิดดู 12,767 ป้ายกำกับ AJAXRSS

เรื่องที่เกี่ยวข้อง

^