js解析xml 实例

来源：互联网发布：水晶音乐盒淘宝编辑：程序博客网时间：2024/05/15 21:17

1.php页面，提供其可获取资源 stories.php

<?php //如果没有传递搜索字符串。那么，我们不能搜索   if(empty($_GET['category'])){        $result = "<story>            <url>none</url><title>No Gategory</title>  </story>";   }else{       //从传递的搜索的开始和末尾删除空白  $search = trim($_GET['category']);  switch($search){     case "CSS":    $result="<story>            <url>http://realtech.burning.net/graphics/css/opacity-returns-ie8</url>"."<title>Opacity returns to IE8</title>         </story>". "<story>    <url>http://realtech.burning.net/graphics/css/opacity-returns-ie8</url>"."<title>Opacity returns to IE9</title>         </story>";     break; case "ebooks":    $result="<story>            <url>http://realtech.burning.net/graphics/css/opacity-returns-ie8</url>"."<title>Kindle Clipping Limits</title>         </story>". "<story>    <url>http://realtech.burning.net/graphics/css/opacity-returns-ie8</url>"."<title>Kindle and Book Freebies</title>         </story>";     break;  case "video":     $result="<story>            <url>http://realtech.burning.net/graphics/css/opacity-returns-ie8</url>"."<title>video-online-crap-shoot</title>         </story>". "<story>    <url>http://realtech.burning.net/graphics/css/opacity-returns-ie8</url>"."<title>Review</title>         </story>". "<story>            <url>http://realtech.burning.net/graphics/css/opacity-returns-ie8</url>"."<title>Gojira</title>         </story>". "<story>    <url>http://realtech.burning.net/graphics/css/opacity-returns-ie8</url>"."<title>IT's a Raging Squid</title>         </story>";     break;  case "missouri":     $result="<story>            <url>http://realtech.burning.net/graphics/css/opacity-returns-ie8</url>"."<title>tyson-valley</title>         </story>". "<story>    <url>http://realtech.burning.net/graphics/css/opacity-returns-ie8</url>"."<title>No Stories Found</title>         </story>";     break;}   }   $result = '<?xml version="1.0" encoding="UTF-8"?>'."<stories>".$result."</stories>";   header("Content-Type:text/xml; charset=utf-8");   echo $result?>

2.js操作stories.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xmlns" xml:lang="en" lang="en"><head></head><title>Stories</title><meta charset="utf-8"><script type = "text/javascript">   var xmlHttpObj;      window.onload=function(){      var radios = document.forms[0].elements["category"];  for(var i=0; i<radios.length;i++){    radios[i].onclick=getStories;  }   }      function getStories(){   //分类      var category = encodeURIComponent(this.value);  //Ajax 对象   if(window.XMLHttpRequest){     xmlHttpObj = new XMLHttpRequest();  }//构建请求  // 传入category的值  var url = "stories.php?category=" + category; // alert(url);  xmlHttpObj.open('GET',url,true);  xmlHttpObj.onreadystatechange = getData;  xmlHttpObj.send(null);   }   function getData(){  // alert("s");               //result.innerHTML=str;      if(xmlHttpObj.readyState==4 && xmlHttpObj.status == 200){    try{   var result = document.getElementById("result");   var str="<p>";  /*    采用分开式的方法，与下面的方法是等价的。   var urls = xmlHttpObj.responseXML.querySelectorAll("story url");   var titles = xmlHttpObj.responseXML.querySelectorAll("story title");      for(var i = 0; i < urls.length; i++){      var url = urls[i].firstChild.nodeValue;  var title = titles[i].firstChild.nodeValue;   }  */   var stories = xmlHttpObj.responseXML.querySelectorAll("story");    for(var i = 0; i < stories.length;i++){       var story =stories[i];    // alert(storyss.childNodes[0].firstChild.nodeValue);  //alert(story.childNodes[0].firstChild);   var url = story.childNodes[1].childNodes[0].nodeValue; //childNodes[0]等价于firstChild 做取值用，childNodes[1]可以取得第一个元素   var title = story.childNodes[2].firstChild.nodeValue;  //firstChild与childNodes[0]的相互代替   if(url === "none")       str += title + "<br />";   else                   str += "<a href=' "+ url +" '>"+title + "</a><br />";      }   str+="</p>";   result.innerHTML=str;}catch(e){   alert(e.message);}  }   }   </script></head><body>    <form id="categoryform">css:<input type="radio" name = "category" value="CSS"/> <br/>eBooks:<input type="radio" name = "category" value="ebooks"/> <br/>    Missouri:<input type="radio" name = "category" value="missouri"/> <br/>Video:<input type="radio" name = "category" value="video"/> <br/></form><div id="result"></div></body></html>