บทที่ 34 แสดงข่าวจาก RSSthai ด้วย AJAX
ปัญหาอย่างหนึ่งของการแสดงข่าว RSS จากเว็บไซต์ก็คือความเชื่องช้าในการโหลดหน้าเพจ เนื่องจากต้องรอโหลด RSS ให้เสร็จก่อน การแก้ปัญหาก็คือการใช้ AJAX ในการโหลดข่าวแทน ก็จะทำให้เพจแสดงได้เร็วขึ้น
เนื่ิองจากข่าวที่มาจาก RSSThai ไม่มีการแทรกรูปมาในเนื้อหาข่าวแต่สามารถอ่านรูปได้โดยวิธีพิเศษ ดังนั้นการแสดงรูปในข่าวจึงอาจมีความแตกต่างจากเว็บไซต์ข่าวอื่นๆ
loadNews เป็นฟังก์ชั่นเพื่อให้ทำการโหลดข่าว จาก url มาแสดงบน handle ครับ สำหรับ url สามารถหาหัวข้อข่าวต่างๆได้จาก RSSThai ครับ แต่สคริปต์นี้สามารถแสดงรูปได้จาก RSSThai เท่านั้นนะครับ โดยการแทรกโค้ดดังนี้ (ปกติควรจะแทรกโค้ดนี้ไว้ล่างสุดก่อน </body>)
ในการใช้งาน ถ้านำข่าวไปแสดงยังไดเร็คทอรี่อื่น ให้กำหนด path ของ reader.php ให้ถูกต้องด้วย
สำหรับการดึงรูปจาก rssthai มาแสดง จะอ่านได้จากฟังก์ชั่นนี้ครับ
สำหรับในไฟล์ reader.php ../rssthai/ คือ path ของรูปที่สร้างบน server ซึ่งปกติจะถูกสร้างอยู่ใน directory rssthai ควรกำหนดให้ถูกต้องด้วย
การใช้งานโค้ด ให้ปรับ chmod ไดเร็คทอรี่ rssthai เป็น 777 ด้วยเนื่องจากจะต้องมีการสร้างไฟล์ลงบน server ด้วย ส่วนโค้ดในหน้า index.php ให้แทรกลงในหน้าที่จะแสดงผล (522)
เนื่ิองจากข่าวที่มาจาก 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 ให้แทรกลงในหน้าที่จะแสดงผล
ตัวอย่าง