<?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>
// 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 } } }
原文链接：https://www.f2er.com/ajax/164165.html