Ajax — 返回数据的用途

前端技术 everyinch 1576℃ 0评论

每次进行的简单Ajax请求并没有什么不同,重要的是从服务器返回的数据能帮助我们完成任务。
1. 基于XML的RSS Feed
从服务器返回的数据格式中最普遍的是XML格式,所有现代的浏览器都对XML文档有直接的支持,能即时将它们转换为DOM形式,只要像遍历其它DOM一样的遍历它就可以了。通常无法使用getElementById函数遍历服务器返回的XML文档,这是因为浏览器对非HTML的XML文档没有创建唯一的id属性。下面展示一个例子,从基于XML的远程RSS Feed来加载文章的标题

<html>
<head>
    <title>Dynamic RSS Feed Widget</title>
    <!—基于通用的Ajax函数 -->
    <script src="ajax.js"></script>
    <script>
        // 等待文档加载完毕
        window.onload = function(){
            // 使用Ajax载入RSS feed
            ajax({
                // RSS feed的URL
                url: "rss.xml",

                // xml文档类型
                type: "xml",

                // 请求成功后执行
                onSuccess: function( rss ) {
                    // 把所有RSS feed的标题都插入到id为'feed'的<ol>中
                    var feed = document.getElementById("feed");

                    // RSS XML文档中所有的标题
                    var titles = rss.getElementsByTagName("title");
                    
                    // 遍历标题
                    for ( var i = 0; i < titles.length; i++ ) {
                        // 创建一个<li>元素来存放标题
                        var li = document.createElement("li");

                        // 将它的内容设置为项目标题
                        li.innerHTML = titles[i].firstChild.nodeValue;

                        // 添加到<ol>元素中
                        feed.appendChild( li );
                    }
                }
            });
        };
    </script>
</head>
<body>
    <h1>Dynamic RSS Feed Widget</h1>
    <p>Check out my RSS feed:</p>
     <!—在这里插入RSS feed -->
    <ol id="feed"></ol>
</body>
</html>

从上面的例子可以看出,一旦把Ajax请求/响应过程的复杂性解决了,剩下的处理其实并不复杂。XML是一种从服务器端快速传输数据到客户端的方法。
2. 注入HTML
可以用Ajax实现的另一个有用的技巧是,动态地将HTML片段注入到文档里。这个技巧和遍历XML的方法区别在于,不必解析和遍历从服务器返回的数据,就可以把它们插入到文档中。
从远程文件加载一段HTML代码,并将它注入到当前的网页中:

<html>
<head>
    <title>HTML Sports Scores Loaded via AJAX</title>
    <!—Load in our generic AJAX function -->
    <script src="ajax.js"></script>
    <script>
        // 等待文档加载完毕
        window.onload = function(){
            // 使用Ajax载入RSS feed
            ajax({
                // HTML文档的url
                url: "scores.html",

                // HTML文档类型
                type: "html",

                // 请求成功后执行
                onSuccess: function( html ) {
                    // 将数据插入到id为'scores'的div中
                    var scores = document.getElementById("scores");

                    // 将新的HTML文档注入文档
                    scores.innerHTML = html;
                }
            });
        };
    </script>
</head>
<body>
    <h1> HTML Sports Scores Loaded via AJAX </h1>
     <!—注入HTML文档的位置 -->
    <div id="scores"></div>
</body>
</html>

3. JSON与JavaScript
JSON数据可以作为XML文档的一种轻量级的替代品。此外,从服务器提供纯JavaScript代码则是一个构建动态多用户Web应用程序的好方法。
动态载入并执行一个远程JavaScript文件:

<html>
<head>
    <!—载入通用的Ajax函数 -->
    <script src="ajax.js"></script>
    <script>
        // 加载远程的JavaScript文件
        ajax({
            // JavaScript文件的url
            url: "myscript.js",

            // script文档类型
            type: "script"
        });
    </script>
</head>
<body></body>
</html>


转载请注明:陈童的博客 » Ajax — 返回数据的用途

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量