DDR爱好者之家 Design By 杰米
想象使用一个简单HTML文件来把一个请求发送到一个服务器端脚本，收到一个基于该请求的定制XML文件，然后把它显示给用户而几乎不需要刷新浏览器！本文作者将同你一起探讨怎样在普通Web应用程序中联合PHP和AJAX技术来创建实时的数据传输而不需要进行浏览器刷新。
尽管本文所使用的是PHP语言，但是请记住任何服务器端语言都会正常工作。为了理解本文，我假定你基本理解JavaScript和PHP或一类似服务器端语言。
本文示例使用AJAX来把一请求从一个RSS馈送发送到一定制的PHP对象。该PHP对象复制一份在本地服务器上的该馈送并返回这一路径。该请求对象收到这一路径，分析它，并且把数据以HTML形式显示给用户。这听起来涉及很多步骤，其实它仅由4个小文件组成。之所以使用了4个小文件，是为了平衡它们各自特定的力量而使整个系统的处理极富效率性。
我想，有些读者可能会问，为什么你要创建在本地服务器上的馈送的一个副本而不是简单分析最原始的馈送。原因是，这样以来可以允许绕过XML HTTP Request对象所强加的跨域限制。后面，我还会解释怎样创建这个定制的PHP对象；但是首先，让我们从表单创建开始。
创建发出请求的表单
你要做的第一事情是，在你的HTML的head标签之间包括你可能想使用的JavaScript和任何CSS文件。我包括了一个式样表来实现该聚合器的最后布局并用一个JavaScript文件来发出请求和进行馈送分析：
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="/UploadFiles/2021-04-02/request.js"> 下一步，创建一个表单，它针对你所选择的一个RSS馈送发出请求。我创建的表单只包括一个输入字段和一个提交该请求的按钮。该请求的查询是一个字符串，它由馈送输入值和一个将在服务器端被校验的口令字组成；作为一个示例，我使用了下面形式：
"password=mypassword
该代码在每次页面加载之时发出一次请求；因此，如果页面被刷新，现有的在该输入域中的馈送串将在页面加载时被请求。下面是一个表单数据的示例，连同一些div标签用来显示已分析的馈送的特定结点：
复制代码 代码如下:
<body onload="javascript:makeRequest('request.php?request=' + document.feedForm.feed.value + 'password=mypassword');">
<form name="feedForm" method="post" action="javascript:makeRequest('request.php?request=' + document.feedForm.feed.value + 'password=mypassword');">
Enter a feed: <input type="text" name="feed" id="feed" size="20">
<input type="submit" name="submit" value="Add Feed">
</form>
<div id="logo"></div>
<hr/>
<div id="copy"></div>
<div id="details"></div>
</body>
我所创建的这三个div标签是logo，copy和details，其中每一个都在布局样式表中有一个与之相关联的样式。当我们分析馈送时将会用到它们，但是我们首先需要能够存取我们所请求的馈送。这可以使用我前面所提到的PHP对象来完成。
创建定制的PHP对象
我用PHP创建了一个小型RSS类，它在本地服务器上创建一个请求馈送的副本，这样它可以为我们稍后要创建的XML HTTP Request对象所存取。典型地，你不能跨域请求一个文件，这意味着你要请求的文件需要位于本地服务器上。这个类是一种解决跨域问题的办法，因为它创建该馈送的一个副本，这个副本在本地服务器上被请求并且把本地路径返回到该馈送，然后它由该Request对象来存取。
这个类中唯一的方法是一个请求方法，它仅有一个指向所请求的RSS 馈送的URL的参数。然后，它通过rss的名字来检查是否一目录位于本地服务器上。如果不存在，就创建一个并把其权限模式设置为0666，这意味着该目录可读写。当被设置为可读的时，该目录就可以在以后被存取；而当被设置为可写的时，就可以把该馈送的一个副本写向本地服务器上的目录：
复制代码 代码如下:
//如果不存在目录就创建一个
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir， 0666);
}
注意
在一台Windows机器上，对于PHP 4.2.0及以上版本中模式设置是不被要求的。但是，如果它存在的话，它将被忽略；因此，我保留了它，以备该工程被迁移到一台UNIX或Linux服务器上。
在把馈送复制到该服务器前，我们需要一个唯一的文件名。我对这个完整的URL使用了md5加密方法以确保所有馈送的名字是唯一的。通过这个新的文件名，它可以连接一个描述指向该文件的目录的字符串；这将在创建该馈送的副本时使用：
复制代码 代码如下:
//创建唯一的命名
$file=md5($rss_url);
$path="$dir/$file.xml";
通过使用被定义在上面的路径和到原始的被请求的馈送的URL的参考，现在我们能创建该文件的一个副本。最后，把该路径返回到该新文件，作为对该请求的响应：
复制代码 代码如下:
//复制馈送到本地服务器
copy($rss_url，"$path");
return $path;
Following is the small， yet powerful RSS class in its entirety:
<?php
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;
}
}
}
?>
为了存取该PHP类中的方法，需要有一个请求文件来担当到该类的一个接口，这也正是我们正在请求的文件。这个文件首先验证从该请求查询的一口令变量，或者返回一条指定该请求者不是一名经授权的用户的消息，或者用指向RSS馈送（该馈送在由请求方法处理后被复制到本地服务器）的路径作出响应。为了响应该RSS馈送，需要包含这个RSS对象并把它实例化，并且需要通过使用被请求的馈送的URL作为一参数来激活请求方法:
复制代码 代码如下:
<?
if($password == "mypassword")
{
require_once('classes/RSS.class.php');
$rss = new RSS();
echo $rss->get($request);
}
else
{
echo "You are an unauthorized user";
}
?>
GET/POST与AJAX相结合
为了POST请求，我们首先需要创建该请求对象。如果你没有创建请求对象的经验，那么可以读一下我的文章《How To Use AJAX》或简单地研究一下本文的示例源代码。一旦创建该请求对象，就可以调用sendFeed方法并传递由表单所创建的URL：
复制代码 代码如下:
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);
}
}
分析响应
由于RSS馈送之间的区别，分析响应具有一定的挑战性。一些含有包含标题和描述结点的图像，而其它则没有。因此，当我们分析回馈时，我们需要做一点检查来译解它是否包括一图像。如果它包括一图像，我们就可以，与该馈送的标题和链接一起，在image div标签中显示该图像：
复制代码 代码如下:
var _logo = "";
var _title = response.getElementsByTagName('title')[0].firstChild.data;
var _link = response.getElementsByTagName('link')[0].firstChild.data;;
_logo += "<a href='" + _link + "' target='_blank'>" + _title + "</a><br/>";
if(checkForTag(response.getElementsByTagName('image')[0]))
{
var _url = response.getElementsByTagName('url')[0].firstChild.data;
_logo += "<img src='" + _url + "' border='0'><br/>"
}
document.getElementById('logo').innerHTML = _logo;
我们不仅必须检查每个图像以显示它，当遍历馈送中所有的项时我们还需要对之进行检查。因为如果存在一个图像，那么所有另外的标题和链接结点索引都将无法正常工作。因此，当发现图像标签时，我们应该通过在每一次遍历中增加索引值（+1）来调整标题和链接结点的索引：
复制代码 代码如下:
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;
}
}
存在许多种进行馈送分析的可能性。例如，你可以把项赋到类别上并使得该类别可折迭，这样用户就可以对其想观看的内容进行选择。作为一个示例，我使用日期来对项进行分类-这可以通过译解是否针对一个特定项的pubDate不同于前一个项的pubDate并且相应地显示一新的日期来实现：
复制代码 代码如下:
if(i>1){
var previousPubDate = response.getElementsByTagName('pubDate')[i-1].firstChild.data;
}
if(pubDate != previousPubDate || previousPubDate == undefined){
_copy += "<div id='detail'>" + pubDate + "</div><hr align='left' width='90%'/>";
}
_copy += "<a href=\"javascript:showDetails('" + i + "');\">" + _title + "</a><br/><br/>";
document.getElementById('copy').innerHTML += _copy;
注意，上面的最后一部分是showDetails方法，它用于当一用户从一个馈送中选择一特定的项时进行细节显示。这个方法有一个参数（项索引值），这个索引用于发现在该馈送中details结点的索引：
复制代码 代码如下:
function showDetails(index){
document.getElementById('details').innerHTML = response.getElementsByTagName('description')[index].firstChild.data;
}
结论
使用AJAX发送查询字符串到一个服务器端脚本并检索一个基于该串的定制响应，这对于任何web开发者都有实现的可能。这样以来，你的下一个web应用程序也将会充满了新的可能性。
尽管本文所使用的是PHP语言，但是请记住任何服务器端语言都会正常工作。为了理解本文，我假定你基本理解JavaScript和PHP或一类似服务器端语言。
本文示例使用AJAX来把一请求从一个RSS馈送发送到一定制的PHP对象。该PHP对象复制一份在本地服务器上的该馈送并返回这一路径。该请求对象收到这一路径，分析它，并且把数据以HTML形式显示给用户。这听起来涉及很多步骤，其实它仅由4个小文件组成。之所以使用了4个小文件，是为了平衡它们各自特定的力量而使整个系统的处理极富效率性。
我想，有些读者可能会问，为什么你要创建在本地服务器上的馈送的一个副本而不是简单分析最原始的馈送。原因是，这样以来可以允许绕过XML HTTP Request对象所强加的跨域限制。后面，我还会解释怎样创建这个定制的PHP对象；但是首先，让我们从表单创建开始。
创建发出请求的表单
你要做的第一事情是，在你的HTML的head标签之间包括你可能想使用的JavaScript和任何CSS文件。我包括了一个式样表来实现该聚合器的最后布局并用一个JavaScript文件来发出请求和进行馈送分析：
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="/UploadFiles/2021-04-02/request.js"> 下一步，创建一个表单，它针对你所选择的一个RSS馈送发出请求。我创建的表单只包括一个输入字段和一个提交该请求的按钮。该请求的查询是一个字符串，它由馈送输入值和一个将在服务器端被校验的口令字组成；作为一个示例，我使用了下面形式：
"password=mypassword
该代码在每次页面加载之时发出一次请求；因此，如果页面被刷新，现有的在该输入域中的馈送串将在页面加载时被请求。下面是一个表单数据的示例，连同一些div标签用来显示已分析的馈送的特定结点：
复制代码 代码如下:
<body onload="javascript:makeRequest('request.php?request=' + document.feedForm.feed.value + 'password=mypassword');">
<form name="feedForm" method="post" action="javascript:makeRequest('request.php?request=' + document.feedForm.feed.value + 'password=mypassword');">
Enter a feed: <input type="text" name="feed" id="feed" size="20">
<input type="submit" name="submit" value="Add Feed">
</form>
<div id="logo"></div>
<hr/>
<div id="copy"></div>
<div id="details"></div>
</body>
我所创建的这三个div标签是logo，copy和details，其中每一个都在布局样式表中有一个与之相关联的样式。当我们分析馈送时将会用到它们，但是我们首先需要能够存取我们所请求的馈送。这可以使用我前面所提到的PHP对象来完成。
创建定制的PHP对象
我用PHP创建了一个小型RSS类，它在本地服务器上创建一个请求馈送的副本，这样它可以为我们稍后要创建的XML HTTP Request对象所存取。典型地，你不能跨域请求一个文件，这意味着你要请求的文件需要位于本地服务器上。这个类是一种解决跨域问题的办法，因为它创建该馈送的一个副本，这个副本在本地服务器上被请求并且把本地路径返回到该馈送，然后它由该Request对象来存取。
这个类中唯一的方法是一个请求方法，它仅有一个指向所请求的RSS 馈送的URL的参数。然后，它通过rss的名字来检查是否一目录位于本地服务器上。如果不存在，就创建一个并把其权限模式设置为0666，这意味着该目录可读写。当被设置为可读的时，该目录就可以在以后被存取；而当被设置为可写的时，就可以把该馈送的一个副本写向本地服务器上的目录：
复制代码 代码如下:
//如果不存在目录就创建一个
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir， 0666);
}
注意
在一台Windows机器上，对于PHP 4.2.0及以上版本中模式设置是不被要求的。但是，如果它存在的话，它将被忽略；因此，我保留了它，以备该工程被迁移到一台UNIX或Linux服务器上。
在把馈送复制到该服务器前，我们需要一个唯一的文件名。我对这个完整的URL使用了md5加密方法以确保所有馈送的名字是唯一的。通过这个新的文件名，它可以连接一个描述指向该文件的目录的字符串；这将在创建该馈送的副本时使用：
复制代码 代码如下:
//创建唯一的命名
$file=md5($rss_url);
$path="$dir/$file.xml";
通过使用被定义在上面的路径和到原始的被请求的馈送的URL的参考，现在我们能创建该文件的一个副本。最后，把该路径返回到该新文件，作为对该请求的响应：
复制代码 代码如下:
//复制馈送到本地服务器
copy($rss_url，"$path");
return $path;
Following is the small， yet powerful RSS class in its entirety:
<?php
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;
}
}
}
?>
为了存取该PHP类中的方法，需要有一个请求文件来担当到该类的一个接口，这也正是我们正在请求的文件。这个文件首先验证从该请求查询的一口令变量，或者返回一条指定该请求者不是一名经授权的用户的消息，或者用指向RSS馈送（该馈送在由请求方法处理后被复制到本地服务器）的路径作出响应。为了响应该RSS馈送，需要包含这个RSS对象并把它实例化，并且需要通过使用被请求的馈送的URL作为一参数来激活请求方法:
复制代码 代码如下:
<?
if($password == "mypassword")
{
require_once('classes/RSS.class.php');
$rss = new RSS();
echo $rss->get($request);
}
else
{
echo "You are an unauthorized user";
}
?>
GET/POST与AJAX相结合
为了POST请求，我们首先需要创建该请求对象。如果你没有创建请求对象的经验，那么可以读一下我的文章《How To Use AJAX》或简单地研究一下本文的示例源代码。一旦创建该请求对象，就可以调用sendFeed方法并传递由表单所创建的URL：
复制代码 代码如下:
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);
}
}
分析响应
由于RSS馈送之间的区别，分析响应具有一定的挑战性。一些含有包含标题和描述结点的图像，而其它则没有。因此，当我们分析回馈时，我们需要做一点检查来译解它是否包括一图像。如果它包括一图像，我们就可以，与该馈送的标题和链接一起，在image div标签中显示该图像：
复制代码 代码如下:
var _logo = "";
var _title = response.getElementsByTagName('title')[0].firstChild.data;
var _link = response.getElementsByTagName('link')[0].firstChild.data;;
_logo += "<a href='" + _link + "' target='_blank'>" + _title + "</a><br/>";
if(checkForTag(response.getElementsByTagName('image')[0]))
{
var _url = response.getElementsByTagName('url')[0].firstChild.data;
_logo += "<img src='" + _url + "' border='0'><br/>"
}
document.getElementById('logo').innerHTML = _logo;
我们不仅必须检查每个图像以显示它，当遍历馈送中所有的项时我们还需要对之进行检查。因为如果存在一个图像，那么所有另外的标题和链接结点索引都将无法正常工作。因此，当发现图像标签时，我们应该通过在每一次遍历中增加索引值（+1）来调整标题和链接结点的索引：
复制代码 代码如下:
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;
}
}
存在许多种进行馈送分析的可能性。例如，你可以把项赋到类别上并使得该类别可折迭，这样用户就可以对其想观看的内容进行选择。作为一个示例，我使用日期来对项进行分类-这可以通过译解是否针对一个特定项的pubDate不同于前一个项的pubDate并且相应地显示一新的日期来实现：
复制代码 代码如下:
if(i>1){
var previousPubDate = response.getElementsByTagName('pubDate')[i-1].firstChild.data;
}
if(pubDate != previousPubDate || previousPubDate == undefined){
_copy += "<div id='detail'>" + pubDate + "</div><hr align='left' width='90%'/>";
}
_copy += "<a href=\"javascript:showDetails('" + i + "');\">" + _title + "</a><br/><br/>";
document.getElementById('copy').innerHTML += _copy;
注意，上面的最后一部分是showDetails方法，它用于当一用户从一个馈送中选择一特定的项时进行细节显示。这个方法有一个参数（项索引值），这个索引用于发现在该馈送中details结点的索引：
复制代码 代码如下:
function showDetails(index){
document.getElementById('details').innerHTML = response.getElementsByTagName('description')[index].firstChild.data;
}
结论
使用AJAX发送查询字符串到一个服务器端脚本并检索一个基于该串的定制响应，这对于任何web开发者都有实现的可能。这样以来，你的下一个web应用程序也将会充满了新的可能性。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]