• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >AJAX > ajax初级教程之获取博文列表

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了ajax初级教程之获取博文列表等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

在写这个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>
</div>

         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();
}
</div>

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

 <div id="feedContent">
   <div class="entry">
     <h3>
       <a href="http://www.cnblogs.com/iyangyuan/archive/2012/12/27/2835509.html">
         Socket传输文件时进行校验(简单解决TCP粘包问题)
       </a>
       <div class="lastUpdated">
         2012年12月27日 12:57
       </div>
     </h3>
     <div xml:base="http://feed.cnblogs.com/blog/u/135156/rss" 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="http://www.cnblogs.com/iyangyuan/archive/2012/12/23/2829712.html">
        

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11ajax jquery校验用户是否已经注册演示代码
  • 2017-05-11一个AJAX类代码
  • 2017-05-11ajax原理总结附简单实例及其优点
  • 2017-05-11Ajax实现页面自动刷新实例解析
  • 2017-05-11pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
  • 2017-05-11解决ajax返回验证的时候总是弹出error错误的方法
  • 2017-05-11ajax后退解决方案
  • 2017-05-11Ajax获取到数据放入echarts里不显示的原因分析及解决办法
  • 2017-05-11ajax无刷新评论功能
  • 2017-05-11关于ajax的多次请求问题

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • ajax回调函数中使用$(this)取不到对象的解决方法
    • asp+Ajax简单客户登陆验证
    • AJAX入门之深入理解JavaScript中的函数
    • 非常实用的ajax用户注册模块
    • Jquery中ajax提交表单几种方法(get、post两种方法)
    • 浅谈AJAX开发技术
    • AJAX和WebService实现邮箱验证(无刷新验证邮件地址是否合法)
    • 将xml文件作为一个小的数据库,进行学生的增删改查的简单实例
    • ajax给全局变量赋值问题解决示例
    • ajax实时任务提示功能的实现代码第1/2页

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有