ajax初级教程之获取博文列表

程序员文章站 2023-11-14 19:38:22

在写这个demo时，原本是想直接访问小菜博客的rss，但这是明显的跨域访问，是不允许的。 &nbs...

在写这个demo时，原本是想直接访问小菜博客的rss，但这是明显的跨域访问，是不允许的。

因此，小菜把博客rss保存到了本地，就是一个xml格式文件，直接用ajax请求本地的xml文件。

通过本例，展示了如下技术：

l ajax的核心类xmlhttprequest的使用。

l ajax通过get方式获取服务端xml文件。

l 利用javascript操作xml文件。

l 利用javascript更新html界面。

demo概要说明：

index.html作为主页，引用ajax.js脚本，在ajax.js脚本中利用ajax技术请求同目录下的rss.xml，请求成功后在index.html中显示xml中的信息。

整个过程模拟了ajax的局部刷新效果。

具体代码：

html代码(index.html)：

复制代码代码如下:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="">
     <head>
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <title>获取博客园博客rss列表</title>
         <script type="text/javascript" language="javascript" src="ajax.js"></script>
     </head>
     <body>
         <div id="frmmain">
             <ul id="blogtitlelist"></ul>
             <input name="btnget" value="获取博客标题列表" onclick="javascript:getblogtitle();" type="button" />
         </div>
     </body>
</html>

ajax脚本(ajax.js)：

复制代码代码如下:

function getblogtitle(){

    //根据浏览器类型创建xmlhttprequest对象

    var xmlhttp;

    if(window.xmlhttprequest){

        //ie7、火狐、谷歌等浏览器

        xmlhttp = new xmlhttprequest();

    }else{

        //ie5、ie6浏览器

        xmlhttp = new activexobject("microsoft.xmlhttp");

    }

    //设置异步交互完成后的回调函数

    //function(){}为一个匿名函数，这个过程就是把函数的地址传给xmlhttprequest对象的onreadystatechange属性

    xmlhttp.onreadystatechange=function(){

      //正常情况下status值应该是200，但本地测试无论成功失败返回的都是0

    if(xmlhttp.readystate == 4 && xmlhttp.status == 0){

      //接受xml格式的返回数据，接收文本格式的数据为：xmlhttp.responsetext();

      var requestxml = xmlhttp.responsexml;

      //获取xml中的内容部分

      var blogcontent = requestxml.getelementbyid("feedcontent");

      //获取内容中的h3标题。注意blogtitles将是一个数组，由于javascript是弱类型语言，因此不必指明

      var blogtitles = blogcontent.getelementsbytagname("h3");

      //获取html页面中的ul标签对象

      var ulobj = document.getelementbyid("blogtitlelist");

      //用来临时存放博客标题

      var temptitle;

      //遍历blogtitles数组，获取所有的博客标题

      for(i=0;i<blogtitles.length;i++){

        //获取title元素的值

        temptitle = blogtitles[i].firstchild.childnodes[0].nodevalue;

        //将title值插入到界面的ul标签中

        ulobj.innerhtml += "<li>" + temptitle + "</li>";

      }

        }

    };

    //构造交互参数

    //第一个参数是指get方式提交还是post方式

    //第二个参数是提交的url，它可以是一个文本文件(*.xml)、脚本文件(*.aspx)等。

    //第三个参数表示是否异步通信，ture表示异步。

    xmlhttp.open("get","rss.xml",true);

    //提交请求

    xmlhttp.send();

}

博文列表rss(片段)(rss.xml)：

复制代码代码如下:

 <div id="feedcontent">

   <div class="entry">

     <h3>

       <a href="">

         socket传输文件时进行校验(简单解决tcp粘包问题)

       </a>

       <div class="lastupdated">

         2012年12月27日 12:57

       </div>

     </h3>

     <div xml:base="" class="feedentrycontent">

       normal 0 false 7.8 磅 0 2 false false false en-us zh-cn x-none ...

     </div>

   </div>

   <div style="clear: both;">

   </div>

   <div class="entry">

     <h3>

       <a href="">

         c#(服务器)与java(客户端)通过socket传递对象

       </a>

       <div class="lastupdated">

         2012年12月23日 8:44

       </div>

     </h3>

     <div xml:base="" class="feedentrycontent">

       最近做项目，需要c#与java间的交互技术： n s

     </div>

   </div>

   <div style="clear: both;">

   </div>

上边的代码注释非常详细，相信读者能够领会这个过程。

补充说明：

l 注意本例中，在设置xmlhttprequest对象的onreadystatechange属性时，在回调函数中应该判断服务器是否响应完成，其中readystate值为4表示响应完成，status值为200表示请求成功，但由于本例是在本地演示的，并没有搭建服务器环境，因此status的值总是0。

l 所谓跨域访问，即在某个服务器中通过javascript脚本请求其他服务器，所有类似这样的请求都叫跨域。跨域访问会直接被浏览器拒绝。跨域关键问题在于是浏览器拒绝了请求，是javascript权限不足引起的，而不是说xmlhttprequest对象没有跨域访问的功能，xmlhttprequest对象无所谓域，假如把xmlhttprequest对象写在程序中(包括c/s、b/s程序)而不是脚本中，可以随意访问服务器，甚至可以模拟手工访问。关于如何解决跨域访问问题，请读者自行google。

上一篇： Python中非常实用的一些功能和函数分享

下一篇：两种php实现图片上传的方法