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;
}
}
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应用程序也将会充满了新的可能性。
|
||
相关热词搜索: |
||
收藏到网摘: | ||
|