บทที่ 18 AJAX กับ JSON (ตอนที่ 2)
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 ต่างๆ ให้ถูกต้องด้วยนะครับ
ตัวอย่าง