|
|
小看了看AJAX..弄了下..呵呵.不对的地方请指教了...
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2Solo.net-Album</title>
<script type="text/javascript" src="xmlConn.js"></script>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="javascript:getData();">
<br><br><br>
<div class="tb_main" id="main">
<div class="tb_list" id="catelog">正在载入数据...</div>
<div class="tb_pic" id="pic"></div>
</div>
</body>
</html>
xmlConn.js
var XmlHttp;//用来定义一个xmlHttpRequest对象
var temp_url_arr=new Array()
var temp_title_arr=new Array()
var list_arr=new Array()
if (window.XMLHttpRequest) {
XmlHttp = new XMLHttpRequest()
if (XmlHttp.overrideMimeType) {
XmlHttp.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) {
XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//上面这段话是判断当前浏览器版本,以定义给XmlHttp不同的xmlHttpRequest对象.
//如果服务器的响应没有XML mime-typeheader， 某些Mozilla浏览器可能无法正常工作。
// 所以需要XmlHttp.overrideMimeType('text/xml');来修改该header.
function getData() {//读取数据
XmlHttp.onreadystatechange = praseXml;
XmlHttp.open("GET", "xmldata2.xml", true);
XmlHttp.send(null);
}
function praseXml() {//解析数据
if (XmlHttp.readyState == 4) {
if (XmlHttp.status == 200) {
var xmldoc = XmlHttp.responseXML;
var root=xmldoc.getElementsByTagName('data').item(0)
for (var iRoot = 0; iRoot < root.childNodes.length; iRoot++) {
//alert(root.childNodes.item(iRoot))
var pic_node=root.childNodes.item(iRoot)
for (iPic = 0; iPic < pic_node.childNodes.length; iPic++) {
var url_node=pic_node.childNodes.item(iPic)
for (iURL = 0; iURL < url_node.childNodes.length; iURL++)
{
var obj=new Object()
obj.type=url_node.nodeName
obj.content=url_node.childNodes.item(iURL).nodeValue
if(url_node.nodeName == "url"){
temp_url_arr.push(obj)
}
else if(url_node.nodeName == "title"){
temp_title_arr.push(obj)
}
}
}
}
install_list()
}
}
}
function install_list(){//整理得到的数据并装载到list_arr数组中
list_arr=new Array()
var target_div=document.getElementById('catelog');
target_div.innerHTML=""
for(var i=0;i<temp_url_arr.length;i++){
var obj=new Object()
obj.url=temp_url_arr.content
obj.title=temp_title_arr.content
list_arr.push(obj)
}
for(var i=0;i<list_arr.length;i++){
target_div.innerHTML +="<a href='#' onClick='img_loader(\""+list_arr.url+"\");'>"+list_arr.title+"</a><br>";
}
}
function img_loader(param1){//加载图片方法
var target_div=document.getElementById('pic');
target_div.innerHTML="<img src="+param1+">"
}
xmldata.xml
<?xml version="1.0" encoding="UTF-8"?>
<data>
<pic>
<url>pic/1.gif</url>
<title>图片1</title>
</pic>
<pic>
<url>pic/2.gif</url>
<title>图片2</title>
</pic>
<pic>
<url>pic/3.gif</url>
<title>图片3</title>
</pic>
<pic>
<url>pic/4.gif</url>
<title>图片4</title>
</pic>
</data>
下面是做好的效果: |
|
发表于 2007-1-11 23:50:24
发表于 2007-1-12 08:26:07
