分享

JS解析XML - snowfox3761的专栏

 Blex 2011-06-08
朋友很急,正好我没什么事就一起帮忙,顺便学一学。
前一段还以为js上解析xml是ajax的功劳,其实不然。
朋友的问题如下:
Dear Applicant,
Thank you very much for your interest in this position. Would you please send me some _fragment_ of code and designment document that you've worked on in your past projects?  That will helps us better evaluate your applicaiton.
We hope you can demonstrate your experience/learning ability by finishing the assignment below. It'll be a jscript function to transform a given format of XML input to another XML format.
The input would be like:

<?xml version="1.0"?>
<menu xmlns="">
    <menuitem>
        <node>1</node>
        <parent>1</parent>
        <name>parent</name>
    </menuitem>
    <menuitem>
        <node>2</node>
        <parent>1</parent>
        <name>1st child</name>
    </menuitem>
    <menuitem>
        <node>3</node>
        <parent>1</parent>
        <name>2nd child</name>
    </menuitem>
    <menuitem>
        <node>4</node>
        <parent>2</parent>
        <name>grantchild</name>
    </menuitem>
</menu>

The output would be like:
<?xml version="1.0"?>
<menu xmlns="">
    <menuitem>
        <name>parent</name>
        <menuitem>
            <name>1st child</name>
            <menuitem>
                <name>grand child</name>
            </menuitem>
        </menuitem>
        <menuitem>
            <name>2nd child</name>
        </menuitem>
    </menuitem>
</menu>
In the input format, tag "node" and "parent" specifies the structure of the tree, while "name" and others tags should be copied to the output format.  Therefore, the code should be able to handle the following fragment of XML:
<menuitem>
        <node>2</node>
        <parent>1</parent>
        <name>1st child</name>
        <lastName>Dai</lastName>
        <firstName>Kun</firstName>
</menuitem>
Thank you again for your time, and please reply this email after you get it.
我只帮忙解析,后面吗,只提供思路:解析的元素封装成js的object,之后处理逻辑就和java一样了。
解析代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function loadXml(){
  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
     //try //Internet Explorer
       //{
      // xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
      // }
      // catch(e)
      // {
      // try //Firefox, Mozilla, Opera, etc.
     // {
     // xmlDoc=document.implementation.createDocument("","",null);
     // }
      //   catch(e) {alert(e.message)}
        //   }
   xmlDoc.async="false";//取消异步加载
   xmlDoc.load("a.xml");
   //xmlDoc.loadXmlString(字符串);如果xml的内容是一个字符串比如<x>1</x>可以用此方法
   //var items = xmlDoc.selectNodes("/menu/menuitem");
   //alert(items.length);
  // for(var i=0;i<items.length;i++){
  // alert(xmlDoc.selectSingleNode("/menu/menuitem["+i+"]/node").text);
  // alert(xmlDoc.selectSingleNode("/menu/menuitem["+i+"]/parent").text);
  // alert(xmlDoc.selectSingleNode("/menu/menuitem["+i+"]/name").text);
   //}
  //方法2
  var items = xmlDoc.getElementsByTagName("menuitem");
   alert(items.length);
   for(var i=0;i<items.length;i++){
   var x = items.firstChild;
   alert(x.getAttribute("title"));//取得标签上的属性,如<x title="a"></x>取得title的值'a'
   alert(x.text);//或者xmldoc.getElementsByTagName("node").text
   alert(x.nextSibling.text);//nextSibling方法是取得下一个node
   alert(x.nextSibling.nextSibling.text);
   }
  }
  function getNode(doc, xpath) {
  varretval = "";
  var value = doc.selectSingleNode(xpath);
  if (value) retval = value.text;
  return retval;
    }
//-->
</SCRIPT>
</HEAD>

<BODY>
<input type="button" onclick="loadXml()" value = "ok">
</BODY>
</HTML>
用了两种方法,第一种是通过网上google的例子依赖于selectSingleNode和selectNodes方法,
个人觉得通用性很难实现,如果实现的话,需要的是封装路径,而且事先要知道整个xml文件的完整结构。
第二种方法,是我从w3school上学到的,在被xmlDoc加载之后,xml部分应该就具备了页面元素的特性,所以通过getElementsXX等方法就可以去做,在w3school上学到的窍门,拿到firstChild之后后面的元素就用nextsibling,当然需要加判断的,测试的关系没有加。
这次发现,对与html没有足够充分的了解而去研究js框架是比较困难的,所以w3school继续学习中。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多