首页 > 下载 > 下载详文:Jquery AJAX 读取 Xml 文件

Jquery AJAX 读取 Xml 文件

发布时间:2012年06月23日 19时29分13秒   属性:程序Web开发 > Javascript/Html    访问次数:96253
字体: 初始 添加收藏 分享给好友

Jquery AJAX 读取 Xml 文件

Javascript 读取XML,如采用传统的读取方法则是通过new ActiveXObject("Microsoft.XMLDOM")或者new XMLHttpRequest();。在Jquery中可以通过AJAX轻松实现XML读取,并且可以随意由开发者自由定义,除此以外Jquery一个最大的好处就是不用考虑各种浏览器的兼容问题,这在开发时可以省去很多事情。下面是详细步骤。

XML部分

建立xml文件,在xml节点中建立数据,这里简单的建立system,在system里面建立两个节点类型,一个为 <Computer>,一个为<Mobile>,<Computer>用来装载电脑系统名单,<Mobile>用来装载手机系统名单。<operating>用来装载系统名单,<beging>为系统其实时间或初始版本;下面是xml的详细代码数据。

XML 代码  复制
<?xml version="1.0" encoding="utf-8" ?> <system> <!----> <Computer> <operating id="0">Linux</operating> <beging>1991年的0.01版(代号“Freax”)</beging> </Computer> <Computer> <operating id="3">Mac OS X</operating> <beging>2001年3月24日 Mac OS X v10.0</beging> </Computer> <Computer> <operating id="0">Windows</operating> <beging>1993年7月27日 Windows NT 3.1 Server</beging> </Computer> <Computer> <operating id="0">UNIX</operating> <beging>1969年在AT@T的贝尔实验室开发</beging> </Computer> <!----> <Mobile> <operating id="0">Android</operating> <beging>2005年8月17日,Google收购了2003年成立的Android科技公司</beging> </Mobile> <Mobile> <operating id="1">iOS</operating> <beging>2007年6月29日 1.0, iPhone OS 2010年6月7日WWDC大会上宣布改名为“iOS</beging> </Mobile> <Mobile> <operating id="2">Windows Phone</operating> <beging>2010年10月 7.0.7004 初始版Windows Phone 7 OS</beging> </Mobile> </system>

Jquery html javascript 脚本

在页面Head中引入Jquery文件;在body中放入两个<div>分别设置id为“Computer”和“Mobile”,分别用来显示xml的Computer节点和Mobile节点的数据,同时在两个<div>中都放入<h1>字符标签分别内容“Computer OS”和"Mobile OS"。通过ajax get 方式获取xml(也可以用post方式),读取xml将xml节点循环出来。下面详细代码。

HTML 代码  复制
<!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> <title></title> <script src="jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> //Copyright (C) 遗昕 | weisim3.com 06.23.2012 //Jquery AJAX 读取 Xml 文件 $(document).ready(function () { $.ajax({ type: "GET", url: "XML.xml", dataType: "xml", success: function (xml) { $(xml).find('system').each(function () { $(xml).find('Computer').each(function () { $("#Computer").append("<div><h2 style='margin:0px;color:Blue'>" + $(this).find('operating').text() + "</h2>" + $(this).find('beging').text() + "</div>"); }); $(xml).find('Mobile').each(function () { $("#Mobile").append("<div><h2 style='margin:0px;color:Blue'>" + $(this).find('operating').text() + "</h2>" + $(this).find('beging').text() + "</div>"); }); }); } }); }); </script> </head> <body> <div id="Computer" style=""> <h1> Computer OS</h1> </div> <hr /> <div id="Mobile"> <h1> Mobile OS</h1> </div> </body> </html>

最终效果如图

免费
Jquery AJAX 读取 Xml 文件 (1)
本下载连接不支持第三下载工具打开,请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意,不得私自转载(或做修改转载),源文件示例仅供学习使用,更不要出于商业用途或印刷出版发行!否则将追究其相关法律责任,版权联系QQ:729260499。
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .