• Ajax学习2


    一段代码:
    <SCRIPT LANGUAGE="JavaScript">
     var bloglist=new Array();
     var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
     function startload()
     {
      xmlHttp.open("GET", "http://www.blogjava.net/zbw25/Rss.aspx", true);
      xmlHttp.onreadystatechange=function()
      {
      if (xmlHttp.readyState==4&&xmlHttp.status==200)
      {
       var xmldom=xmlHttp.responseXML;
       var channel=xmldom.documentElement.childNodes.item(0);
       var itemlist=channel.childNodes;
       for(var i=0;i<itemlist.length;i++)
       {
        var node=itemlist.item(i);
        if(node.tagName=="title")
        {
         blogtitle.innerHTML=node.text;
        }
        if(node.tagName=="link")
        {
         bloglink.href=node.text;
        }
        if(node.tagName=="description")
        {
         blogdescription.innerHTML=node.text;
        }
        if(node.tagName=="managingEditor")
        {
         managingEditor.innerHTML=node.text;
        }
        if(node.tagName=="item")
        {
         bloglist[bloglist.length]=node.childNodes;
        }
       }
       showitem(bloglist[0]);
       }
      }
      xmlHttp.send(null);
     }

     function showitem(itemlist)
     {
      for(var i=0;i<itemlist.length;i++)
      {
       var node=itemlist.item(i);
       if(node.tagName=="title")
       {
        itemtitle.innerHTML=node.text;
       }
       if(node.tagName=="link")
       {
        itemlink.href=node.text;
       }
       if(node.tagName=="description")
       {
        description.innerHTML=node.text;
       }
       if(node.tagName=="author")
       {
        author.innerHTML=node.text;
       }
       if(node.tagName=="pubDate")
       {
        pubDate.innerHTML=node.text;
       }
      }
     }
    </SCRIPT>
    <body onload="startload()">
     <font color="blue"><a id="bloglink" href="#"><div id="blogtitle"></div></a></font>
     <br>
     By <font color="blue"><div id="managingEditor"></div></font>
     <br>
     <font color="blue"><div id="blogdescription"></div></font>
     <br>
     <br>
     <font color="#000066"><a id="itemlink" href="#"><div id="itemtitle"></div></a></font><br>
     By <font color="blue"><div id="author"></div></font><br>
     <div id="description"></div><br>
     <div id="pubDate" align="right"></div>
    </body>

    xmlHttp.status==200
    以后都推荐像这样写。因为xmlHttp.status==200,代表服务器端返回的是正确的结果,这样才有可能正确的解析XML
    responseXML
    第9行的程序是这样的:var xmldom=xmlHttp.responseXML;
    一个XMLHttpRequest,在顺利读取了数据之后,我们其实可以有四种方法,
    得到这个数据。responseText只是其中一种。另外还有三种:
    responseText 将响应信息作为字符串返回
    responseXML 将响应信息格式化为XMLDOM对象并返回
    responseBody 将响应信息以unsigned byte数组的形式返回
    responseStream 将响应信息以IStream对象的形式返回
    其中我们需要深入了解的,只有responseText 和responseXML 两种,至于
    responseBody和responseStream,基本上可以不用考虑。

    对于所谓AJAX应用,其实主要的工作,就是在浏览器客户端与服务器端之间,传递各种XML数据。如果要自己读取String数据,然后再全部自己手工解析XML,那就会非常复杂;而使用responseXML,就可以直接得到一个已经解析好了的XML DOM,这样就很方便了。

    XMLDOM相关API
    就算是直接得到了XMLDOM,事情也还没有结束。我们还需要运用XMLDOM提供的API,来正确的读取其中的数据。XMLDOM实在是太多内容了,这里只介绍这段程序里用到的API吧。

    XMLDOM树:一个XMLDOM,其实是一个内存中的树,一个XML数据
    中的每一个<>中的第一个单词,就代表着一个节点。比如:
    <rss>
    <channel/>
    </rss>
    <channel />,就代表channel节点。如果channel这个节点,直接以/>结尾,
    那么它就不包含子节点。而rss节点,就是一个包含子节点channel的节点。我们
    也可以说,rss是channel的父节点,channel就是rss的子节点。根节点,就是没
    有父节点的节点,也就是顶层节点。
    documentElement:这样就能够得到一个XML DOM树的根节点,具体到
    我们想要分析的RSS文档,就是rss那个节点。
    childNodes与item:这样就能够得到一个节点的所有子节点,以一个数组
    的形式返回。
    1 var childs=node.childNodes;
    2 alert(childs.length);
    3 var itemnode=childs.item(0);
    上面的childs就是一个JavaScript的数组,我们可以通过childs.length,得
    到这个数组的长度。也可以通过item(int),得到其中的某一个元素,这个元素,
    自然也是一个节点。
    tagName:可以获得一个节点的名称。<rss>的tagName自然就是rss,<title>
    的tagName,自然就是title。我们的程序就是通过判断tagName,来识别信息的。
    text:就是一个节点包含的内容。比如< author>读书、思考、生活</ author>。
    那么这个节点的text,就是 读书、思考、生活。
    OK,就说这么多,XML DOM API当然不会这么简单,不过在现在这个程
    序里,我们用到的也就只有这么多。
    innerHTML与href
    比如程序的第15行:blogtitle.innerHTML=node.text;
    第18行:bloglink.href=node.text;
    其实我们可以发现innerHTML与XML DOM中的node.text,有某种相似之
    处。在初始的页面上,我们写着:
    <font color=blue><a id="bloglink" href="#"><div id="blogtitle"></div></a></font>
    这样的内容,在静态的HTML页面里,其实什么都看不到。但是有了<a
    id="bloglink">和<div id="blogtitle">这样的两个元素,我们就可以借助JavaScript
    对于HTML DOM的访问能力,动态的在页面里显示出内容来。
    blogtitle.innerHTML="test";
    就相当于
    <div id="blogtitle">test</div>

    bloglink.href="url";
    就相当于
    <a id="bloglink" href="url">
    这就是初步的动态HTML(DHTML)了。

  • 相关阅读:
    LeetCode Medium:15. 3Sum
    LeetCode Medium:12. Integer to Roman
    LeetCode Medium: 11. Container With Most Water
    TypeError: unsupported operand type(s) for /: 'map' and 'int'
    【C#】课堂知识点#4
    【C#】课堂知识点#3
    【统计与建模】R语言基本操作
    【题解】表达式的值
    【题解】瑞士轮
    【题解】道路游戏
  • 原文地址:https://www.cnblogs.com/lds85930/p/823581.html
Copyright © 2020-2023  润新知