夏日博客

A-A+

javascript读取XML文件实现程序

2016年02月19日 前端设计 暂无评论 阅读 5 views 次

在js中要读到xml文档我们需要用到Microsoft.XMLDOM这个东西来操作，下面我来详细介绍利用Microsoft.XMLDOM组件实现xml读取与解析。

1、通过JS读取XML文件,主要是判断各个浏览器.

  1. // 加载xml文档  
  2.        var loadXML = function (xmlFile) {  
  3.             var xmlDoc;  
  4.             if (window.ActiveXObject) {  
  5.                 xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE浏览器  
  6.                 xmlDoc.async = false;  
  7.                 xmlDoc.load(xmlFile);  
  8.             }  
  9.             else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐浏览器  
  10.             //else if (document.implementation && document.implementation.createDocument) {//这里主要是对谷歌浏览器进行处理  
  11.                 xmlDoc = document.implementation.createDocument('', '', null);  
  12.                 xmlDoc.load(xmlFile);  
  13.             }  
  14.             else{ //谷歌浏览器  
  15.               var xmlhttp = new window.XMLHttpRequest();  
  16.                 xmlhttp.open("GET",xmlFile,false);  
  17.                 xmlhttp.send(null);  
  18.                 if(xmlhttp.readyState == 4){  
  19.                 xmlDoc = xmlhttp.responseXML.documentElement;  
  20.                 }   
  21.             }  
  22.             return xmlDoc;  
  23.         }  
  24.         // 首先对xml对象进行判断  
  25.       var  checkXMLDocObj = function (xmlFile) {  
  26.             var xmlDoc = loadXML(xmlFile);  
  27.             if (xmlDoc == null) {  
  28.                 alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');  
  29.                 window.location.href = '../err.html';  
  30.             }  
  31.             return xmlDoc;  
  32.         }  

2、将读取到的xml文件中的数据显示到html文档上

  1. <script type="text/javascript" language="javascript">  
  2.     var xmlDoc = checkXMLDocObj('../openClass.xml');//读取到xml文件中的数据  
  3.     var a = document.getElementsByTagName("a");//获取所有的A标签  
  4.     $(document).ready(function () {  
  5.           var nodes;  
  6.         if($.browser.msie){ // 注意各个浏览器之间的区别  
  7.          nodes = xmlDoc.getElementsByTagName('collage')[0].childNodes; //读取XML文件中需要显示的数据  
  8.          }   
  9.          else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0){  
  10.             nodes = xmlDoc.getElementsByTagName('collage')[0].children; //读取XML文件中需要显示的数据  
  11.          }  
  12.          else{  
  13.             nodes = xmlDoc.getElementsByTagName('resource');  
  14.          }  
  15.           
  16.          for (var i = 0; i < a.length; i++) {  
  17.             if (a[i].parentNode.nodeName == "SPAN") {  
  18.                 for (var j = 0; j < nodes.length; j++) {  
  19.                     var resource = nodes[j];  
  20.                     var url = resource.getAttribute('url');  
  21.                     var href=$(a[i]).attr("href");  
  22.                     if (href == url) {  
  23.                         var count = resource.getAttribute('click');  
  24.                         var span = document.createElement("div");  
  25.                         var str = document.createTextNode("点击率：" + count);  
  26.                         span.appendChild(str);  
  27.                         var div = a[i].parentNode.parentNode;  
  28.                         div.appendChild(span);  
  29.                         break;  
  30.                     }  
  31.                 }  
  32.             }  
  33.         }  
  34.     });  
  35.             $(function(){ //通过get请求，将点击率增加  
  36.              $(a).mousedown(function(){  
  37.                          var href = $(this).attr("href");  
  38.                         $.get("../receive.ashx",{url:href,rd:Math.random()}, function (msg) {  
  39.                           
  40.                         });  
  41.                     })  
  42.     })    
  43. </script>  

3、通过更新ashx文件在服务器上更新对应的xml文件

  1. public void ProcessRequest(HttpContext context)  
  2.     {  
  3.         context.Response.ContentType = "text/plain";  
  4.         string src = context.Request.QueryString["url"];  
  5.         string path = context.Server.MapPath("openClass.xml"); //打开xml文件  
  6.         XmlDocument xmlDoc = new XmlDocument();  
  7.         xmlDoc.Load(path); //注意不能用Xmlload()方法  
  8.         XmlNodeList nodeslist = xmlDoc.SelectNodes("/collage/resource"); //找到对应的节点  
  9.         foreach (XmlNode node in nodeslist)  
  10.         {  
  11.             XmlElement xe = (XmlElement)node;  
  12.             if (xe.GetAttribute("url") == src)  
  13.             {  
  14.                 int count = int.Parse(xe.GetAttribute("click"));  
  15.                 count = count + 1;  
  16.                 xe.SetAttribute("click", count.ToString()); //更新内容  
  17.             }  
  18.         }  
  19.         xmlDoc.Save(path); //保存  
  20.          
  21.     }  
标签：

给我留言