使用prototype.js来开发AJAX

最新推荐文章于 2024-04-18 10:14:12 发布

jxufewbt

最新推荐文章于 2024-04-18 10:14:12 发布

阅读量1.6k

点赞数

分类专栏： Ajax 文章标签： asynchronous function javascript ajax parameters url

本文链接：https://blog.csdn.net/jxufewbt/article/details/1475694

版权

Ajax 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙,而且兼容标准的类库，能帮助你轻松建立有高度互动的web2.0特性的富客户端页面。

下面我们就使用prototype.js来重写前面使用AJAX读取RSS的例子，代码如下(其中第8行的AJAXProxy.asp就是AJAX代理)：

<html>
<head>
<title>ReadRSS</title>
<script src="common/prototype.js"></script>
<script>
function send_Request(url)
{
    var request_url = 'AJAXProxy.asp';
    var request_pars = 'RSS_URL=' + url;
    var myAjax = new Ajax.Request(
        request_url,
        {
            method:'get',
            parameters:request_pars,
            asynchronous:true,       //true---异步;false---同步.默认为true
            onComplete:processRequest
        }
    );
}

function processRequest(XML_Http_Request){
    var results = XML_Http_Request.responseXML;
    var title = null;
    var item = null;
    var link = null;
    var ccc = results.getElementsByTagName("channel");
    var headtitle = ccc[0].getElementsByTagName("title")[0].firstChild.nodeValue;
    var headlink = ccc[0].getElementsByTagName("link")[0].firstChild.nodeValue;
    var cell = document.createElement("div");
    cell.innerHTML = "<h1><a href="+headlink+" target=_blank>"+headtitle+"</a></h1><br>";
    $("result").appendChild(cell);
    var items = results.getElementsByTagName("item");
    for(var i = 0; i < items.length; i++) {
        item = items[i];
        link=item.getElementsByTagName("link")[0].firstChild.nodeValue;
        title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
        var cell = document.createElement("div");
        cell.innerHTML = "<li><a href="+link+" target=_blank>"+title+"</a></li><br>";
        $("result").appendChild(cell);
    }
}

var myGlobalHandlers = {
    onCreate:function (){
        Element.show('systemWorking');
    },
    onComplete:function (){
        if(Ajax.activeRequestCount == 0){
            Element.hide('systemWorking');
        }
    }
};
Ajax.Responders.register(myGlobalHandlers);
</script>
</head>
<body onLoad="javascript:send_Request('http://esoft.bokee.com/rss2.xml');">
<div id='systemWorking'>Loading...</div>
<div id="result"></div>
</body>
</html>