Ajax中怎么读取数据

这篇文章给大家介绍Ajax中怎么读取数据，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联公司公司2013年成立，先为龙岩等服务建站，龙岩等地企业，进行企业商务咨询服务。为龙岩企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

１：XMLHTTPRequest对象的函数．
２：Asp输出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中怎么读取数据
链接URL：https://www.cdcxhl.com/article32/gcissc.html

成都网站建设公司_创新互联，为您提供云服务器、小程序开发、网站设计公司、微信小程序、做网站、营销型网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容