Web开发的教程图解

同时我还将展示，如何使用JavaScript脚本和Dom接口，来为网页创建一个表格 ．将ajax请求的数据显示到该表格内．

本次的ajax实例效果中请求的服务端网页依然是：Web_该网页使用了Asp输出xml技术．如果你还不知道如何使用Asp输出xml请返回：＂ajax开始准备篇＂

提醒：在每篇ajax教程的实例开始之前，你必须查看当天的Web_文件中的数据结构．因为我们每次实例中要读取的标签和内容都不一样．点击：查看Web_

上次我们读取的`是msg标签．今天我们要读取xml中新增的read标签．我们要实现的效果是：将read标签下的Html，Css，Dom，JavaScript，Ajax这些文本内容．显示到我们网页中的表格内．

先看下面的代码．和实例演示

复制代码 代码如下:

function ajax_xmlhttp(){

//在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本

var msXmlhttp = new Array("TTP.5.0","TTP.4.0","TTP.3.0","TTP","TTP");

for(var i=0; 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对象赋值给一个变量．

("post","web_",true);//设置请求方式，请求文件，异步请求

adystatechange = function(){//你也可以这里指定一个已经写好的函数名称

if(yState==4){//数据返回成功

if(us==200){//http请求状态码返回ok

var xmlData = onseXML;//接收返回xml格式数据

var read = lementsByTagName("read");//获取所有的read标签

if(th!=0){

var t = teElement("table");//创建一个表格元素

ttribute("border","1");

ndChild(t);//将表格添加到doby内

for(var i=0;i

var tr = (th);//添加一行

var td = (0);//添加一列

rHTML = read[0]dNodes[i]Value;//为单元格写入文本内容

}

}

}

}

}

(null);

}

今天我们不再讲昨天重复过的内容．同样在Post的函数内．多了几行代码．可以跟上一篇＂ajax初始读取数据篇＂进行对比．

下面我们来讲一下今天新增的代码的作用．

if th!=0：即判断read标签是否被成功获取．如果其legnth属性不等于0，则代表read已经存在．可以对其进行解析

开始解析返回数据，但网页中并没有存在显示数据的元素．所以我们创建一个表格：var t = teElement("table");．请参考：createElement

ttribute("border","1");为表格添加一个边框属性．请参考：setAttribute

ndChild(t);将创建好的表格添加到网页body元素内．请参考：appendChild

表格添加完成．开始遍历read标签内的所有子元素．也就是：html,css,dom,javascript,ajax这些内容．

开始一个循环,read[0]th的意思是获取read标签内所有子元素的个数．在这里会返回5． i=0;i<5条件ok! 每循环一次i变量会自动+1，表格会增加一行，并为该行增加一列．同时为这一列写入read第i个子元素的文本内容．直到i=5,i不会再小于read子元素的个数．条件不满足．循环停止．此时数据正好被显示完毕！

为了让每位读者加深理解．我再陈述一遍该实例效果的实现流程：当你点击了＂显示数据＂按扭时，Post函数被启用，函数内一个名字为ajax的变量被赋值XMLHTTPRequest对象的引用．然后便打开了open方法．并使用send方法向服务端发出请求．无论是open还是send方法，都会引发readyState方法的状态值发生变化．一旦readyState发生变化就会触发onreadystatechange属性． onreadystatechange属性指定的程序将会执行．然后在程序内再次判断readyState的状态值是否等于4，如果是则证明整个发送请求与服务端返回数据已经成功．同时并判断status是否等200，如果是则代表http请状态码也已经ok!此时可以放心的百分之百的接收数据，于是我们使用responseXML属性来接收返回的数据．该属性只限制接收xml格式的数据．我始终认为将xml格式的数据做为请求与回传的中介．是ajax最标准的使用方法！

今天的ajax实例教程--＂ajax之读取数据到表格＂就告一段落．我想是不是应该留个问题让各位读者来解决一下？各位有没有发现在实例演示中．你如果重复点击＂显示数据＂按扭．表格会被重复的创建．数据也会被重复的读取．我希望各位读者可以解决该问题．