客户端 使用XML DOM加载json数据的方法


Posted in Javascript onSeptember 28, 2010

步骤:

1、引用Jquery

2、如果是IE,实例ActiveXObject;Firefox,实例DOMParser。

3、处理

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="XmlDom._Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript"> 
//得到XML Dom 
function LoadXML(XmlString) { 
var xmlDoc; 
//firefox等 
if (!window.ActiveXObject) { 
var parser = new DOMParser(); 
xmlDoc = parser.parseFromString(XmlString, "text/xml"); 
} else { 
//IE 
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
xmlDoc.async = "false"; 
xmlDoc.loadXML(XmlString); 
} 
return xmlDoc; 
} 
function UseCllentXmlDom() { 
try { 
var string = "<Log><Content value='测试Xml Dom用法' /></Log>"; 
//加载 
var xmlString = LoadXML(string); 
var xmlContent = $(xmlString).find("Content"); 
if (xmlContent != null) { 
$(xmlString).find("Content").each(function() { 
var ContentValue = $(this).attr("value"); 


 

//显示得到的数据 
$("#DomValue").html(ContentValue); 
}); 
} 
} 
catch (e) { 
throw e; 
} 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<a style="cursor: pointer" onclick="UseCllentXmlDom()">调用客户端XmlDom</a> 
<br /> 
显示数据: 
<div id="DomValue"> 
</div> 
</div> 
</form> 
</body> 
</html>

在FireFox下,我测试时发现,将XML字符串直接给Jquery,Jquery也能直接处理;但在IE下不行。如下边代码。
<script type="text/javascript"> 
//仅在firefox下可行 
function UseCllentXmlDom() { 
try { 
var string = "<Log><Content value='测试Xml Dom用法' /></Log>"; 

//取XML 字符串 
xmlString = $(string); 
var xmlContent = $(xmlString).find("Content"); 
if (xmlContent != null) { 
$(xmlString).find("Content").each(function() { 
var ContentValue = $(this).attr("value"); 


 

//显示得到的数据 
$("#DomValue").html(ContentValue); 
}); 
} 
} 
catch (e) { 
throw e; 
} 
} 
</script>
Javascript 相关文章推荐
jquery搜索框效果实现方法
Jan 16 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
JS实现带阴历的日历功能详解
Jan 24 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
jquery选择器(常用选择器说明)
Sep 28 #Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 #Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 #Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 #Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 #Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 #Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 #Javascript
You might like
PHP入门
2006/10/09 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
有关php运算符的知识大全
2011/11/03 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python 多线程Threading初学教程
2017/08/22 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
python 常见的反爬虫策略
2020/09/27 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
请说出几个常用的异常类
2013/01/08 面试题
高职助产应届生自荐信
2013/09/24 职场文书
毕业实习评语
2014/02/10 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
会计入职心得体会
2016/01/22 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
使用Ajax实现进度条的绘制
2022/04/07 Javascript