首页 > 开发 > AJAX > 正文

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

2024-09-01 08:28:37
字体:
来源:转载
供稿:网友

在写这个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="http://www.w3.org/1999/xhtml">
     <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();

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表