实验指导八 使用 AJAX 技术获取服务器 XML 数据
（实验报告以 word 格式提交，实验结果要有运行结果截图）
1.实验目的
（1）掌握 AJAX 技术的原理。
（2）掌握 XMLHttpRequest 对象主要方法和属性。
（3）掌握 AJAX 的开发框架。
2.实验内容
服务器端有三个XML 文档，通过浏览器异步读取该XML 数据，
并显示在浏览器中。
3.实验步骤
（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）查看运行结果如下图：
评论0