微信小程序实验指导八 使用AJAX 技术获取服务器 XML 数据
（实验报告以 word 格式提交，实验结果要有运行结果截图）
1. 实验目的
- 掌握 AJAX技术的原理。
- 掌握 XMLHttpRequest对象主要方法和属性。
- 掌握 AJAX的开发框架。
- 实验内容
服务器端有三个XML 文档，通过浏览器异步读取该XML 数据， 并显示在浏览器中。
- 实验步骤
（1）启动 vs2010，新建站点，在解决方案资源管理器中添加
XML 文档Book1.xml、Book2.xml、Book3.xml，内容如下： Book1.xml
<?xml version=”1.0″ encoding=”utf-8″ ?>
<BookInfo>
<title>数据库原理</title>
<author>王浩</author>
<ISBN>123456789</ISBN>
<publisher>清华大学出版社</publisher> <abstract><![CDATA[是数据库初学者和初级开发人员不可多得的数据库宝典，其中融入了作者对数据库深入透彻的理解和丰富的实际操作经验。与第2版一样，本版也深入浅出地描绘了数据库原理及其应用。 ]]></abstract>
</BookInfo>
Book2.xml
<?xml version=”1.0″ encoding=”utf-8″ ?>
<BookInfo>
<title>C#入门</title>
<author>陈明</author>
<ISBN>68945678</ISBN>
<publisher>清华大学出版社</publisher>
<abstract><![CDATA[C#编程的所有方面，包括C#语言本身、Windows编程、Web编程及
数据源的使用等内容。内容简介《C#入门经典(第4版)》通过C#可以很容易地学习.NET Framework 3.5的强大功能，所以C#是开始您编程生涯的绝佳方式。]]></abstract>
</BookInfo>
Book3.xml
<?xml version=”1.0″ encoding=”utf-8″ ?>
<BookInfo>
<title>XML技术基础</title>
<author>刘东</author>
<ISBN>23678905</ISBN>
<publisher>南京大学出版社</publisher>
<abstract><![CDATA[该书全面详实地介绍了XML的基本语法、基本用途和常用的开发工具和方法。内容简介本书主要内容：创建XML文档必须遵循的规则，如何创建和使用XML标记，提取信息并将其换为HTML或其他格式的方法，存储和读取XML文]]></abstract>
</BookInfo>
（2） 新建danyuan8.htm 文件，输入以下代码：
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>选项卡式显示</title>
<script type=”text/javascript”>
var xmlhttp;
function send_request(url) {
if (window.XMLHttpRequest) {
try {
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType(“text/xml”);
}
}
catch (e) {
xmlhttp = false;
}
}
else if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e) {
try {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e) {
xmlhttp = false;
}
}
}
if (!xmlhttp) {
return false;
}
xmlhttp.onreadystatechange = processRequest;
xmlhttp.open(“Get”, url, true);
xmlhttp.send(null);
}
function processRequest() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200 || xmlhttp.status == 0) {
var dobj = document.getElementById(“tabDiv”);
if (dobj != null) {
var objXML = xmlhttp.responseXML;
var root = objXML.documentElement;
var info = root.getElementsByTagName(“abstract”);
dobj.innerHTML = info[0].firstChild.data;
}
}
}
}
function loadUrl(tab) {
var url = window.location.toString();
url = url.replace(/danyuan8.htm/, tab);
send_request(url);
}
function tab1() { loadUrl(“book1.xml”); }
function tab2() { loadUrl(“book2.xml”); }
function tab3() { loadUrl(“book3.xml”); }
tab1();
</script>
</head>
<body>
| <a href=”javascript:void tab1();”>数据库原理</a> | ||
| <a href=”javascript:void tab2();”><br/>C#入门</a> | ||
| <a href=”javascript:void tab3();”><br/>XML技术</a> | ||
| <div id=”tabDiv” style=”border:1px solid black;padding:10px”></div> |
</body></html>
（3） 查看运行结果如下图：
请先 ！