想象使用一个简单HTML文件来把一个请求发送到一个服务器端脚本,收到一个基于该请求的定制XML文件,然后把它显示给用户而几乎不需要刷新浏览器!本文作者将同你一起探讨怎样在普通Web应用程序中联合PHP和AJAX技术来创建实时的数据传输而不需要进行浏览器刷新。
尽管本文所使用的是PHP语言,但是请记住任何服务器端语言都会正常工作。为了理解本文,我假定你基本理解JavaScript和PHP或一类似服务器端语言。
本文示例使用AJAX来把一请求从一个RSS馈送发送到一定制的PHP对象。该PHP对象复制一份在本地服务器上的该馈送并返回这一路径。该请求对象收到这一路径,分析它,并且把数据以HTML形式显示给用户。这听起来涉及很多步骤,其实它仅由4个小文件组成。之所以使用了4个小文件,是为了平衡它们各自特定的力量而使整个系统的处理极富效率性。
我想,有些读者可能会问,为什么你要创建在本地服务器上的馈送的一个副本而不是简单分析最原始的馈送。原因是,这样以来可以允许绕过XML HTTP Request对象所强加的跨域限制。后面,我还会解释怎样创建这个定制的PHP对象;但是首先,让我们从表单创建开始。
创建发出请求的表单
你要做的第一事情是,在你的HTML的head标签之间包括你可能想使用的JavaScript和任何CSS文件。我包括了一个式样表来实现该聚合器的最后布局并用一个JavaScript文件来发出请求和进行馈送分析:
<script></script>
下一步,创建一个表单,它针对你所选择的一个RSS馈送发出请求。我创建的表单只包括一个输入字段和一个提交该请求的按钮。该请求的查询是一个字符串,它由馈送输入值和一个将在服务器端被校验的口令字组成;作为一个示例,我使用了下面形式:
"password=mypassword
该代码在每次页面加载之时发出一次请求;因此,如果页面被刷新,现有的在该输入域中的馈送串将在页面加载时被请求。下面是一个表单数据的示例,连同一些div标签用来显示已分析的馈送的特定结点:
复制代码 代码如下:
复制代码 代码如下:
//如果不存在目录就创建一个
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir, 0666);
}
复制代码 代码如下:
//创建唯一的命名
$file=md5($rss_url);
$path="$dir/$file.xml";
复制代码 代码如下:
//复制馈送到本地服务器
copy($rss_url,"$path");
return $path;
Following is the small, yet powerful RSS class in its entirety:
class RSS
{
function get($rss_url)
{
if($rss_url != "")
{
//如果不存在目录就创建一个
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir, 0666);
}
// 创建一个唯一的名字
$file = md5($rss_url);
$path = "$dir/$file.xml";
//复制馈送到本地服务器
copy($rss_url, "$path");
return $path;
}
}
}
?>
复制代码 代码如下:
if($password == "mypassword")
{
require_once('classes/RSS.class.php');
$rss = new RSS();
echo $rss->get($request);
}
else
{
echo "You are an unauthorized user";
}
?>
复制代码 代码如下:
function sendFeed(url){
post.onreadystatechange = sendRequest;
post.open("POST", url, true);
post.send(url);
}
一旦收到来自于PHP对象的响应并被正确加载,则对与该响应相应的本地文件发出另一个请求。在这种情况中,post.responseText提供给我们该新文件的路径:
function sendRequest(){
if(checkReadyState(post)){
request = createRequestObject();
request.onreadystatechange = onResponse;
request.open("GET", post.responseText, true);
request.send(null);
}
}
复制代码 代码如下:
var _logo = "";
var _title = response.getElementsByTagName('title')[0].firstChild.data;
var _link = response.getElementsByTagName('link')[0].firstChild.data;;
_logo += "" + _title + "
";
if(checkForTag(response.getElementsByTagName('image')[0]))
{
var _url = response.getElementsByTagName('url')[0].firstChild.data;
_logo += "
"
}
document.getElementById('logo').innerHTML = _logo;
复制代码 代码如下:
if(checkForTag(response.getElementsByTagName('image')[0]) "" i>0){
var _title=response.getElementsByTagName('title')[i+1].firstChild.data;
var _link=response.getElementsByTagName('link')[i+1].firstChild.data;
}
else{
var _title =response.getElementsByTagName('title')[i].firstChild.data;
var _link = response.getElementsByTagName('link')[i].firstChild.data;
}
你可以使用checkForTag方法来检查是否存在特定的标签:
function checkForTag(tag){
if(tag != undefined) {
return true;
}
else{
return false;
}
}
复制代码 代码如下:
if(i>1){
var previousPubDate = response.getElementsByTagName('pubDate')[i-1].firstChild.data;
}
if(pubDate != previousPubDate || previousPubDate == undefined){
_copy += "
复制代码 代码如下:
function showDetails(index){
document.getElementById('details').innerHTML = response.getElementsByTagName('description')[index].firstChild.data;
}