位置：首页>> 网络编程>> JavaScript>> Asp+ajax打造无刷新新闻评论系统（2）

Asp+ajax打造无刷新新闻评论系统（2）

作者：懒羊　来源：懒羊的技术窝　发布时间：2008-02-12 15:43:00　

标签：ajax,评论,新闻,asp,无刷新

假设有一个页面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 日期/时间
　　content 备注
　　newid 数字

前台页面：(index.htm)

前台页面共包括两部分，上半部分为页面评论列表显示，下半部分为提交评论。由于我们这里只是模拟一个新闻评论系统，并没有真正的新闻页面，那么在传递新闻ID的时候我们采用了一个默认值<input name="newsid" value="1" type="hidden"/>。

代码：index.htm

<％@LANGUAGE="VBSCRIPT" CODEPAGE="936"％>
<!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-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>评论系统</title>
<script src="main.js"></script>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pllist">正在加载评论……
<script> loadDom();setTimeout("loadDom()",10000);</script>
</div>
<div style="width:240px;font-size:12px;text-align:center">
<fieldset><legend>评论</legend>
呢称：<input name="user" type="text" style="width:180px"/><input name="newsid" value="1" type="hidden"/><br/>
内容：<textarea name="content" style="width:180px;height:80px"></textarea><br/>
<input name="submit" value="我要评论" onclick="fb();" type="button" />
</fieldset>
</div>
<div style="font-size:12px;" id="msg"></div>
</body>
</html>

　　JS代码页(核心部分) main.js

JS代码算是本系统的一个核心部分了，Ajax的体现基本全包含在这短短数十行的代码中，是连结前台与后台处理的一个桥梁，可谓是重中之重，为了更好的让大家理解整个功能，我们将分段介绍。

1、获得XmlHttp对象，创建并返回一个XmlHttp对象。

var xhr;
function getXHR() {
try {
xhr=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xhr=false;
}
}
if(!xhr&&typeof XMLHttpRequest!='undefined') {
xhr=new XMLHttpRequest();
}
return xhr;
}
function openXHR(method,url,callback) {
getXHR();
xhr.open(method,url);
xhr.onreadystatechange=function() {
if(xhr.readyState!=4)return;
callback(xhr);
}
xhr.send(null);
}
function loadXML(method,url,callback) {
getXHR();
xhr.open(method,url);
xhr.setRequestHeader("Content-Type","text/xml");
xhr.setRequestHeader("Content-Type","GBK");
xhr.onreadystatechange=function() {
if(xhr.readyState!=4) return;
callback(xhr);
}
xhr.send(null);
}

　　具体的调用方法：

loadXML(method,url,callback)

method: http方法，例如：POST、GET、PUT及PROPFIND
url: 请求的URL地址，可以为绝对地址也可以为相对地址
callback:自定义的返回处理函数

第一页上一页 1

3 4 5 下一页

投稿

Asp+ajax打造无刷新新闻评论系统（2）

猜你喜欢