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 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 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数据库开发知多少
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
一个简单的php路由类
2016/05/29 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
动态控制Table的js代码
2007/03/07 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python实现Adapter模式实例代码
2018/02/09 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
python 获取字典键值对的实现
2020/11/12 Python
用python计算文件的MD5值
2020/12/23 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
公积金单位接收函
2014/01/11 职场文书
测试工程师职业规划书
2014/02/06 职场文书
岗位职责说明书
2014/05/07 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
汶川大地震感悟
2015/08/10 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
JavaScript实例 ODO List分析
2022/01/22 Javascript