ajax读取xml

来源：互联网发布：单片机编程语言的比较编辑：程序博客网时间：2024/05/13 15:25

xml 代码如下：文件 index.xml

<?xml version="1.0" encoding="GB2312" ?>
<head>
<show id="0">
<content id="0">
<url>file/三分屏/样式1/index.html</url>
<img>file/三分屏/样式1/1.jpg</img>
<name>三分屏</name>
<courseName>第三方物流实践课程体系介绍</courseName>
</content>
<content id="1">
<url>file/三分屏/样式2/index.html</url>
<img>file/三分屏/样式2/1.jpg</img>
<name>教育培训远程研修课程</name>
<courseName>健康领域的理解与实施</courseName>
</content>
</show>
<show id="1">
<content id="0">
<url>file/PPT课程改造/第七单元第1节戏曲音乐/index.html</url>
<img>file/三分屏/样式1/1.jpg</img>
<name>音乐欣赏</name>
<courseName>戏曲</courseName>
</content>
<content id="1">
<url>file/PPT课程改造/刑法基本原则导出/index.html</url>
<img>file/PPT课程改造/刑法基本原则导出/1.jpg</img>
<name>音乐欣赏</name>
<courseName>戏曲</courseName>
</content>
</show>
</head>

js代码如下：文件 index.js

// JavaScript Document

var num; //用于获取点击的是第几个
var data = new Array(); //用于存放读取xml获得的数据

function setTab(n) //左侧导航样式改变
{
num = n;
var tdd = document.getElementById("menu").getElementsByTagName("dd");
/*获取id是menu 的dl 的dd对象*/
for (i = 0; i < tdd.length; i++) {
tdd[i].className = i == n ? "active" : "";
/*更改选项卡的dd对象的样式，如果是选定的项则使用.active样式*/
}
showDiv();
}

//ajax技术用于刷新中间内容部分
var xmlHttp = false;
function showDiv()
{
/*@cc_on @*/
/*@if (@_jscript_version >= 5)*/
//IE浏览器的情况
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2) {
xmlHttp = false;
}
}
/*@end @*/
//非IE浏览器的情况
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
//1、建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。
//2、尝试在 Microsoft 浏览器中创建该对象：
// 1）尝试使用 Msxml2.XMLHTTP 对象创建它。
// 2）如果失败，再尝试 Microsoft.XMLHTTP 对象。
//3、如果仍然没有建立 xmlHttp，则以非 Microsoft 的方式创建该对象。
//最后，xmlHttp 应该引用一个有效的 XMLHttpRequest 对象，无论运行什么样的浏览器。
xmlHttp.onreadystatechange = readyStateChangeHandle;
//回调函数，服务器状态改变就执行，上面设置了true，异步处理
xmlHttp.open("GET", "index.xml", true);
//get请求，读取指定文件 true表示异步
xmlHttp.send(null);
//已请求，所以此处发送null
}

function readyStateChangeHandle() //回调函数

{
if (xmlHttp.readyState == 4 )
{
//4表示完成
if (data == null || data.length == 0) {
readXML();
//读取xml文件
}
if (data.length != 0)
{
//读取xml成功
var shtml = '';
shtml += '<ul>';
for (var i = 0; i < data[num].length; i++)
{
shtml += '<li>';
shtml += '<div class="img">';
shtml += '<a href="' + data[num][i].url + '" target="_blank">';
shtml += '<img src="' + data[num][i].img + '" alt="">';
shtml += '<p>' + data[num][i].name + '</p></a>';
shtml += '</div>';
shtml += '<a href="' + data[num][i].url + '" target="_blank">';
shtml += '<strong>课程名称：</strong>' + data[num][i].courseName + '</a></li>';
}
shtml += '</ul><div class="clear"></div>';
document.getElementById('displayLesson').innerHTML = shtml;
//替换原先的内容
}
else {
document.getElementById('displayLesson').innerHTML = '没有信息!';
//替换原先的内容
}
}
}

function readXML()
{
var xmlDOM = xmlHttp.responseXML;
var xmlRoot = xmlDOM.documentElement;
var node = xmlRoot.getElementsByTagName("show");
//获得xml 文档的show 节点集合
for (var i = 0; i < node.length; i++)
{
data[i] = new Array();
var content = node[i].getElementsByTagName("content");
for (var j = 0; j < content.length; j++)
{
var obj = {};
obj.url = content[j].getElementsByTagName("url")[0].firstChild.data;
//取出 show下 content下 url的值
obj.img = content[j].getElementsByTagName("img")[0].firstChild.data;
//取出 show下 content下 img的值
obj.name = content[j].getElementsByTagName("name")[0].firstChild.data;
//取出 show下 content下 name的值
obj.courseName = content[j].getElementsByTagName("courseName")[0].firstChild.data;
//取出 show下 content下 courseName的值
data[i][j] = obj;
//在这里，我们使用使用json
}
}
}

0 0