為了排遣這段時(shí)間的無聊也順便做個(gè) RSS 應(yīng)用的練習(xí)，決定給自己維護(hù)的一個(gè)小網(wǎng)站加個(gè)首頁新聞，瀏覽器用 Ajax 或者 Ajah 從服務(wù)器取新聞異步的顯示出來，同時(shí)提供 RSS 源供聚合器訂閱。
XMLHTTPRequest 從上次做過一個(gè)手機(jī)模擬器后就再?zèng)]碰過，這次在網(wǎng)上搜尋了一番居然發(fā)現(xiàn)了一個(gè)好東西：http://www./family/andrew/webdesign/xmlhttprequest/，一個(gè) Cross-Browser 的 XMLHttpRequest 實(shí)現(xiàn)，作者在創(chuàng)作共用條款（Creative Commons License）下發(fā)布這個(gè)庫，只要你不移除腳本中作者的姓名和網(wǎng)址就可以自由使用，就用它了！下載 xmlhttprequest.js 以備后用。
數(shù)據(jù)可以保存在數(shù)據(jù)庫中也可以簡(jiǎn)單的寫入到服務(wù)器的一個(gè)文件中，為了靈活起見我就在 MySQL 中新建一個(gè)表放站內(nèi)新聞了，就這么幾個(gè)字段：id、title、content、time。新聞錄入和從數(shù)據(jù)庫中取數(shù)據(jù)提供給 Ajax/Ajah 請(qǐng)求這種垃圾代碼我就不貼了:-)
下面是客戶端 XMLHTTPRequest 的代碼：
<html>
<head>
<title>首頁新聞測(cè)試</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>首頁新聞測(cè)試</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>
這里唯一值得說明的就是 XMLHTTPRequest 默認(rèn)是用 UTF-8 傳遞數(shù)據(jù)的，所以你的數(shù)據(jù)源最好也用 UTF-8 否則（因?yàn)槲覀冞@里客戶端已經(jīng)指定了要用 GB2312 了）得到的會(huì)是亂碼，這在 IE 下會(huì)引發(fā) JavaScript 錯(cuò)誤，在 FireFox 下卻沒問題，所以我用 try 和 catch 把上面的代碼包住了，免得測(cè)試的時(shí)候出現(xiàn)錯(cuò)誤。如果想試試的話可以用下面的代碼作為 news.php：
<?php
echo iconv( "GB2312", "UTF-8", "這就是新聞" );
//echo "這就是新聞";
?>
如果注釋掉第一句而開放第二句的話不僅看到的是亂碼，在 IE 下還會(huì)出現(xiàn) -1072896748 錯(cuò)誤。有意思的是 IE 好像還會(huì)緩存由 XMLHTTPRequest 收到的內(nèi)容，而 FireFox 則不會(huì)，所以在測(cè)試中會(huì)出現(xiàn)刷新 IE 很多次看到的還是舊數(shù)據(jù)的問題，可以在程序里加上下面 4 句話解決這個(gè)問題：
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 "這就是新聞";
?>
如果注釋掉第一句而開放第二句的話不僅看到的是亂碼，在 IE 下還會(huì)出現(xiàn) -1072896748 錯(cuò)誤。有意思的是 IE 好像還會(huì)緩存由 XMLHTTPRequest 收到的內(nèi)容，而 FireFox 則不會(huì)，所以在測(cè)試中會(huì)出現(xiàn)刷新 IE 很多次看到的還是舊數(shù)據(jù)的問題，可以在程序里加上下面 4 句話解決這個(gè)問題：
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" );
呵呵，好了，今天就寫到這里，RSS 的部分明天再寫，開飯……
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=547782
[點(diǎn)擊此處收藏本文] 發(fā)表于 2005年12月09日 12:08 PM
