Ajax初试之读取数据篇实现代码
2024-09-01 08:29:15
供稿：网友
是的，今天我们要实现的效果是．在不刷新网页的情况下读取并显示服务端的数据．
拿出来我们上次准备好的东西．
１：XMLHTTPRequest对象的函数．
２：Asp输出xml格式的文件．你可以点击查看该文件内容
代码如下:
<%
'出自：http://Www.Web666.Net
'作者：康董
'如需转载请务必保留以上信息
'定义一个变量，来保存xml数据
dim xml
xml = "<?xml version='1.0' encoding='gb2312'?><body>"
xml = xml&"<msg>一个简单的Asp输出xml的示例，以后在我们的ajax教程实例中，我们都将使用该文件进行数据的读取操作</msg>"
xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.Write xml
Response.End
%>
打开以后你会发现我们使用Asp技术动态的输出一个xml格式的数据．如果你对该技术还不了解，请返回阅读：ajax开始准备篇 在这个输出的数据里面有一个msg标签．标签里包含了一段文字内容．今天我们就读取这个msg标签．并将文字内容显示到你的网页上．
先看下面的代码．并附上效果演示
代码如下:
<html>
<head>
<title>创建一个可用的xmlhttpreuqest对象</title>
</head>
<body>
<div id="str"></div><!--请求回来的数据将显示在该div中-->
<input type="button" value="显示数据" onclick="Post()" />
<script type="text/javascript">
function ajax_xmlhttp(){
//在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循环创建基于IE浏览器的xmlhttp.结束
//如果非IE浏览器，则创建基于FireFox等浏览器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//发送请求函数
function Post(){
var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量．
ajax.open("post","web_ajax.asp",true);//设置请求方式，请求文件，异步请求
ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称
if(ajax.readyState==4){//数据返回成功
if(ajax.status==200){//http请求状态码返回ok
var xmlData = ajax.responseXML;
var msg = xmlData.getElementsByTagName("msg");//获取所有的msg元素
var data = msg[0].firstChild.nodeValue;
document.getElementById("str").innerHTML = data;
}
}
}
ajax.send(null);
}
</script>
</body>
</html>
下面让我来慢慢分析该实例是如何实现的．在上面的代码中除了昨天我们创建的XMLHTTPRequest函数以外．在最上面多了一个ID属性为str的div， 该div的作用是用来显示我们请求回的数据．然后我们新写了一个名字为Post的函数．该函数的作用是当你点击读取数据按扭．发送请求，传回数据， 显示数据．
