用XPath和XSLT来更好的处理XML

代码如下：

<html>
<head>
<title>Hello Ajax version 7</title>
<style type='text/css'>
* { font-family: Tahoma,Arial,sans-serif; }
#helloTitle{ color: #48f; }
.sidebar{
  background-color: #adf;
  color: navy;
  border: solid blue 1px;
  width: 180px;
  height: 200px;
  padding: 2px;
  margin: 3px;
  float: left;
}
</style>
<script type='text/javascript' src='sarissa.js'></script>
<script type='text/javascript' src='sarissa_ieemu_xpath.js'></script>
<script type='text/javascript' src='sarissa_dhtml.js'></script>
<script type='text/javascript'>

var xslDoc=null;

window.onload=function(){

  xslDoc=Sarissa.getDomDocument();
  xslDoc.load("recipe.xsl");

  document.getElementById('helloBtn').onclick=function(){
    var name=document.getElementById('helloTxt').value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET","hello7.jsp?name="+encodeURI(name),true);
    xhr.onreadystatechange=function(){
      if (xhr.readyState==4){
        update(xhr.responseXML);
      };
    };
    xhr.send("");
  }
}

function update(doc){
  var initial=doc.selectSingleNode('/person/@initial').value;
  var name=doc.selectSingleNode('/person/name/text()').nodeValue;
  document.getElementById('helloTitle').innerHTML="<h1>Hello,<b><i>"+name+"</i></b></h1>";

  var likesList=doc.selectNodes('/person/likes/item');
  var likes=[];
  for (var i=0;i<likesList.length;i++){
    var itemNode=likesList[i];
    likes[likes.length]=itemNode.firstChild.data;
  }
  var likesHTML='<h5>'+initial+' likes...</h5><hr/>';
  for (var i=0;i<likes.length;i++){
    likesHTML+=likes[i]+"<br/>";
  }
  document.getElementById('likesList').innerHTML=likesHTML;

  var personNode=doc.selectSingleNode('/person');
  var xsltproc=new XSLTProcessor();

  xsltproc.importStylesheet(xslDoc);
  Sarissa.updateContentFromNode(personNode,document.getElementById('ingrList'),xsltproc);
}

</script>
</head>
<body>

<div id='likesList' class='sidebar'>
<h5>Likes</h5><hr/>
</div>
<div id='ingrList' class='sidebar'>
<h5>Ingredients</h5><hr/>
</div>
<div>
<div id='helloTitle'>
<h1>Hello,stranger</h1>
</div>
<p>Please introduce yourself by entering your name in the box below</p>
<input type='text' size='24' id='helloTxt'></input><button id='helloBtn'>Submit</button>
</div>
</body>

</html>

另外我们应用了出源代码之外的几个库，（sarissa.js sarissa_ieemu_xpath.js sarissa_dhtml.js）这里截图上来，可以找资源下载的哈：

用XPath和XSLT来更好的处理XML

相关文章