AJAX--操作xml
来源：互联网 发布：smarty二维数组遍历 编辑：程序博客网 时间：2024/04/30 21:24
AJAX指南----操作XML
2008-05-18 22:45
我们来学习如何使用AJAX操作XML。
首先我们需要创建一个XMLHttp对象：
<script type="text/javascript">
//声明XMLHttpRequest函数
var xmlHttp;
function CreateXMLHTTP()
{
//IE浏览器创建XMLHttpRequest
if(window.ActiveXObject)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttp=false;
}
}
}
//非Microsoft浏览器创建XMLHttpRequest
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
if(!xmlHttp)
{
window.alert("不能创建XMLHttpRequest对象实例");
return false;
}
}
</script>
假设我们有一个XML文件mailbox.xml，它的内容如下：
<?xml version="1.0" encoding="utf-8" ?>
<mailbox>
<mail>
<to>老李</to>
<from>老张</from>
<heading>好久不见！</heading>
<body>好久不见，最近好吗?</body>
</mail>
<mail>
<to>小李</to>
<from>小王</from>
<heading>周末有空么？</heading>
<body>周末有空么？一起看场电影吧！</body>
</mail>
</mailbox>
可以看到，里面存储了两封邮件，现在我们的目标就是把这两封邮件以HTML的方式展现出来，首先我们需要创建一个简单的HTML的界面：
<button onclick="loadXMLDoc('mailbox.xml')">查看书架</button>
<br />
<div id="ajax-sample"></div>
ajax-sample块用于展示邮件，但查看信箱按钮被按下时，loadXMLDoc函数将被调用：
function loadXMLDoc(name)
{
CreateXMLHTTP();
xmlHttp.open("GET", name, true);
xmlHttp.onreadystatechange = parseMailBox;
xmlHttp.send(null);
}
可以看到，这个函数只是简单的向服务器发送一个GET请求，真正对XML文档进行处理的是parseMailBox函数：
function parseMailBox()
{
//4表示请求已完成
if (xmlHttp.readyState == 4)
{
alert('6');
//responseXML是一个HTML DOM Document对象，
//我们将使用它来解析XML文档
var mailBoxXML = xmlHttp.responseXML;
//获取所有信件
var mails = mailBoxXML.getElementsByTagName('mail');
var mailStr = "";
for (var i = 0; i < mails.length; i++) {
var mail = mails[i];
//解析信件
var to = getElementText(mail, "to");
var from = getElementText(mail, "from");
var heading = getElementText(mail, "heading");
var body = getElementText(mail, "body");
//为信件添加附属信息
mailStr += "收信人：" + to + "<br>";
mailStr += "发信人：" + from + "<br>";
mailStr += "标题：" + heading + "<br>";
mailStr += "正文： " + body + "<br><br>";
}
//将信件展示到页面上
document.getElementById("ajax-sample").innerHTML = mailStr;
}
}
getElemenText函数相当简单，它的作用就是获取一个元素的文本：
function getElementText(parentElem, name)
{
var result = parentElem.getElementsByTagName(name)[0];
return result.firstChild.data;
}
这样一个XML文档就解析完毕了，是不是相当的简单。
附加两个样例代码:
样例1.
【HTML】PS:放在VS2005环境中运行(推荐)，或者发布为ASP网站运行均可
<!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 type="text/javascript">
//声明XMLHttpRequest函数
var xmlHttp;
function CreateXMLHTTP()
{
//判断浏览器是否支持IE的XMLHttpRequest
if(window.ActiveXObject)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//ie老版本
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//ie新版本
}
catch(e)
{
xmlHttp=false;
}
}
}
//判断浏览器是否支持mozilla的XMLHttpRequest
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();//mozilla浏览器
}
if(!xmlHttp)
{
window.alert("不能创建XMLHttpRequest对象实例");
return false;
}
}
function loadXMLDoc(name)
{
CreateXMLHTTP();
xmlHttp.open("GET", name, true);
xmlHttp.onreadystatechange = parseMailBox;
xmlHttp.send(null);
}
function parseMailBox()
{
//4表示请求已完成
if (xmlHttp.readyState == 4)
{
//responseXML是一个HTML DOM Document对象，
//我们将使用它来解析XML文档
var mailBoxXML = xmlHttp.responseXML;
//获取所有信件
var mails = mailBoxXML.getElementsByTagName('mail');
var mailStr = "";
for (var i = 0; i < mails.length; i++) {
var mail = mails[i];
//解析信件
var to = getElementText(mail, "to");
var from = getElementText(mail, "from");
var heading = getElementText(mail, "heading");
var body = getElementText(mail, "body");
//为信件添加附属信息
mailStr += "收信人：" + to + "<br>";
mailStr += "发信人：" + from + "<br>";
mailStr += "标题：" + heading + "<br>";
mailStr += "正文：<br>" + body + "<br><br>";
}
//将信件展示到页面上
document.getElementById("ajax-sample").innerHTML = mailStr;
}
}
function getElementText(parentElem, name)
{
var result = parentElem.getElementsByTagName(name)[0];
return result.firstChild.data;
}
</script>
</head>
<body>
<button onclick="loadXMLDoc('mailbox.xml')">查看书架</button>
<br />
<div id="ajax-sample"></div>
</body>
</html>
【xml代码】
文件名：mailbox.xml
代码：
<?xml version="1.0" encoding="utf-8" ?>
<mailbox>
<mail>
<to>老李</to>
<from>老张</from>
<heading>好久不见！</heading>
<body>好久不见，最近好吗?</body>
</mail>
<mail>
<to>小李</to>
<from>小王</from>
<heading>周末有空么？</heading>
<body>周末有空么？一起看场电影吧！</body>
</mail>
</mailbox>
============================================================
样例2.
【aspx页代码】PS:放在VS2005环境中运行
<!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>AJAX—XML实现无刷新联动</title>
<script type="text/javascript">
//<--=============== 创 建 xmlHttpRequest 对象 ===================-->
//声明XMLHttpRequest函数
var xmlHttp;
function CreateXMLHTTP()
{
//判断浏览器是否支持XMLHttpRequest
if(window.ActiveXObject)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//ie老版本
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//ie新版本
}
catch(e)
{
xmlHttp=false;
}
}
}
//判断浏览器是否支持XMLHttpRequest
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();//mozilla浏览器
}
if(!xmlHttp)
{
window.alert("不能创建XMLHttpRequest对象实例");
return false;
}
}
function loadSmallType(xmlUrl)
{
CreateXMLHTTP();
xmlHttp.open("get",xmlUrl,true);
xmlHttp.onreadystatechange = setSmallType;
xmlHttp.send(null);
}
function setSmallType()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var listXML = xmlHttp.responseXML;
var typeSmalls = listXML.getElementsByTagName("typeSmall");
var bigID = document.getElementById("Select1").value;
if(bigID=="0")
{
return;
}
document.getElementById("Select2").length = 1;
for(var i = 0; i < typeSmalls.length; i++)
{
var typeSmall = typeSmalls[i];
var ID = getElementsText(typeSmall,"ID");
var typeBigID = getElementsText(typeSmall,"typeBigID");
var smallMarket = getElementsText(typeSmall,"smallMarket");
if(typeBigID == bigID)
{
document.getElementById("Select2").options.add(new Option(smallMarket,ID));
}
}
}
}
}
function getElementsText(parentElement,name)
{
var result = parentElement.getElementsByTagName(name)[0];
return result.firstChild.data;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="Select1" runat="server" onchange="loadSmallType('xml/type.xml')">
<option value="0" selected="selected">请选择</option>
</select>
<select id="Select2" name="typeSmall" runat="server">
<option value="0" selected="selected">请选择</option>
</select>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
</form>
</body>
</html>
【xml代码】
文件名：mailbox.xml
代码：
<?xml version="1.0" standalone="yes"?>
<type>
<typeBig>
<ID>1</ID>
<market>市场1</market>
</typeBig>
<typeBig>
<ID>2</ID>
<market>市场2</market>
</typeBig>
<typeBig>
<ID>3</ID>
<market>市场3</market>
</typeBig>
<typeBig>
<ID>4</ID>
<market>市场4</market>
</typeBig>
<typeBig>
<ID>5</ID>
<market>市场5</market>
</typeBig>
<typeBig>
<ID>6</ID>
<market>市场6</market>
</typeBig>
<typeSmall>
<ID>1</ID>
<typeBigID>1</typeBigID>
<smallMarket>小市场1</smallMarket>
</typeSmall>
<typeSmall>
<ID>2</ID>
<typeBigID>1</typeBigID>
<smallMarket>小市场2</smallMarket>
</typeSmall>
<typeSmall>
<ID>3</ID>
<typeBigID>1</typeBigID>
<smallMarket>小市场3</smallMarket>
</typeSmall>
<typeSmall>
<ID>4</ID>
<typeBigID>1</typeBigID>
<smallMarket>小市场4</smallMarket>
</typeSmall>
<typeSmall>
<ID>5</ID>
<typeBigID>2</typeBigID>
<smallMarket>小市场5</smallMarket>
</typeSmall>
<typeSmall>
<ID>6</ID>
<typeBigID>2</typeBigID>
<smallMarket>小市场6</smallMarket>
</typeSmall>
<typeSmall>
<ID>7</ID>
<typeBigID>2</typeBigID>
<smallMarket>小市场7</smallMarket>
</typeSmall>
<typeSmall>
<ID>8</ID>
<typeBigID>2</typeBigID>
<smallMarket>小市场8</smallMarket>
</typeSmall>
<typeSmall>
<ID>9</ID>
<typeBigID>3</typeBigID>
<smallMarket>小市场9</smallMarket>
</typeSmall>
<typeSmall>
<ID>10</ID>
<typeBigID>3</typeBigID>
<smallMarket>小市场10</smallMarket>
</typeSmall>
<typeSmall>
<ID>11</ID>
<typeBigID>3</typeBigID>
<smallMarket>小市场11</smallMarket>
</typeSmall>
<typeSmall>
<ID>12</ID>
<typeBigID>3</typeBigID>
<smallMarket>小市场12</smallMarket>
</typeSmall>
<typeSmall>
<ID>13</ID>
<typeBigID>4</typeBigID>
<smallMarket>小市场13</smallMarket>
</typeSmall>
<typeSmall>
<ID>14</ID>
<typeBigID>4</typeBigID>
<smallMarket>小市场14</smallMarket>
</typeSmall>
<typeSmall>
<ID>15</ID>
<typeBigID>4</typeBigID>
<smallMarket>小市场15</smallMarket>
</typeSmall>
<typeSmall>
<ID>16</ID>
<typeBigID>4</typeBigID>
<smallMarket>小市场16</smallMarket>
</typeSmall>
<typeSmall>
<ID>17</ID>
<typeBigID>5</typeBigID>
<smallMarket>小市场17</smallMarket>
</typeSmall>
<typeSmall>
<ID>18</ID>
<typeBigID>5</typeBigID>
<smallMarket>小市场18</smallMarket>
</typeSmall>
<typeSmall>
<ID>19</ID>
<typeBigID>5</typeBigID>
<smallMarket>小市场19</smallMarket>
</typeSmall>
<typeSmall>
<ID>20</ID>
<typeBigID>5</typeBigID>
<smallMarket>小市场20</smallMarket>
</typeSmall>
<typeSmall>
<ID>21</ID>
<typeBigID>6</typeBigID>
<smallMarket>小市场21</smallMarket>
</typeSmall>
</type>
- AJAX指南----操作XML
- ajax操作xml文件
- AJAX--操作xml
- ajax操作xml
- ajax操作XML
- Ajax 操作XML的好实例
- AJAX与PHP操作XML文件
- AJAX操作01_json与xml
- ajax+WebServer及Dataset转xml操作实例
- jquery ajax的实现 操作json xml jsonp
- ajax——dom对xml和html的操作
- 使用JQuery的Ajax操作html，xml，json数据
- ajax xml
- ajax xml
- 网站间的互操作（小试Ajax XML互操作ASP）
- AJAX操作
- Ajax操作
- Ajax操作
- CSS与HTML（span）
- 《程序员》百期文章回顾之13——软件开发2.0时代来临
- ISAG SMS下行开发实例（JAVA-Eclipse）
- 关于WSAAsyncSelect模型中FD_WRITE事件触发的时机！
- 图片缩略图
- AJAX--操作xml
- linux下防止后台程序重复加载
- 菩提老祖在遇到悟空前很郁闷
- 用python获取本地的ip地址
- tomcat中无法部署myeclipse中的项目问题
- AjaxControltoolkit学习笔记—ConfirmButton使用详解
- 在VC中加载LIB文件的几种方法
- Perl在CGI程序设计中常用的函数和指令
- 毕业设计，大虾们帮帮忙啊
