Web开发的教程图解

Web开发的教程图解Web开发的教程图解同时我还将展示，如何使用JavaScript脚本和Dom接口，来为网页创建一个表格 将ajax请求的数据显示到该表格内本次的ajax实例效果中请求的服务端网页依然是：Web_ajax.Asp该网页使用了Asp输出xml技术如果你还不知道如何使用Asp输出xml请返回：ajax开始准备篇提醒：在每篇ajax教程的实例开始之前，你必须查看当天的Web_ajax.asp文件中的数据结构因为我们每次实例中要读取的标签和内容都不一样点击：查看Web_ajax.Asp上次我们读取的是msg标签今天我们要读取xml中新增的read标签我们要实现的效果是：将read标签下的Html，Css，Dom，JavaScript，Ajax这些文本内容显示到我们网页中的表格内先看下面的代码和实例演示复制代码 代码如下: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; itry_xmlhttp=new ActiveXObject(msXmlhttpi);catch(e)_xmlhttp=null; /循环创建基于IE浏览器的xmlhttp.结束/如果非IE浏览器，则创建基于FireFox等浏览器的xmlhttpRequestif(!_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请求状态码返回okvar xmlData = ajax.responseXML;/接收返回xml格式数据var read = xmlData.getElementsByTagName(read);/获取所有的read标签if(read.length!=0)var t = document.createElement(table);/创建一个表格元素t.setAttribute(border,1);document.body.appendChild(t);/将表格添加到doby内for(var i=0;ivar tr = t.Row(t.rows.length);/添加一行var td = tr.Cell(0);/添加一列td.innerHTML = read0.childNodesi.firstChild.nodeValue;/为单元格写入文本内容ajax.send(null);今天我们不再讲昨天重复过的内容同样在Post的函数内多了几行代码可以跟上一篇ajax初始读取数据篇进行对比下面我们来讲一下今天新增的代码的作用if read.length!=0：即判断read标签是否被成功获取如果其legnth属性不等于0，则代表read已经存在可以对其进行解析开始解析返回数据，但网页中并没有存在显示数据的元素所以我们创建一个表格：var t = document.createElement(table);请参考：createElementt.setAttribute(border,1);为表格添加一个边框属性请参考：setAttributedocument.body.appendChild(t);将创建好的表格添加到网页body元素内请参考：appendChild表格添加完成开始遍历read标签内的所有子元素也就是：html,css,dom,javascript,ajax这些内容开始一个循环,read0.childNodes.length的意思是获取read标签内所有子元素的个数在这里会返回5 i=0;i为了让每位读者加深理解我再陈述一遍该实例效果的实现流程：当你点击了显示数据按扭时，Post函数被启用，函数内一个名字为ajax的变量被赋值XMLHTTPRequest对象的引用然后便打开了open方法并使用send方法向服务端发出请求无论是open还是send方法，都会引发readyState方法的状态值发生变化一旦readyState发生变化就会触发onreadystatechange属性 onreadystatechange属性指定的程序将会执行然后在程序内再次判断readyState的状态值是否等于4，如果是则证明整个发送请求与服务端返回数据已经成功同时并判断status是否等200，如果是则代表http请状态码也已经ok!此时可以放心的百分之百的接收数据，于是我们使用responseXML属性来接收返回的数据该属性只限制接收xml格式的数据我始终认为将xml格式的数据做为请求与回传的中介是ajax最标准的使用方法！今天的ajax实例教程-ajax之读取数据到表格就告一段落我想是不是应该留个问题让各位读者来解决一下？各位有没有发现在实例演示中你如果重复点击显示数据按扭表格会被重复的创建数据也会被重复的读取我希望各位读者可以解决该问题