主页 > 知识库 > Ajax初试之读取数据篇

Ajax初试之读取数据篇

热门标签:Mysql连接数设置 团购网站 银行业务 科大讯飞语音识别系统 Linux服务器 服务器配置 电子围栏 阿里云
拿出来我们上次准备好的东西.1:XMLHTTPRequest对象的函数.2:Asp输出xml格式的文件.你可以点击查看该文件内容:Asp输出xml格式的数据
打开以后你会发现我们使用Asp技术动态的输出一个xml格式的数据.如果你对该技术还不了解,请返回阅读:ajax开始准备篇 在这个输出的数据里面有一个msg标签.标签里包含了一段文字内容.今天我们就读取这个msg标签.并将文字内容显示到你的网页上.
先看下面的代码.并附上效果演示
web_ajax.asp
复制代码 代码如下:

?xml version="1.0" encoding="gb2312" ?>
body>
msg>一个简单的Asp输出xml的示例,以后在我们的ajax教程实例中,我们都将使用该文件进行数据的读取操作/msg>
read>
li>Html/li>
li>Css/li>
li>Dom/li>
li>JavaScript/li>
li>Ajax/li>
/read>
/body>

下面是静态页面内容
复制代码 代码如下:

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; imsXmlhttp.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读取数据到表格"
出自:http://Www.Web666.Net
作者:康董
您可能感兴趣的文章:
  • ajax读取数据后使用jqchart显示图表的方法
  • JS通过ajax动态读取xml文件内容的方法
  • javascript结合ajax读取txt文件内容
  • 通过Jquery的Ajax方法读取将table转换为Json
  • 用js来解决ajax读取页面乱码
  • AJAX 实时读取输入文本(php)
  • 用Ajax读取xml文件的简单例子
  • java读取properties文件的方法实例分析
  • ajax读取properties资源文件数据的方法

标签:衡水 广元 江苏 枣庄 衢州 蚌埠 大理 萍乡

巨人网络通讯声明:本文标题《Ajax初试之读取数据篇》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266