用AJAX编写一个简单的相册

热门关键字：　视频教程　百家讲坛　美女　记忆力　疯狂英语

→ 当前位置:4221学习网>电脑学院>编程开发>AJAX>正文

用AJAX编写一个简单的相册

4221学习网 2007-06-08 来源：互联网收藏本文

训练30小时，让阅读提速5-10倍！---速读记忆训练软件免费下载！(点击下载)

AJAX(Asynchronous JavaScript And XML)是一种运用JavaScript和可扩展标记语言(XML)，在网络浏览器和服务器之间传送或接受数据的技术。主要应用于Ria(Rich internet applications)的开发上。

　　xml问题终于在今天还是解决了。最后在FireFox里还是使用了Dom的一些老方法。我这里就具体解释一下方法吧.

　　代码：

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-type header，某些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)
　　　//使用这样的方法才可在FireFox里面生效.至少xPath我没成功过.
　　　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[i].content
　　obj.title=temp_title_arr[i].content
　　list_arr.push(obj)
　}
　for(var i=0;i<list_arr.length;i++){
　　target_div.innerHTML +="<a href='#' 　onClick='img_loader(\""+list_arr[i].url+"\");'>"+list_arr[i].title+"</a><br>";
　}
}

function img_loader(param1){ //加载图片方法
　var target_div=document.getElementById('pic');
　target_div.innerHTML="<img src="+param1+">"

上一篇：AJAX快速入门之HTTP协议基础下一篇：Ajax核心：XMLHTTP组件相关技术资料

【收藏】【评论】【推荐】【投稿】【打印】【关闭】

相关文章

·AJAX快速入门之HTTP协议基础	·Ajax核心：XMLHTTP组件相关技术资料
·ajax技术制作得在线歌词搜索功能	·AJAX实例应用初体验：自动保存草稿
·新手入门：AJAX应用需要组件技术作支撑	·Eclipse平台上开始支持AJAX和动态语言
·AJAX学习基础：简单介绍数据岛使用方法	·理解AJAX工作原理构建网站的有效方法
·AJAX并不神秘：揭密各种AJAX控件和类库	·新手入门：Ajax的JSP示例以及相关知识

发表评论

（要记得去论坛讨论，点击注册新会员）密码：匿名评论

评论内容：(请自觉遵守互联网相关政策法规。)

最新文章
·精典文萃：过渡技术的Ajax及Apusic JSF ·使用AJAX技术实现网页无闪自动局部刷新 ·AJAX应用篇：必须用到和不必使用的地方 ·AJAX使用技巧：如何处理书签和翻页按扭 ·新手入门：Ajax的JSP示例以及相关知识 ·AJAX并不神秘：揭密各种AJAX控件和类库 ·理解AJAX工作原理构建网站的有效方法 ·AJAX学习基础：简单介绍数据岛使用方法 ·Eclipse平台上开始支持AJAX和动态语言 ·新手入门：AJAX应用需要组件技术作支撑

本类阅读排行榜
·使用AJAX技术实现网页无闪自动局部刷新 ·AJAX实例应用初体验：自动保存草稿 ·新手入门：Ajax的JSP示例以及相关知识 ·AJAX快速入门之HTTP协议基础 ·理解AJAX工作原理构建网站的有效方法 ·Ajax核心：XMLHTTP组件相关技术资料 ·AJAX使用技巧：如何处理书签和翻页按扭 ·ajax技术制作得在线歌词搜索功能 ·AJAX学习基础：简单介绍数据岛使用方法 ·AJAX并不神秘：揭密各种AJAX控件和类库

热点视频教程
街舞舞步教学 windowsxp重装系统视频教程李孝利十分钟详细舞蹈教程美女教你跳舞街舞舞步教学2 双截棍视频教程-定式如何安装双操作系统韩国的太空步教程，后滑、侧滑、旋转太空【WindowsXP入门教程】 - 硬盘分区台球教程-基本杆法 [百家讲坛]三十六计01_借刀杀人 24式太极拳教学---基本动作斯诺克台球竿法-后退球动物世界之决战生死线2 超级全脑速读训练教程

设为首页 - 加入收藏 - 关于我们 - 联系我们 - 友情连接