บทที่ 18 AJAX กับ JSON (ตอนที่ 2)
บทความนี้จะเป็นตัวอย่างการอ่านข้อมูลจาก RSS แบบที่มีรูปภาพติดมาด้วย โดยที่ RSS ที่อ่านจะต้องส่งรูปภาพกลับมาด้วย ซึ่งปกติจะหาได้จากพวกเว็บวาไรตี้ทั่วๆไป แล้วส่งกลับเป็น JSON ด้วยฟังก์ชั่นของ PHP (แปลงข้อมูลจาก XML ให้เป็น JSON)
โค้ดหน้า reader.php อ่านข้อมูลจาก URL แล้วคืนค่ากลับเป็น JSON ส่งกลับให้ Ajax เพื่อแสดงผลต่อไป
โค้ดนี้ เป็นส่วนของ AJAX และ Javascript ในการรับส่งค่า และจัดการแสดงผล โดยในตัวอย่างนี้เป็นการอ่านจาก RSS ของ Post Today
ในกรณีที่ RSS ไม่มีรูปภาพแนบมาด้วย ตัวอ่านจะแสดงรูปภาพเริ่มต้นแทน (สามารถเปลี่ยนได้ nopic.jpg)
ด้านบนเป็นโค้ดส่วน HTML และ CSS สำหรับแสดงผล RSS มี ID สอดคล้องกันกับโค้ด ด้วยนะครับ (สามารถแสดงได้หลายข่าว)
หมายเหตุ ถ้าต้องการนำไปใช้งานให้แก้ไข path ต่างๆ ให้ถูกต้องด้วยนะครับ
if (isset($_POST['url'])) {
// feed URL
$feedURL = $_POST['url'];
// ถ้าไม่ได้กำหนดมาให้คืนค่ากลับทุกรายการข่าว
$count = isset($_POST['count']) ? (int) $_POST['count'] : -1;
if ($feedURL && preg_match("/^https?:\/\/.+$/", $feedURL) && ($feedRef = @fopen($feedURL, 'rb'))) {
$contents = '';
while (!feof($feedRef)) {
$contents .= fread($feedRef, 8192);
}
fclose($feedRef);
// RSS parser
$rss = new SimpleXMLElement($contents, LIBXML_NOWARNING | LIBXML_NOERROR);
// เขียน header ของเอกสาร จาก XML ที่่ได้รับ
header("content-type: application/JSON; charset=UTF-8");
// คืนค่า
$ret = array();
foreach ($rss->channel->item as $item) {
if ($count < 0 || $count > 0) {
$ret[] = $item;
$count--;
}
}
// คืนค่า JSON
echo json_encode($ret, JSON_UNESCAPED_UNICODE);
}
}โค้ดหน้า reader.php อ่านข้อมูลจาก URL แล้วคืนค่ากลับเป็น JSON ส่งกลับให้ Ajax เพื่อแสดงผลต่อไป
// ขนาดของรูปภาพแสดงผล
var imagewidth = 75;
// จำนวนคอลัมน์
var cols = 2;
// ฟังก์ชั่นเรียกใช้งาน Ajax
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {} // IE
try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {} // IE
try { return new XMLHttpRequest() } catch(e) {} // Native Javascript
alert("XMLHttpRequest not supported")
return null
}
// ฟังก์ชั่นโหลดข่าวและแสดงผล
function loadNews(url, handle, count) {
var req = Inint_AJAX()
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status == 200) {
// to JSON
var datas = eval('('+req.responseText+')'),
data = '<table class="googeek_news_table"><tr>',
col = cols,
image;
for (var i = 0; i < datas.length; i++) {
col--;
if (col<0) {
col = cols;
data += '</tr><tr>';
}
image = datas[i].image ? datas[i].image: "../../ex/googeek/nopic.jpg"
data += '<td class="googeek_news_td"><div class="googeek_news_image"><img src="' + image + '" width="' + imagewidth + '"></div></td>'
data += '<td class="googeek_news_detail"><a href="' + datas[i].link + '" target="_blank">' + datas[i].title + '</a>'
data += '<br />(' + datas[i].pubDate + ')</td>'
}
data += '</tr></table>';
// แสดงผล
obj = document.getElementById(handle);
obj.innerHTML = data;
// ซ่อน loading
obj.style.backgroundImage = "url()";
}
}
}
req.open("POST", "../../ex/googeek/reader.php", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// ส่งค่า
req.send("url=" + url + "&count=" + count);
}
// โหลด RSS เมื่อโหลดเพจเรียบร้อย
window.onload = function ()
{
loadNews( 'https://www.posttoday.com/rss/src/entertainment.xml' , 'entertainment' , 4 );
loadNews( 'https://www.posttoday.com/rss/src/it.xml' , 'it' , 4 );
}โค้ดนี้ เป็นส่วนของ AJAX และ Javascript ในการรับส่งค่า และจัดการแสดงผล โดยในตัวอย่างนี้เป็นการอ่านจาก RSS ของ Post Today
ในกรณีที่ RSS ไม่มีรูปภาพแนบมาด้วย ตัวอ่านจะแสดงรูปภาพเริ่มต้นแทน (สามารถเปลี่ยนได้ nopic.jpg)
<style>
.googeek_news {
border:1px solid #AAAAAA;
padding:2px;
height:180px;
background-image:url(../../ex/googeek/wait.gif);
background-position:center;
background-repeat:no-repeat;
overflow:hidden;
margin:3px;
text-align:left;
}
.googeek_news_table {
height:100%;
width:100%;
}
.googeek_news_td {
margin:3px;
background-color:#F0F0F0;
vertical-align:top;
}
.googeek_news_image {
border:1px solid #AAAAAA;
background-color:#F0F0F0;
display: inline-block;
}
.googeek_news_detail {
vertical-align:top;
text-align:left;
color:gray;
font-family:Tahoma;
font-size:8pt;
background-color:#F0F0F0;
}
</style>
<div class="googeek_news" id="entertainment"></div>
<div class="googeek_news" id="it"></div>ด้านบนเป็นโค้ดส่วน HTML และ CSS สำหรับแสดงผล RSS มี ID สอดคล้องกันกับโค้ด ด้วยนะครับ (สามารถแสดงได้หลายข่าว)
หมายเหตุ ถ้าต้องการนำไปใช้งานให้แก้ไข path ต่างๆ ให้ถูกต้องด้วยนะครับ
ตัวอย่าง