圆月山庄资源网

ajax初级教程之获取博文列表
网络编程 2024/12/26 佚名
3 2
圆月山庄资源网 Design By www.vgjia.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="/UploadFiles/2021-04-02/ajax.js">      </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="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">
         C#(服务器)与Java(客户端)通过Socket传递对象
       </a>
       <div class="lastUpdated">
         2012年12月23日 8:44
       </div>
     </h3>
     <div xml:base="http://feed.cnblogs.com/blog/u/135156/rss" 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。

标签：
ajax,教程,列表
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接