Ajax在html页面获取后台XML文件资源
一、准备工具
站长吧ASP调试工具.exe，这个工具是为了快速建立asp环境，方便调试。
二、建立文件夹
1.建立网站根文件夹，名字随意，将站长吧ASP调试工具.exe复制到根文件夹；
2.建立xml子文件夹，在其中建立book.xml文件。
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Copyright w3school.com.cn -->
<!-- W3School.com.cn bookstore example -->
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>
3.在根文件夹建立index.html页面。
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
//是按钮单击调用的函数
function loadXMLDoc(){
var xmlhttp;//XHR对象
var txt,x,i; //根据不同版本浏览器获得XHR对象
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} //XHR状态改变函数，这也是前端使用XHR的主要函数
xmlhttp.onreadystatechange=function(){
//下面的条件几乎是固定写法
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//获取从服务器上发回来的数据，为XML类型
xmlDoc=xmlhttp.responseXML;
txt="";
//把标签为"title"的文本对象提取出来，放到数组x中
x=xmlDoc.getElementsByTagName("title");
//逐一读取数组，取得每一个元素第一个节点的值，即图书名称，追加给文本字符串
for (i=0;i<x.length;i++){
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
//在文本中更新
document.getElementById("myDiv").innerHTML=txt;
}
}
//执行发送任务
xmlhttp.open("GET","xml/books.xml",true);
xmlhttp.send();
}
</script>
</head> <body> <h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button> </body>
</html>
三、执行效果
1.运行站长吧ASP调试工具.exe，默认浏览器会自动弹出主页，也可以在浏览器中输入电脑的IP来访问；
2.单击按钮，页面局部刷新。
四、小结：
1.本例中读取的是一个xml文件，所以用了xmlDoc=xmlhttp.responseXML，如果是文本文件或者字符串，就要用到xmlhttp.responseText；
2.具体资料参考http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_response.asp。
Ajax在html页面获取后台XML文件资源的更多相关文章
- Android之获取string.xml文件里面的方法
获取string.xml文件里面的方法 在此做个笔记: 1.在AndroidManifest.xml与layout等xml文件里: android:text="@string/resourc ...
- springboot 整合 MongoDB 实现登录注册，html 页面获取后台参数的方法
springboot简介: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...
- java web 通过前台输入的数据（name-value）保存到后台 xml文件中
一:项目需求,前端有一个页面,页面中可以手动输入一些参数数据,通过点击前端的按钮,使输入的数据保存到后台生成的.xml文件中 二:我在前端使用的是easyui的propertygrid,这个能通过da ...
- Android中通过代码获取arrays.xml文件中的数据
android工程res/valuse文件夹下的arrays.xml文件中用于放各种数组数据,比如字符串数组.整型数组等,数组中的数据可能是具体的值,也有可能是对资源数据的引用,下面针对这两种情况通过 ...
- 记录-在jsp页面获取后台值在页面显示过长处理
在下面的红色标记处 后台获取的值(字符串)在页面显示过长或者与其他重叠 (xxx).cutStr(15) 15代表的是展示字符串的长度 data.rows[i].avgPrice, ), data.r ...
- android 通过getDimension,getDimensionPixelOffset和getDimensionPixelSize获取dimens.xml文件里面的变量值
dimens.xml里写上三个变量: <dimen name="activity_vertical_margin1">16dp</dimen> <di ...
- springMVC笔记：jsp页面获取后台数据记录列表
1.读取数据库中的记录List<HashMap<String,String>> attributes; 2.Controller构造Model如下: @RequestMappi ...
- jsp页面获取后台传过来的list集合的长度
在jsp页面导入函数标签库: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"% ...
- 获取AndroidManifest.xml文件中的meta-data
以获取高德地图的key值为例 <meta-data android:name="api_key" android:value="l8o0DhNxmvPDpCxTab ...
随机推荐
- 【python】面向对象
面向对象编程--Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 类class 实例(i ...
- mount: /dev/sdb1 already mounted or /mnt/hdb busy 导致NameNode无法启动
最近,公司由于断电导致的服务器关机,等到来电了,重启集群发现Namenode无法启动,查看原因是由于无法加在faimage文件,在查看一下Namenode的磁盘挂在情况(df -h命令查看),发现磁盘 ...
- Linux代码的重用与强行卸载Linux驱动
(一)Linux代码的重用 重用=静态重用(将要重用的代码放到其他的文件的头文件中声明)+动态重用(使用另外一个Linux驱动中的资源,例如函数.变量.宏等) 1.编译是由多个文件组成的Linux驱动 ...
- Python学习路程day21
本节内容: 项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以 ...
- macbook air 128g 磁盘清理
使用 du 命令发现 ~/Library/Developer/Xcode/DerivedData 占用了大量空间,这些都是xcode对以前建过的project源码文件建立的索引等,如果不需要可以都删 ...
- UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)！
2015年4月. 成都 UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)! --- 全面性能提升,UCanCode有史以来最强大的版本发布! E-Form++可 ...
- 后缀名“.dll .obj .lib”和“ .so .o .a”文件的区别含义
(1) .dll .obj .lib使用在windows平台下. .dll:动态链接库,作为共享函数库的可执行文件. .obj:目标文件,相当于源代码对应的二进制文件,未经 ...
- 安装MySql for Visual Studio后，打开IDE找不到MySql选项
只能说安装程序功能不健全,找不到Visual Studio也不问,自己随便找了个地儿把插件放下了...这程序员真2! 原文在这里,作者思路对头.原文:"安装MySql for Visual ...
- 分析一个delphi程序
系统 : Windows xp 程序 : k4n6 程序下载地址 :https://pan.baidu.com/s/1pLANxyj 要求 : 注册机编写 使用工具 : OD & DeDe 可 ...
- LayaAir引擎——（九）
var h = new Array(); var j = new Array(); var xbCursor = 0; function xbinit() { xbinitName(); xbRect ...