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读取数据到表格＂

赞 (0)

相关推荐

  • Ajax读取数据到表格的实现代码

    今天我们要讲的是:使用Ajax无刷新技术读取服务端多条数据,并将返回的数据显示到一个表格内．同时我还将展示,如何使用JavaScript脚本和Dom接口,来为网页创建一个表格 ．将ajax请求的数据显示到该表格内． 本次的ajax实例效果中请求的服务端网页依然是:Web_ajax.Asp 该网页使用了Asp输出xml技术．如果你还不知道如何使用Asp输出xml请返回:＂ajax开始准备篇＂ 提醒:在每篇ajax教程的实例开始之前,你必须查看当天的Web_ajax.asp文件中的数据结构．因为我们

  • Ajax添加数据即时显示信息篇

    今天我们要学习的内容是:使用ajax向服务端的数据库添加数据,然后在网页不刷新情况下即时显示被添加的数据．需要说明的是．本次ajax实例教程与前3篇有2点大不同之处． 1:我们要对数据库进行操作．2:更换请求的服务端网页．不再使用Web_ajax.Asp文件．新的请求网页是:Add_Data.Asp．看后缀大家就应该能明白．我在服务端采用的技术是Asp．都说Asp过时了．可他的简单易用,易学深深地吸引着我!当然也你可以使用php, .net,或jsp轻松的模拟该Asp文件的源码．我会在该次教程最

  • 什么是Ajax

    我很开心您来阅读我写的关于ajax的实例教程,无论您是第一次还是老朋友.我将在这里献上我至今所学,并毫不吝啬, 关于ajax,什么是ajax 重点: ajax不是一种语言,而是多种技术组合在一起使用,ajax只是这几种技术组合的代名词网上有很多教程文章这样解释ajax: Asynchronous JavaScript And XML 中文即是:异步的JavaScript与XML我觉得这种解释很笼统,会让新手摸不着头脑. 我想对上面的这种解释做点补充,我的ajax开发经验告诉我.利用javascr

  • Ajax添加数据与删除篇实现代码

    如果你真的把前几篇掌握了．实现ajax删除功能会易如反常．我所要教你的是．灵活利用JavaScript和Dom来实现一个酷酷的删除效果．其实你学习到这里．已经能够明白,在ajax技术中那些被请求的 服务端网页,在非ajax应用中并无太大区别．无非也是接受前端发过来的请求．在后台执行一些操作而已!学习完这篇教程以后．你会明白想要实现够炫够酷的的ajax效果．你必须要熟练掌握JavaScript Dom 这些技术精通． 刚刚我喝多了,上面的这段话是我在两天前就写好的．我本来想直接睡觉的．但我想试试．

  • Ajax读取数据之分页显示篇实现代码

    我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心,然后我们再看实例效果．所谓的ajax分页与传统的数据分页,在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下,将请求的页码,和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据:"ajax_page.asp?action=read&pagecount=3 & current_page=1" 在这段URL里,pagecount代表每页要显示

  • Ajax开始准备入门篇

    我将在Web圈推出ajax原创系列教程,如果你还不知道什么是ajax,请阅读:ajax是什么? 在此之前我们需要做一下简单的ajax准备工作,但你必须要具备基本的html,javascript,dom编写能力．否则这个ajax教程你读起来会很吃力．我的目的是通过这份教程．可以让你在你的网页中使用ajax技术实现,读取,添加,修改,删除数据的操作．也许你是只老鸟对我写的这些不屑一顾,但我还是希望你能看 下该教程中演示的一些例子,没准会有地方吸引你! 下面我们要做的有2点．第1我们必须创建一个可用的

  • Ajax修改数据即时显示篇实现代码

    我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码． 其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果! 复制代码 代码如下: <html> <head> <title>ajax修改数据</title> <style> body{ font-size:12px; } </style>

  • Ajax初试之读取数据篇实现代码

    是的,今天我们要实现的效果是．在不刷新网页的情况下读取并显示服务端的数据． 拿出来我们上次准备好的东西． 1:XMLHTTPRequest对象的函数． 2:Asp输出xml格式的文件．你可以点击查看该文件内容 复制代码 代码如下: <% '出自:http://Www.Web666.Net '作者:康董 '如需转载请务必保留以上信息 '定义一个变量,来保存xml数据 dim xml xml = "<?xml version='1.0' encoding='gb2312'?><

  • Ajax初试之读取数据篇

    拿出来我们上次准备好的东西．1:XMLHTTPRequest对象的函数．2:Asp输出xml格式的文件．你可以点击查看该文件内容:Asp输出xml格式的数据 打开以后你会发现我们使用Asp技术动态的输出一个xml格式的数据．如果你对该技术还不了解,请返回阅读:ajax开始准备篇 在这个输出的数据里面有一个msg标签．标签里包含了一段文字内容．今天我们就读取这个msg标签．并将文字内容显示到你的网页上． 先看下面的代码．并附上效果演示 web_ajax.asp 复制代码 代码如下: <?xml v

  • Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码

    Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码

    1 建立get.php get.php=> 复制代码 代码如下: <?php $data=array( array(1,"yixing",123), array(2,"chenlin",13), array(3,"lixin",123), array(4,"liumei",344), array(5,"qiuye",343), array(6,"zhangli",231),

  • 原生ajax处理json格式数据的实例代码

    原生ajax处理json格式数据代码实例: 由于jQuery的出现,原生ajax使用频率也越来越少,这当然是因为jQuery的便利性多导致的. 但是对于原生ajax实现原理的知晓也是非常重要的,下面就改造本板块的一个使用jquery ajax实现的代码. 代码实例如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

  • Ajax按需读取数据生成下级菜单

    jilian.htm 复制代码 代码如下: <script language="javascript"> var http_request=false; function send_request(url){//初始化,指定处理函数,发送请求的函数 http_request=false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest){//Mozilla浏览器 http_request=new XMLHttpRequest

  • C#简单嵌套flash读取数据的实现代码

    C#简单嵌套flash读取数据的实现代码

    效果: 说明:此效果只是简单的嵌套flash读取数据库中某两个字段的数据.([js下载地址:http://xiazai.jb51.net/201311/yuanma/FusionCharts(jb51.net).js] [swf下载地址:http://pan.baidu.com/s/1b2O9Q]    ) 事件:初始化加载. 代码部分: HTML: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head

  • 简单实现ajax获取跨域数据

    本文实例为大家分享了ajax获取跨域数据的具体代码,供大家参考,具体内容如下 1.效果图 2.源码 <html> <head> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript"> function getData(keyword) { var ur

随机推荐