视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > JavaScript >

[JS]用js来读取xml文件的信息

时间:2016-09-12 10:05酷播
js读写本地xml文件，[JS]用js来读取xml文件的信息

[JS]用js来读取xml文件的信息

  1. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"    
  2.    
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  4. <html xmlns="http://www.w3.org/1999/xhtml">   
  5.  <head>   
  6.   <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>   
  7.   <title>js读取xml</title>   
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"    
  9.    
  10. type="text/javascript"></script>   
  11. <script type="text/javascript">   
  12.    
  13. //酷播cuplayer.com提示：使用jquery框架事半功倍   
  14. $(document).ready(function(){   
  15. var imageID;   
  16. var xml;   
  17. loadXML("test.xml");   
  18. $("#imgInfo").find("img").mouseover(function(){   
  19.    
  20. //酷播cuplayer.com提示：鼠标移入imgInfo里的IMG   
  21. imageID=$(this).attr("id");   
  22.    
  23. //酷播cuplayer.com提示：获取移入图片的ID   
  24.    
  25. $(xml).find("Image").each(function(){   
  26.    
  27. //遍历xml的image标签   
  28.    
  29. if($(this).attr("ID")==imageID)   
  30.    
  31. //相等设置输出   
  32. $("#output").html("ID:"+$(this).attr("ID")+",TT:"+$(this).attr("TT")+",Time:"+$(this).attr("Time"))   
  33. })   
  34. })   
  35.    
  36. $("#imgInfo").find("img").mouseout(function(){//鼠标移出   
  37.    
  38. $("#output").html("")//清空   
  39.    
  40. )}   
  41.    
  42. function loadXML(fileName) {//ajax方式读取xml   
  43.         $.ajax({   
  44.             type: "GET",   
  45.             url: fileName,   
  46.             dataType: ($.browser.msie) ? "text" : "xml",   
  47.             success: function(data, textStatus, jqXHR){//读取成功   
  48.                 if (typeof data == "string") {   
  49.                     xml = new ActiveXObject("Microsoft.XMLDOM");   
  50.                     xml.async = false;   
  51.                     xml.loadXML(data);   
  52.                 } else {   
  53.                     xml = data;   
  54.                 }   
  55.                    
  56.             },   
  57.             error: function(jqXHR, textStatus, errorThrown) {//读取失败时   
  58.                    
  59.                 _defaultAjaxError(jqXHR, textStatus, errorThrown);   
  60.             }   
  61.         });   
  62.     }   
  63.    
  64.     function _defaultAjaxError(jqXHR, textStatus, errorThrown) {   
  65.         alert(jqXHR.status + ' * ' + jqXHR.statusText + ' * ' + jqXHR.responseText );   
  66.         alert(textStatus);   
  67.     }   
  68.    
  69. });   
  70.    
  71. </script>   
  72. </head>   
  73. <body>   
  74. <div id="imgInfo">   
  75. <image src="http://album.u17i.com/image/2011/11/ea/36/470344_28309_165138_tkBE.jpg" ID="566" />   
  76. <image src="http://album.u17i.com/image/2011/11/95/5a/482698_29371_165138_MROI.jpg" ID="786" />   
  77. </div>   
  78. <div id="output"style="color:red">酷播cuplayer.com提示：输出信息</div>   
  79. </body>   
  80. </html>   

[JS]用js来读取xml文件的信息

xml内容信息：

  1. <?xml version="1.0" encoding="UTF-8"?>   
  2. <root>   
  3. <Image TT="pic1" Time="546754" ID="566"/>   
  4. <Image TT="pic2" Time="678844" ID="786"/>   
  5. </root>   

 出处http://blog.csdn.net/yukon12345

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器