為了排遣這段時(shí)間的無(wú)聊也順便做個(gè) RSS 應用的練習，決定給自己維護的一個(gè)小網(wǎng)站加個(gè)首頁(yè)新聞，瀏覽器用 Ajax 或者 Ajah 從服務(wù)器取新聞異步的顯示出來(lái)，同時(shí)提供 RSS 源供聚合器訂閱。
XMLHTTPRequest 從上次做過(guò)一個(gè)手機模擬器后就再沒(méi)碰過(guò)，這次在網(wǎng)上搜尋了一番居然發(fā)現了一個(gè)好東西：http://www.scss.com.au/family/andrew/webdesign/xmlhttprequest/，一個(gè) Cross-Browser 的 XMLHttpRequest 實(shí)現，作者在創(chuàng )作共用條款（Creative Commons License）下發(fā)布這個(gè)庫，只要你不移除腳本中作者的姓名和網(wǎng)址就可以自由使用，就用它了！下載 xmlhttprequest.js 以備后用。
數據可以保存在數據庫中也可以簡(jiǎn)單的寫(xiě)入到服務(wù)器的一個(gè)文件中，為了靈活起見(jiàn)我就在 MySQL 中新建一個(gè)表放站內新聞了，就這么幾個(gè)字段：id、title、content、time。新聞錄入和從數據庫中取數據提供給 Ajax/Ajah 請求這種垃圾代碼我就不貼了:-)
下面是客戶(hù)端 XMLHTTPRequest 的代碼：
<html>
<head>
<title>首頁(yè)新聞測試</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="xmlhttprequest.js"></script>
</head>
<body>
<div id="News">新聞讀取中……</div>
<script type="text/javascript">
var req = new XMLHttpRequest();
if( req )
{
req.onreadystatechange = function()
{
var News = "新聞讀取失敗";
try
{
if( req.readyState == 4 && ( req.status == 200 || req.status == 304 ) )
News = req.responseText;
}
catch(e)
{
News = e.description;
}
document.getElementById( ‘News‘ ).innerHTML = News;
};
req.open( ‘GET‘, ‘news.php‘ );
req.send( null );
}
</script>
</body>
</html>
<head>
<title>首頁(yè)新聞測試</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="xmlhttprequest.js"></script>
</head>
<body>
<div id="News">新聞讀取中……</div>
<script type="text/javascript">
var req = new XMLHttpRequest();
if( req )
{
req.onreadystatechange = function()
{
var News = "新聞讀取失敗";
try
{
if( req.readyState == 4 && ( req.status == 200 || req.status == 304 ) )
News = req.responseText;
}
catch(e)
{
News = e.description;
}
document.getElementById( ‘News‘ ).innerHTML = News;
};
req.open( ‘GET‘, ‘news.php‘ );
req.send( null );
}
</script>
</body>
</html>
這里唯一值得說(shuō)明的就是 XMLHTTPRequest 默認是用 UTF-8 傳遞數據的，所以你的數據源最好也用 UTF-8 否則（因為我們這里客戶(hù)端已經(jīng)指定了要用 GB2312 了）得到的會(huì )是亂碼，這在 IE 下會(huì )引發(fā) JavaScript 錯誤，在 FireFox 下卻沒(méi)問(wèn)題，所以我用 try 和 catch 把上面的代碼包住了，免得測試的時(shí)候出現錯誤。如果想試試的話(huà)可以用下面的代碼作為 news.php：
<?php
echo iconv( "GB2312", "UTF-8", "這就是新聞" );
//echo "這就是新聞";
?>
如果注釋掉第一句而開(kāi)放第二句的話(huà)不僅看到的是亂碼，在 IE 下還會(huì )出現 -1072896748 錯誤。有意思的是 IE 好像還會(huì )緩存由 XMLHTTPRequest 收到的內容，而 FireFox 則不會(huì )，所以在測試中會(huì )出現刷新 IE 很多次看到的還是舊數據的問(wèn)題，可以在程序里加上下面 4 句話(huà)解決這個(gè)問(wèn)題：
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );
<?php
echo iconv( "GB2312", "UTF-8", "這就是新聞" );
//echo "這就是新聞";
?>
如果注釋掉第一句而開(kāi)放第二句的話(huà)不僅看到的是亂碼，在 IE 下還會(huì )出現 -1072896748 錯誤。有意思的是 IE 好像還會(huì )緩存由 XMLHTTPRequest 收到的內容，而 FireFox 則不會(huì )，所以在測試中會(huì )出現刷新 IE 很多次看到的還是舊數據的問(wèn)題，可以在程序里加上下面 4 句話(huà)解決這個(gè)問(wèn)題：
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );
呵呵，好了，今天就寫(xiě)到這里，RSS 的部分明天再寫(xiě)，開(kāi)飯……
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=547782
[點(diǎn)擊此處收藏本文] 發(fā)表于 2005年12月09日 12:08 PM
