实验指导八 使用AJAX技术获取服务器XML数据
(要求提交实验报告,报告中有实验结果截图)
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) {
window.alert(“不?能¨¹创ä¡ä建¡§对?象¨®实º¦Ì例¤y”);
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){
window.alert(“不?能¨¹创ä¡ä建¡§对?象¨®实º¦Ì例¤y”);
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(/HTMLPage.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();”>数ºy据Y库a原-理¤¨ª</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)查看运行结果如下图: