javascript中xml操作实现代码

206 阅读 0 评论 136 点赞

我是靠谱客的博主瘦瘦小海豚，最近开发中收集的这篇文章主要介绍javascript中xml操作实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

JavaScript 端：

复制代码代码如下:

 
//初始化页面 
function init() { 
var ary = JSONToArray(XMLReader("node","content.dibi")); 
var divtoc = document.getElementById("div_toc"); 
pageCount = ary.length; 
for(k = 0; k < ary.length; k++){ 
obj = eval('(' + ary[k] + ')'); 
divtoc.innerHTML += "<a href='javascript：changeImage(" + obj.page.substring(obj.page.length-1) + ")'>" 
+ obj.label + "</a>      "; 
} 

page = 1; 
changeImage(page); 

var pageManager = document.getElementById("div_page"); 
pageManager.innerHTML = "<a href='javascript：changePage(0)'>上一页</a>      " 
+ "<a href='javascript：changePage(1)'>下一页</a><br/><br/>"; 

var ary2 = JSONToArray(XMLReader("meta","content.dibi")); 
var divmeta = document.getElementById("div_meta"); 
var styStr = "<table>" 
for(l = 0; l < ary2.length; l++){ 
obj2 = eval('(' + ary2[l] + ')'); 
styStr += "<tr><td>" + obj2.name + "</td><td>" + obj2.content + "</td></tr>"; 
} 
divmeta.innerHTML = styStr + "</table>"; 
} 

//解析.dibi 文件。 
function XMLReader(key,fileName) { 
var parse = BrowserValidator(); 
parse.load(fileName); 
var json = ""; 
try{ 
var dom = parse.documentElement; 
var attrLength = 0; 
for (i = 0; i < dom.getElementsByTagName(key).length; i++) { 
attrLength = dom.getElementsByTagName(key)[i].attributes.length; 
objMsg = ",{"; 
for(j = 0; j < attrLength; j++){ 
objMsg += "'" + dom.getElementsByTagName(key)[i].attributes[j].name 
+ "':'" + dom.getElementsByTagName(key)[i].attributes[j].value + "',"; 
} 
objMsg = objMsg.substring(0,objMsg.length-1); 
json += objMsg + "}"; 
} 
json = json.substring(1); 
}catch(e){} 
return json; 
} 

//判断浏览器类型。支持 IE ，fireFox。 
function BrowserValidator(){ 
var result; 
if(!window.DOMParser && window.ActiveXObject) { 
result = new ActiveXObject("Microsoft.XMLDOM"); 
result.async = false; 
} 
else if(document.implementation && document.implementation.createDocument) { 
result = document.implementation.createDocument("", "", null); 
result.async = false; 
} 
return result; 
} 

var page = 1; //当前页 
var pageCount; //总页数 

//根据点击改变页面图片 
function changeImage(page1){ 
page = page1; 
var divimg = document.getElementById("div_img"); 
divimg.innerHTML = "<img width='500' src = 'images/" + page +".jpg'/>"; 
} 

//上页及下页 
function changePage(flag){ 
if(flag == 0 && page > 1){ 
page--; 
} 
if(flag == 1 && page < pageCount){ 
page++; 
} 
changeImage(page); 
} 


//将 JSON 数据转换成数组 
function JSONToArray(json){ 
return json.replace(new RegExp("},", "g"), "}|").split("|"); 
} 

HTML 端：

复制代码代码如下:

 
<html> 
<head> 
<title></title> 
<script language="javascript" type="text/javascript" charset='gbk' src="xmlhelper.js"></script> 
</head> 
<body onload="init()"> 
<div id="div_toc"></div> 
<div id="div_img"></div> 
<div id="div_page"></div> 
<div id="div_meta"></div> 
</body> 
</html> 

XML 端：略。