了解Ajax的朋友也许知道其实这种炫丽效果的实现并不是一件很为难的事，当然如果你不了解何为Ajax那也没有关系，本节我们就通过打造一个新闻评论系统，来看看到底什么是Ajax,首先我们还是先了解一些基础东西。
什么是Ajax？
Ajax提出者Jesse James Garrett在《Ajax:一个Web应用的新途径》中提到Ajax为“Asynchronous JavaScript + XML”的简称，也就是异步的JavaScript和XML处理。其包含：
用XHTML和CSS进行基于标准的表示方式：
采用DOM(document object model)动态显示和交互操作;
采用XML和XSLT进行数据交换和操作;
采用XMLHttpRequest进行异步数据获取;
采用JavaScript绑定上述技术应用;
Ajax与传统Web应用有什么不同？
Ajax与传统Web应用最大的不同就是Ajax可以对页面某一个区域进行局部加载，而不是像传统Web中每次页面请求后的都必须重新加载整个页面，特别在页面负载比较大的情况下，页面加载时间就比较长，用户多数时间就处在等待状态，而呈现给用户的仅仅是一片空白，而在Ajax的应用中就可以很好的避免这类事情的发生。
Ajax的工作原理是什么？
Ajax主要是通过JavaScript对象中的XmlHttpRequest向服务器提出请求，并根据处理的结果更新页面。这样的更新不会使整个页面全部更新，而是根据用户的需要对某个区域进行局部更新，而且在更新的同时不影响其它区域的浏览。例如：搜狐个人博客中每个栏目后面的刷新按钮。
什么是XmlDom？
XMLDOM是用来访问和操作XML文档的编程接口规范。XMLDOM被设计为可用于任何语言和任何操作系统。借助DOM，程序员可以创建XML文档、遍历其结构，增、改、删其元素。DOM将整个XML文档视作一棵树，文档级的元素是树的根。
下面我们就来看看几个与本教程相关的功能，值得注意的是以下方法或属性并不是同一个对象下，具体请看说明：
getElementsByTagName 方法
说明：传回指定名称的元素集合。
语法：objNodeList = xmlDocument.getElementsByTagName(tagname);
例：var node=xmlDom.responseXML.getElementsByTagName("pl");
getAttribute()方法
说明：获得某个元素节点的属性值
语法：elementNode.getAttribute(name)
例：var tot=xmlDom.responseXML.getElementsByTagName("pl")[0].getAttribute("tot");
childNodes 属性
说明：传回一个节点列表，包含该节点所有可用的子节点。
语法：objNodeList=node.childNodes;
例：objNodeList = xmlDoc.childNodes;
如需具体的某一个节点, var u= xmlDoc.childNodes(0);
Length属性 ()
说明：返回一个节点列表中的节点数量
语法：nodelistObject.length
例：var len=node.length;
至此，基础知识已经讲完了，如果你还是不太了解的话，那建议你去看一些javascript相关的教程。下面我们就看这个新闻评论系统的具体实现原理
假设有一个页面index.asp，上半部分为评论列表显示区域，下面为评论提交区域。那么这样一个页面我们如何显示评论内容和提交评论呢？
传统：上半部分评论列表直接通过数据库查询语句读取并显示，每当提交新的评论时，先传递给处理页面，处理页面处理完毕后再返回index.asp这个页面，当然index.asp是重新加载获得新的评论。
Ajax:：首先列表页面的内容是一个单独的xml文件(pl_list.asp)，然后index..asp中的上半部分评论通过XmlHttpRequest请求pl_list.asp页面，并通过返回的结果传递到需要更新区域。提交评论同样如此，每次提交采用XmlHttpRequest请求提交处理程序，然后重新更新评论列表显示区域。
此新闻评论系统共分为五个部分，分别为数据库、前台页面、JS代码、服务器处理、CSS样式。
数据库的设计
PL表：
字段名
类型
长度
id
自动编号
user
文本
20
dateandtime
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）日期/时间
content
备注
newid
数字
前台页面：(index.htm)
如上图所示，前台页面共包括两部分，上半部分为页面评论列表显示，下半部分为提交评论。由于我们这里只是模拟一个新闻评论系统，并没有真正的新闻页面，那么在传递新闻ID的时候我们采用了一个默认值 〈input name="newsid" value="1" type="hidden"/〉。
代码：index.htm
〈%@LANGUAGE="VBS
length;//获得pllist节点集合中节点的总数量for(var i=0;i〈len;i++)
{
var u=node[i].childNodes(0).text;//获得节点第一个子节点的值,这里指呢称
var d=node[i].childNodes(1).text; //获得节点第二个子节点的值，这里指时间
var co=node[i].childNodes(2).text; //获得节点第三个子节点的值,这里指内容
var idnub=node[i].childNodes(3).text; //获得节点第四个子节点的值,这里指新闻ID
cont+='〈div class="u"〉呢称：'+u+'〈/div〉〈div class="d"〉时间：'+d+'〈/div〉〈div class="idnub" onclick="del('+idnub+')" style="cursor:hand" onmouseout="this.style.background=''" onmousemove="this.style.background='#99cc66'"〉删除〈/div〉〈div class="co"〉内容：'+co+'〈/div〉'; //将所获得的评论内容生成一个字符串
}
var cont1=pagecount(tot,curpage);//调用分页函数
cont+=cont1;
pllist.innerHTML=cont;//将内容呈现
}
else
{
pllist.innerHTML="暂无评论!";
}
}
评论列表分页：pagecount函数
function pagecount(tot,cur)
{
var cont1="";
if (tot%5==0) //默认每页五条，这个要求与服务器端保持一致
{
pages=parseInt(tot/5);
}
else
{
pages=parseInt(tot/5)+1;
}
for(var j=1;j〈=pages;j++)
{
if (j==cur)
{ cont1+="〈span〉"+j+"〈/span〉 "}
else
{ cont1+="〈span style='cursor:hand;color:#0000ff' onmouseout='this.style.background=""' onmousemove='this.style.background="#99cc66"' onclick='gotopage("+j+")'〉"+j+"〈/span〉 "}
}
return cont1;
}
跳转页数：gotopage函数
function gotopage(page)
{
loadXML("get","pl_list.asp？page="+page,getList);
}
function loadDom() //定时更新评论列表,初始化10秒钟
{
loadXML("get","pl_list.asp",getList);
setTimeout("loadDom()",10000)
}
3.删除评论
function del(idnub)
{
var msg=document.getElementById("msg");
msg.innerText="正在删除……";
loadXML("get","pl_del.asp？id="+idnub,getdel);
}
function getdel(xmlDom) //删除后所触发的事件,更新页面
{
var msg=document.getElementById("msg");
msg.innerText="删除成功!";
loadXML("get","pl_list.asp",getList);
}
4.提交评论
function fb() //处理提交
{
var msg=document.getElementById("msg");
var user=document.getElementById("user");
var content=document.getElementById("content")
var newsid=document.getElementById("newsid")
if (user.value=="")
{
alert("呢称不可为空!");
return false;
}
if (content.value=="")
{
alert("内容不可为空!");
return false;
}
msg.innerText="正在发表评论";
loadXML("get","pl_fb.asp？user="+user.value+"&content="+content.value+"&newsid="+newsid.value,getfb);
}
function getfb(xmlDom) //评论提交后所触发的事件，更新评论列表
{
var msg=document.getElementById("msg");
msg.innerText=xmlDom.responseText;
loadXML("get","pl_list.asp",getList);
}
服务器处理程序
根据JS代码页的分段介绍，我们了解此系统的功能大致包括评论的显示处理、评论的删除处理、评论的提交处理三个功能，那么我们就根据这三个功能分别介绍。
评论的显示处理页面：p
离不开一个好的样式，当然我这个属于最基本的，算是看得清楚罢了，大家如果有兴趣可以对样式文件作修改。 .u { /*呢称*/
font-size: 12px;
float:left;
height:25px;
line-height:20px;
width:120px;
}
.d { /*时间*/
font-size: 12px;
float:left;
height:25px;
line-height:20px;
width:120px;
}
.idnub { /*删除*/
text-align:center;
font-size: 12px;
height:25px;
line-height:25px;
width:30px;
}
.co {/*内容*/
font-size: 12px;
width:280px;
}
这是我第一次尝试在asp中使用ajax,习惯于donet中的拖拖拉拉，突然用最原始的方式写代码还真有点不习惯，特别是缺少了那种所见即所得的效果，每一步的实现都得在不断的调试中完成,的确是一件很累的事情。当然随着Ajax式的程序开发愈来愈受欢迎，现在市面的框架、工具也越来越多，相信有那么一天，开发Ajax应用程序终究会变成一件易常简单的事。
