Ajax初试之读取数据篇
拿出来我们上次准备好的东西．１：XMLHTTPRequest对象的函数．２：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; 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读取数据到表格＂
出自：http://Www.Web666.Net
作者：康董
相关推荐
-
ajax读取数据后使用jqchart显示图表的方法
本文实例讲述了ajax读取数据后使用jqchart显示图表的方法.分享给大家供大家参考.具体分析如下: 最近项目中需要显示出图表效果,原来收集到的图表插件终于有用武之地了. 但是和jqchart对比,还是有很多不同之处的. 实现效果: 我就对jqchart进行了重新编写. 首先要解决的是不显示x轴和y轴: //各DIV作成 // 取消标题显示 /* this.titleBox//Title =this.mkBoxElement('T', this.op.titleLeft,this.op.tit
-
通过Jquery的Ajax方法读取将table转换为Json
1. 创建Users表 复制代码 代码如下: create table Users ( UserId int identity(1,1) primary key, UserName varchar(20) ) insert into Users values('Bradley') insert into Users values('Dan') 复制代码 代码如下: create table Users ( UserId int identity(1,1) primary key, UserNam
-
用js来解决ajax读取页面乱码
例子: rsajax.js: 复制代码 代码如下: var http_request = false; function makePOSTRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType
-
AJAX 实时读取输入文本(php)
客户端代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq
-
java读取properties文件的方法实例分析
本文实例讲述了java读取properties文件的方法.分享给大家供大家参考.具体分析如下: 1.不在项目中读取: Properties properties = new Properties(); BufferedReader read = new BufferedReader(new InputStreamReader(new FileInputStream("文件的路径"),"utf-8")); properties.load(read); properti
-
ajax读取properties资源文件数据的方法
本文实例讲述了ajax读取properties资源文件数据的方法.分享给大家供大家参考.具体实现方法如下: properties资源文件的内容如下: hello=englishww name=english zk emailEmpty=Field cannot be empty! emailInvalid=Invalid email address! js调用ajax处理代码: $.ajax({ type:'POST', dataType:'json', url:'/jeecms/jeecms/
-
用Ajax读取xml文件的简单例子
到此就可以就发送请求读取服务器端的XML数据了,最后要做的就是处理数据了. 关于XMLHttpRequest对象,请参考About XMLHttpRequest Object一文. 看例子: //AjaxDemo.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
-
javascript结合ajax读取txt文件内容
代码很简洁,这里就不多废话了,直接上源码 html代码 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"/> </head> <body> <button type="button" onclick="show()">请求数据
-
JS通过ajax动态读取xml文件内容的方法
本文实例讲述了JS通过ajax动态读取xml文件内容的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码读取note.xml文件,并填充显示相关字段 HTML文件代码如下 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome,
-
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
-
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
-
Ajax读取数据到表格的实现代码
今天我们要讲的是:使用Ajax无刷新技术读取服务端多条数据,并将返回的数据显示到一个表格内．同时我还将展示,如何使用JavaScript脚本和Dom接口,来为网页创建一个表格 ．将ajax请求的数据显示到该表格内． 本次的ajax实例效果中请求的服务端网页依然是:Web_ajax.Asp 该网页使用了Asp输出xml技术．如果你还不知道如何使用Asp输出xml请返回:＂ajax开始准备篇＂ 提醒:在每篇ajax教程的实例开始之前,你必须查看当天的Web_ajax.asp文件中的数据结构．因为我们
-
Ajax读取数据之分页显示篇实现代码
我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心,然后我们再看实例效果．所谓的ajax分页与传统的数据分页,在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下,将请求的页码,和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据:"ajax_page.asp?action=read&pagecount=3 & current_page=1" 在这段URL里,pagecount代表每页要显示
-
通过抓取淘宝评论为例讲解Python爬取ajax动态生成的数据(经典)
在学习python的时候,一定会遇到网站内容是通过 ajax动态请求.异步刷新生成的json数据 的情况,并且通过python使用之前爬取静态网页内容的方式是不可以实现的,所以这篇文章将要讲述如果在python中爬取ajax动态生成的数据. 至于读取静态网页内容的方式,有兴趣的可以查看本文内容. 这里我们以爬取淘宝评论为例子讲解一下如何去做到的. 这里主要分为了四步: 一 获取淘宝评论时,ajax请求链接(url) 二 获取该ajax请求返回的json数据 三 使用python解析json数据
-
php+ajax实现无刷新数据分页的办法
本文实例讲述了php+ajax实现无刷新分页的方法.分享给大家供大家参考.具体实现方法如下: index.php 文件,代码如下: <?php header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码 ?> <html> <head> <title>ajax分页演示</title> <script language="javascript"
-
AJAX SpringBoot 前后端数据交互的项目实现
目录 1.Ajax概述 2.基于JQuery的AJAX语法 1. Ajax 概述 Ajax 的英文全称是 ”Asynchronous JavaScript and XML“,即 ”异步的 JavaScript 和 XML“.其核心是通过 JavaScript 的 XMLHttpRequest 对象,以一种异步的方式,向服务器发送数据请求,并且通过该对象接收请求返回的数据,从而实现客户端与服务器端的数据交互. 优点:Ajax 能够刷新指定的页面区域(局部刷新),而不是刷新整个页面,从而减少客户端和
-
Ajax异步请求JSon数据(图文详解)
上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 我们友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图