80社区

Ajax技术WEB开发

80社区 2007-3-20 10:40:31 文章来源:

想象使用一个简单HTML文件来把一个请求发送到一个服务器端脚本，收到一个基于该请求的定制XML文件，然后把它显示给用户而几乎不需要刷新浏览器！本文作者将同你一起探讨怎样在普通Web应用程序中联合PHP和AJAX技术来创建实时的数据传输而不需要进行浏览器刷新。

　　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应用程序也将会充满了新的可能性。

　　注意

　　在一台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相结合

function sendFeed(url){
　post.onreadystatechange = sendRequest;
　post.open("POST"， url， true);
　post.send(url);
}

　　分析响应

　　你可以使用checkForTag方法来检查是否存在特定的标签：

function checkForTag(tag){
　if(tag != undefined) {
　　return true;
　}
　else{
　　return false;
　}
}

function showDetails(index){
　document.getElementById('details').innerHTML = response.getElementsByTagName('description')[index].firstChild.data;
}

　　结论

责任编辑: 笨小孩儿浏览量:

上一篇文章: AJAX初体验之上手篇

下一篇文章: Ajax并不是一种技术(Ajax入门好文章)