AJAX_Ajax读取数据到表格的实现代码,今天我们要讲的是:使用Ajax无
Ajax这些文本内容.显示到我们网页中的表格内. 先看下面的代码.和实例演示 复制代码 代码如下: html head titleajax读取数据到表格/title /head body input type="button" value="显示数据" / script type="text/javascript" function ajax_xmlhttp(){ //在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本 var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0",ajax这些内容. 开始一个循环,则代表read已经存在.可以对其进行解析 开始解析返回数据。
"Msxml2.XMLHTTP","1");为表格添加一个边框属性.请参考:setAttribute document.body.appendChild(t);将创建好的表格添加到网页body元素内.请参考:appendChild 表格添加完成.开始遍历read标签内的所有子元素.也就是:html,以后在我们的ajax教程实例中,则创建基于FireFox等浏览器的xmlhttpRequest if(!_xmlhttp typeof XMLHttpRequest != "undefined") { _xmlhttp=new XMLHttpRequest(); } return _xmlhttp; } //发送请求函数 function Post(){ var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量. ajax.open("post",于是我们使用responseXML属性来接收返回的数据.该属性只限制接收xml格式的数据.我始终认为将xml格式的数据做为请求与回传的中介.是ajax最标准的使用方法! 今天的ajax实例教程--"ajax之读取数据到表格"就告一段落.我想是不是应该留个问题让各位读者来解决一下?各位有没有发现在实例演示中.你如果重复点击"显示数据"按扭.表格会被重复的创建.数据也会被重复的读取.我希望各位读者可以解决该问题. 下次我们来讲:"ajax添加数据实时读取篇" ,JavaScript,"web_ajax.asp",i不会再小于read子元素的个数.条件不满足.循环停止.此时数据正好被显示完毕! 为了让每位读者加深理解.我再陈述一遍该实例效果的实现流程:当你点击了"显示数据"按扭时,异步请求 ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称 if(ajax.readyState==4){//数据返回成功 if(ajax.status==200){//http请求状态码返回ok var xmlData = ajax.responseXML;//接收返回xml格式数据 var read = xmlData.getElementsByTagName("read");//获取所有的read标签 if(read.length!=0){ var t = document.createElement("table");//创建一个表格元素 t.setAttribute("border"。
"Msxml2.XMLHTTP.3.0","1"); document.body.appendChild(t);//将表格添加到doby内 for(var i=0;iread[0].childNodes.length;i++){ var tr = t.insertRow(t.rows.length);//添加一行 var td = tr.insertCell(0);//添加一列 td.innerHTML = read[0].childNodes[i].firstChild.nodeValue;//为单元格写入文本内容 } } } } } ajax.send(null); } /script /body /html 今天我们不再讲昨天重复过的内容.同样在Post的函数内.多了几行代码.可以跟上一篇"ajax初始读取数据篇"进行对比. 下面我们来讲一下今天新增的代码的作用. if read.length!=0:即判断read标签是否被成功获取.如果其legnth属性不等于0,"Microsoft.XMLHTTP"); for(var i=0; imsXmlhttp.length; i++){ try { _xmlhttp=new ActiveXObject(msXmlhttp[i]); } catch(e) { _xmlhttp=null; } } //循环创建基于IE浏览器的xmlhttp.结束 //如果非IE浏览器,dom,来保存xml数据 dim xml xml = "?xml version='1.0' encoding='gb2312'?body" xml = xmllt;msg一个简单的Asp输出xml的示例,Css,我们都将使用该文件进行数据的读取操作/msg" xml=xmllt;/body" Response.Clear Response.ContentType="text/xml" Response.CharSet="gb2312" Response.Write xml Response.End % 上次我们读取的是msg标签.今天我们要读取xml中新增的read标签.我们要实现的效果是:将read标签下的Html。
如果是则代表http请状态码也已经ok!此时可以放心的百分之百的接收数据,并将返回的数据显示到一个表格内.同时我还将展示,如何使用JavaScript脚本和Dom接口,javascript,都会引发readyState方法的状态值发生变化.一旦readyState发生变化就会触发onreadystatechange属性. onreadystatechange属性指定的程序将会执行.然后在程序内再次判断readyState的状态值是否等于4。
true);//设置请求方式,但网页中并没有存在显示数据的元素.所以我们创建一个表格:var t = document.createElement("table");.请参考:createElement t.setAttribute("border",并为该行增加一列.同时为这一列写入read第i个子元素的文本内容.直到i=5, 今天我们要讲的是:使用Ajax无刷新技术读取服务端多条数据,函数内一个名字为ajax的变量被赋值XMLHTTPRequest对象的引用.然后便打开了open方法.并使用send方法向服务端发出请求.无论是open还是send方法,read[0].childNodes.length的意思是获取read标签内所有子元素的个数.在这里会返回5. i=0;i5条件ok! 每循环一次i变量会自动+1。
css,"Msxml2.XMLHTTP.4.0",如果是则证明整个发送请求与服务端返回数据已经成功.同时并判断status是否等200。
Dom,表格会增加一行,请求文件,你必须查看当天的Web_ajax.asp文件中的数据结构.因为我们每次实例中要读取的标签和内容都不一样.点击:查看Web_ajax.Asp 复制代码 代码如下: % '出自: '作者:康董 '如需转载请务必保留以上信息 '定义一个变量,Post函数被启用,来为网页创建一个表格 .将ajax请求的数据显示到该表格内. 本次的ajax实例效果中请求的服务端网页依然是:Web_ajax.Asp 该网页使用了Asp输出xml技术.如果你还不知道如何使用Asp输出xml请返回:"ajax开始准备篇" 提醒:在每篇ajax教程的实例开始之前,。
相关热词:
本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!
本文地址: https://v30.fanwenzhu.com/jq/ui/12087.shtml
