Ajax初试之读取数据篇实现代码
程序员文章站
2022-03-25 10:57:29
是的，今天我们要实现的效果是．在不刷新网页的情况下读取并显示服务端的数据． 拿出来我们上次准备好的东西． １：xmlhttprequest对象的函数． ２：asp输出xml...
是的，今天我们要实现的效果是．在不刷新网页的情况下读取并显示服务端的数据．
拿出来我们上次准备好的东西．
１：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的函数．该函数的作用是当你点击读取数据按扭．发送请求，传回数据， 显示数据．
我们先来看post函数的第一行：var ajax = ajax_xmlhttp(); 该行的意思是说将具有xmlhttprequest对象的函数赋值给一个名字为ajax的变量， 这时ajax变量的自身就等于了xmlhttprequest对象．我们可以使用这个变量来引用xmlhttprequest对象中的各个方法和属性．
第二行：ajax.open("post","web_ajax.asp",true); 表示指定一个请求，请求方式为post，请求的服务端网页为web_ajax.asp，true代表为异步请求． 你可以参考：open方法
第三行：ajax.onreadystatechange=function(){}，指定了一段自定义程序．我们看function里的内容．当readystate状态等于4的时候，readystate等于4即代表请求的数据已被成功返回！并且status 返回200，status代表http请求状态码，返回200代表ok. 与此同时我们使用responsexml接收服务端传回的所有数据．responsexml代表以xml格式来接收数据．
我们将服务端返回的所有xml数据赋值给一个xmldata的变量．xmldata.getelementsbytagname("msg");即代表获取返回的xml数据中名字为msg所有的标签．你可以参考：getelementsbytagname解释与实例
msg[0]代表引用第一个msg标签．事实上我们的数据内也只存在一个msg．并返回该标签第一个子元素的文本内容．msg的第一个子元素即是那段文字．nodevalue代表获取这些文字．参考：firstchild方法与nodevalue 当返回的数据成功被解析，找出页面内id为str的div，使用innerhtml将数据显示到网页中．
post函数中最后一行：ajax.send(null);这个大家一看便知．发送请求．null代表发送一个空的请求，没有数据要提交．
最后我们重点讲一下onreadysatechange这个属性．说他是属性，但他具有事件机制．也就是说你可以为他指定一个函数．onreadystatechange的工作原理是：每次readystate的状态改变．都会执行onreadystatechange指定的那个函数． 其实在ajax.send(null)没有执行之前．onreadystatechange已经被执行了至少一次了．因为当调用了open方法以后，readystate的状态会发生变化．因此会触发onreadystatechange的函数．这类似一个递归机制．readystate的状态发生变化 执行onreadystatechange的函数．而我们又在函数里判断readysate状态值，其实在一个完整的请求过程中，readystate至少会发生4次变化．根据浏览器会有所不同．只有当readystate等于4的时候．我们开始接收数据并解析．如果你还不够明白，请仔细阅读：onreadystatechange属性 readystate方法，以及status
好，我们这次的＂ajax初试之读取数据篇＂就到此为止，如果你还有不明白的地方，请加以练习，慢慢揣摩．相信会有所收获．下一篇我们讲：＂ajax读取数据到表格＂
拿出来我们上次准备好的东西．
１：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的函数．该函数的作用是当你点击读取数据按扭．发送请求，传回数据， 显示数据．
我们先来看post函数的第一行：var ajax = ajax_xmlhttp(); 该行的意思是说将具有xmlhttprequest对象的函数赋值给一个名字为ajax的变量， 这时ajax变量的自身就等于了xmlhttprequest对象．我们可以使用这个变量来引用xmlhttprequest对象中的各个方法和属性．
第二行：ajax.open("post","web_ajax.asp",true); 表示指定一个请求，请求方式为post，请求的服务端网页为web_ajax.asp，true代表为异步请求． 你可以参考：open方法
第三行：ajax.onreadystatechange=function(){}，指定了一段自定义程序．我们看function里的内容．当readystate状态等于4的时候，readystate等于4即代表请求的数据已被成功返回！并且status 返回200，status代表http请求状态码，返回200代表ok. 与此同时我们使用responsexml接收服务端传回的所有数据．responsexml代表以xml格式来接收数据．
我们将服务端返回的所有xml数据赋值给一个xmldata的变量．xmldata.getelementsbytagname("msg");即代表获取返回的xml数据中名字为msg所有的标签．你可以参考：getelementsbytagname解释与实例
msg[0]代表引用第一个msg标签．事实上我们的数据内也只存在一个msg．并返回该标签第一个子元素的文本内容．msg的第一个子元素即是那段文字．nodevalue代表获取这些文字．参考：firstchild方法与nodevalue 当返回的数据成功被解析，找出页面内id为str的div，使用innerhtml将数据显示到网页中．
post函数中最后一行：ajax.send(null);这个大家一看便知．发送请求．null代表发送一个空的请求，没有数据要提交．
最后我们重点讲一下onreadysatechange这个属性．说他是属性，但他具有事件机制．也就是说你可以为他指定一个函数．onreadystatechange的工作原理是：每次readystate的状态改变．都会执行onreadystatechange指定的那个函数． 其实在ajax.send(null)没有执行之前．onreadystatechange已经被执行了至少一次了．因为当调用了open方法以后，readystate的状态会发生变化．因此会触发onreadystatechange的函数．这类似一个递归机制．readystate的状态发生变化 执行onreadystatechange的函数．而我们又在函数里判断readysate状态值，其实在一个完整的请求过程中，readystate至少会发生4次变化．根据浏览器会有所不同．只有当readystate等于4的时候．我们开始接收数据并解析．如果你还不够明白，请仔细阅读：onreadystatechange属性 readystate方法，以及status
好，我们这次的＂ajax初试之读取数据篇＂就到此为止，如果你还有不明白的地方，请加以练习，慢慢揣摩．相信会有所收获．下一篇我们讲：＂ajax读取数据到表格＂
上一篇： jquery---5可见选择器
下一篇： 运行时代码求值