js解析xml 实例

最新推荐文章于 2024-09-11 19:30:00 发布

Linsonns

最新推荐文章于 2024-09-11 19:30:00 发布

阅读量976

点赞数

本文链接：https://blog.csdn.net/Linsonns/article/details/16824107

版权

php and masql 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

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.οnlοad=function(){
      var radios = document.forms[0].elements["category"];
	  for(var i=0; i<radios.length;i++){
	    radios[i].οnclick=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>