javascript中xml操作实现代码


Posted in Javascript onNovember 21, 2011

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 端:略。
Javascript 相关文章推荐
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 #Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 #Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 #Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 #Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 #Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 #Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 #Javascript
You might like
PHP模板引擎SMARTY
2006/10/09 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
javascript打印输出json实例
2013/11/11 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
nodejs教程之入门
2014/11/21 NodeJs
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
Python实现的视频播放器功能完整示例
2018/02/01 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
佳能英国官方网站:Canon UK
2017/08/08 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
大学三年的自我评价
2013/12/25 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
支教自我鉴定
2014/01/18 职场文书
采购主管岗位职责
2014/02/01 职场文书
个人专业技术总结
2015/03/05 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书