JavaScript获取XML数据附示例截图

Hot.xml文件 ：


代码如下:

<?xml version="1.0" encoding="gb2312"?>
<root>
<item>
<name>刘亦菲</name>
<url>MingXing/LiuYiFei.htm</url>
<color>red</color>
</item>
<item>
<name>蔡依林</name>
<url>MingXing/CaiYiLin.htm</url>
<color>blue</color>
</item>
<item>
<name>张娜拉</name>
<url>MingXing/ZhangNaLa.htm</url>
<color>green</color>
</item>
<item>
<name>张韶涵</name>
<url>MingXiang/ZhangShaoHan.htm</url>
<color>grey</color>
</item>
<item>
<name>张靓颖</name>
<url>MingXing/ZhangLiangYin.htm</url>
<color>black</color>
</item>
<item>
<name>李宇春</name>
<url>MingXing/LiYuChun.htm</url>
<color>yellow</color>
</item>
<item>
<name>徐若瑄</name>
<url>MingXing/XuLuXuan.htm</url>
<color>pink</color>
</item>
</root>

demo1.html文件：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript获取XML数据</title>
<script language="javascript">


代码如下:

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); //创建XmlDom对象
xmlDoc.async=true; //使用异步加载
xmlDoc.onreadystatechange=loadedSales;
function loadedSales()
{
var txt="";
if(xmlDoc.readyState == 0){
alert("0");
}
if(xmlDoc.readyState == 1){
alert("1");
}
if(xmlDoc.readyState == 2){
alert("2");
}
if(xmlDoc.readyState == 3){
alert("3");
}
if(xmlDoc.readyState == 4)
{
if(xmlDoc.parseError.errorCode != 0)
{
txt="xml解析错误！";
}else{
var items=xmlDoc.documentElement.selectNodes("item");
if(items != null && items.length > 0)
{
for(var i=0; i < items.length; i++)
{
txt += "<li><a href="+items[i].childNodes[1].text+" mce_href="+items[i].childNodes[1].text+" style="color:" mce_style="color:""+items[i].childNodes[2].text+">"+items[i].childNodes[0].text+"</a></li>";
}
}else{
txt="";
}
}
}else{
txt="";
}
document.getElementById("sales").innerHTML=txt;
}
function loadXmlDoc()
{
var url="Hot.xml";
xmlDoc.load(url);
}
</script>
</head>

<body onLoad="loadXmlDoc()">
<div id="sales"></div>
</body>
</html>

效果图：

赞 (0)

相关推荐

  • JavaScript获取某年某月的最后一天附截图

    JavaScript获取某年某月的最后一天附截图

    1.实现源码 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Jav

  • 利用NodeJS和PhantomJS抓取网站页面信息以及网站截图

    利用NodeJS和PhantomJS抓取网站页面信息以及网站截图

    利用PhantomJS做网页截图经济适用,但其API较少,做其他功能就比较吃力了.例如,其自带的Web Server Mongoose最高只能同时支持10个请求,指望他能独立成为一个服务是不怎么实际的.所以这里需要另一个语言来支撑服务,这里选用NodeJS来完成. 安装PhantomJS 首先,去PhantomJS官网下载对应平台的版本,或者下载源代码自行编译.然后将PhantomJS配置进环境变量,输入 $ phantomjs 如果有反应,那么就可以进行下一步了. 利用PhantomJS进行简

  • THINKPHP+JS实现缩放图片式截图的实现

    THINKPHP+JS实现缩放图片式截图的实现

    作者:杨鑫奇 原始链接:http://www.cnblogs.com/scotoma/archive/2010/03/05/1679477.html 今晚TP论坛的一位大哥加我了,说也遇到这个方面的问题,呵呵!想想其实很多东西都遇到了,是不是应该分享出来呢?其实自己的很多东西都是别人那来的,取之于网络用之于网络!只有大家多分享,才能够提高! 实现方式 上传图片 -- 保存并显示图片 -- JS获取缩略图参数 -- 提交位置参数 -- 图片缩放保存类处理图片 -- 保存截取的图片--更新数据库 -

  • JavaScript+html5 canvas实现本地截图教程

    JavaScript+html5 canvas实现本地截图教程

    最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.

  • js+HTML5实现视频截图的方法

    本文实例讲述了js+HTML5实现视频截图的方法.分享给大家供大家参考.具体如下: 1. HTML部分: <video id="video" controls="controls"> <source src=".mp4" /> </video> <button id="capture">Capture</button> <div id="output&

  • javascript在网页中实现读取剪贴板粘贴截图功能

    见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下. 可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好. 输入框的结构代码: 复制代码 代码如下: <input type="text" id="testInput" /> 为输入框绑定粘贴事件: 复制代码 代码如下: var input = document.getElemen

  • JS图片自动轮换效果实现思路附截图

    JS图片自动轮换效果实现思路附截图

    今天不在状态,安静五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片  下面是具体的代码,还是比较简单的. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

  • JavaScript实现网页截图功能

    JavaScript实现网页截图功能

    使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象.两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷. Canvas2Image 它的原理是利用了HTML5的canvas对象提供了toDataURL()的API: 复制代码 代码如下:

  • JavaScript获取XML数据附示例截图

    JavaScript获取XML数据附示例截图

    Hot.xml文件 : 复制代码 代码如下: <?xml version="1.0" encoding="gb2312"?> <root> <item> <name>刘亦菲</name> <url>MingXing/LiuYiFei.htm</url> <color>red</color> </item> <item> <name

  • selenium + python 获取table数据的示例讲解

    方法一: <code class="language-python">""" 根据table的id属性和table中的某一个元素定位其在table中的位置 table包括表头,位置坐标都是从1开始算 tableId:table的id属性 queryContent:需要确定位置的内容 """ def get_table_content(tableId,queryContent): arr = [] arr1 = []

  • jQuery使用getJSON方法获取json数据完整示例

    jQuery使用getJSON方法获取json数据完整示例

    本文实例讲述了jQuery使用getJSON方法获取json数据.分享给大家供大家参考,具体如下: demo.js: [ { "name":"吴者然", "sex":"男", "email":"demo1@123.com" }, { "name":"吴中者", "sex":"男", "email&q

  • jQuery基于Ajax实现读取XML数据功能示例

    jQuery基于Ajax实现读取XML数据功能示例

    本文实例讲述了jQuery基于Ajax实现读取XML数据功能.分享给大家供大家参考,具体如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryAjax_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

  • 使用JDBC4.0操作XML类型的字段(保存获取xml数据)的方法

    在 Java SE 6 所提供的诸多新特性和改进中,值得一提的是为 Java 程序提供数据库访问机制的 JDBC 版本升级到了 4.0, 这个以 JSR-221 为代号的版本 , 提供了更加便利的代码编写机制及柔性 , 并且支持更多的数据类型 . JDBC 4.0 的新特性分为下述四类: 1. 驱动及连接管理 2. 异常处理 3. 数据类型支持 4. API 的变化 以上说这么都不是本文要讲的重点内容,下面给大家介绍jdbc4.0操作xml类型数据的方法,具体详情如下所示: 在JDBC4.0推出

  • PHP+ajax实现获取新闻数据简单示例

    PHP+ajax实现获取新闻数据简单示例

    本文实例讲述了PHP+ajax实现获取新闻数据的方法.分享给大家供大家参考,具体如下: Get方式获取到的信息是字符串(responseText) ① 可以借助JSON对象的方法:stringify()和parse()方法,进行字符串和对象之间的转换 var arr=[1,2,3]; var a={left:100}; //alert(JSON.stringify(a));//typeof JSON.stringify(arr)是string //JSON对象的输出有严格格式:'{"left&q

  • 使用javascript访问XML数据的实例

    在网络浏览器软件中,可以Internet Explorer (IE)现在是一种标准的软件.可以看到,运行不同版本的Windows操作系统(和很多其他的操作系统)的每一台机器几乎都使用IE.微软已经通过ActiveX控件将IE的功能包含在执行成熟的XML处理技术中. 在本篇文章中,我们将讲述如何在IE中使用ActiveX功能来访问并解析XML文档,由此允许网络冲浪者操纵它们. 网上冲浪 我们以一个标准的顺序文档而开始,如表A所示.这一文档包含简单的顺序数据以提供网络冲浪者浏览之用.不仅仅为了显示这

  • javascript 读取XML数据，在页面中展现、编辑、保存的实现

    javascript 读取XML数据，在页面中展现、编辑、保存的实现

    首先考虑用什么方法做,考虑到三个方式:1.C#拼HTML构造table,修改和保存通过Ajax实现.2.XML+XSL,展现和修改用两个XSL文件来做,Ajax修改.保存XML.3.GridView控件. 经过细致考虑,首先第三方案GridView控件满足不了需求,因为XML格式多样,可能涉及到很多的行.列合并和行.列表头合并.第一方案太麻烦,坐起来是细致活和体力活,需求变动后不好修改.所以选择第二方案.开始学习XPath.XSLT.AJAX用js异步调用一般处理文件(ashx)的方式. 1.实

  • javascript获取xml节点的最大值(实现代码)

    假设现在当前时间为7000毫秒.当时间为3000--6000是去3000的值,当6000--9000时取6000的值,即取xml中小于当前时间的最大值 xml文件, 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><catalog><cd><ID>2</ID><title>第1讲</title><mediaUrl>123&

  • javascript生成json数据简单示例分享

    复制代码 代码如下: //定义对象var finalInfo = new Object(); //为对象赋值finalInfo.purchaseInfoId = '';finalInfo.purchaseMethodType = '';finalInfo.contact = '';finalInfo.contactTel = '';finalInfo.bidInfoStr = '';//将对象转换为json格式var finalInfoStr = JSON.stringify(finalInfo

随机推荐