一、准备工具

站长吧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文件资源的更多相关文章

  1. Android之获取string.xml文件里面的方法

    获取string.xml文件里面的方法 在此做个笔记: 1.在AndroidManifest.xml与layout等xml文件里: android:text="@string/resourc ...

  2. springboot 整合 MongoDB 实现登录注册，html 页面获取后台参数的方法

    springboot简介: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...

  3. java web 通过前台输入的数据（name-value）保存到后台 xml文件中

    一:项目需求,前端有一个页面,页面中可以手动输入一些参数数据,通过点击前端的按钮,使输入的数据保存到后台生成的.xml文件中 二:我在前端使用的是easyui的propertygrid,这个能通过da ...

  4. Android中通过代码获取arrays.xml文件中的数据

    android工程res/valuse文件夹下的arrays.xml文件中用于放各种数组数据,比如字符串数组.整型数组等,数组中的数据可能是具体的值,也有可能是对资源数据的引用,下面针对这两种情况通过 ...

  5. 记录-在jsp页面获取后台值在页面显示过长处理

    在下面的红色标记处 后台获取的值(字符串)在页面显示过长或者与其他重叠 (xxx).cutStr(15) 15代表的是展示字符串的长度 data.rows[i].avgPrice, ), data.r ...

  6. android 通过getDimension,getDimensionPixelOffset和getDimensionPixelSize获取dimens.xml文件里面的变量值

    dimens.xml里写上三个变量: <dimen name="activity_vertical_margin1">16dp</dimen> <di ...

  7. springMVC笔记：jsp页面获取后台数据记录列表

    1.读取数据库中的记录List<HashMap<String,String>> attributes; 2.Controller构造Model如下: @RequestMappi ...

  8. jsp页面获取后台传过来的list集合的长度

    在jsp页面导入函数标签库: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"% ...

  9. 获取AndroidManifest.xml文件中的meta-data

    以获取高德地图的key值为例 <meta-data android:name="api_key" android:value="l8o0DhNxmvPDpCxTab ...

随机推荐

  1. sql inner join , left join, right join , union,union all 的用法和区别

    Persons 表: Id_P LastName FirstName Address City 1 Adams John Oxford Street London 2 Bush George Fift ...

  2. DotSpatial 删除图层要素

    //添加图层后,定义图层,并获取图层 //遍历要素,并进行删除 FeatureSet fs = null; fs = (FeatureSet) map1.Layers[0].DataSet; //要素 ...

  3. UIView点击事件。弹出视图，背景虚化。

    @interface CountryViewController //背景 @property (strong, nonatomic) UIView *BackView; end //设置背景虚化 - ...

  4. GoldenGate Studio 12.2.1.1发布

    OGG studio是一款图形化OGG配置部署产品,其主要特性:1. 逻辑层面设计OGG,不需要了解OGG细节:2. 最值实践加快常用场景的配置:3. 使用拖拉映射,自动匹配源和目标对象:4. 一键部 ...

  5. ERROR 1872 (HY000): Slave failed to initialize relay log info structure from the repository

    salve复制线程停止,尝试start slave 时报ERROR 1872错误mysql> system perror 1872 MySQL error code 1872 (ER_SLAVE ...

  6. 可拖拽的ListView

    今天研究了一下可拖拽的ListView ,当ListView的数据不能充满整个模拟器的时候,系统自带的listview上拖下拽都不好使,显得很单调, 为了实现上拖下拽时也能实现滚动的效果,这时候就需要 ...

  7. sis9280触摸ic 基于rk3288 的安卓4.4的 多点触摸

    前言:sis提供的驱动ic.基于rk3288的安卓系统.亲眼看到人家完成一次移植.很激动的记下一些东西..虽然我看不懂.其实现在的工作也不需要看懂.叫人协助就好,只需要知道有这个东西. 1linux下 ...

  8. Java网络编程及安全

    一.实验内容: 1.运行教材上TCP代码,结对进行,一人服务器,一人客户端: 2.利用加解密代码包,编译运行代码,一人加密,一人解密: 3.集成代码,一人加密后通过TCP发送: 注:加密使用AES或者 ...

  9. super作用

    super()的作用: super可以用来访问超类的构造方法和被子类所隐藏的方法,如果子类中有方法与超类中的方法名称和参数相同,则超类中的方法就被隐藏起来,也就是说在子类中重载了父类中的方法. 引用父 ...

  10. 610K图纸打印新版增值税发票不完整的调整方法

    新版增票页面设置增票向下0.8向右-10,10刻度进纸测试 向右调整可能会有些出入 根据情况微调即可.