ASP的实例:ASP+AJAX制作无刷新新闻评论系统

2014 年 8 月 22 日5470

  假设有一个页面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的时候我们采用了一个默认值<inputname="newsid"value="1"type="hidden"/>。
  
  代码:index.htm
  
  <>
  
  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://http://www.zjjv.com///TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  <htmlxmlns="http://http://www.zjjv.com///1999/xhtml">
  
  <head>
  
  <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  
  <title>评论系统</title>
  
  <scriptsrc="main.js"></script>
  
  <linkhref="main.css"rel="stylesheet"type="text/css"/>
  
  </head>
  
  <body>
  
  <divid="pllist">正在加载评论……
  
  <script>loadDom();setTimeout("loadDom()",10000);</script>
  
  </div>
  
  <divstyle="width:240px;font-size:12px;text-align:center">
  
  <fieldset><legend>评论</legend>
  
  呢称:<inputname="user"type="text"style="width:180px"/><inputname="newsid"value="1"type="hidden"/><br/>
  
  内容:<textareaname="content"style="width:180px;height:80px"></textarea><br/>
  
  <inputname="submit"value="我要评论"onclick="fb();"type="button"/>
  
  </fieldset>
  
  </div>
  
  <divstyle="font-size:12px;"id="msg"></div>
  
  </body>
  
  </html>
  
  JS代码页(核心部分)main.js
  
  JS代码算是本系统的一个核心部分了,Ajax的体现基本全包含在这短短数十行的代码中,是连结前台与后台处理的一个桥梁,可谓是重中之重,为了更好的让大家理解整个功能,我们将分段介绍。
  
  1、获得XmlHttp对象,创建并返回一个XmlHttp对象。
  
  varxhr;
  
  functiongetXHR(){
  
  try{
  
  xhr=newActiveXObject("Msxml2.XMLHTTP");
  
  }catch(e){
  
  try{
  
  xhr=newActiveXObject("Microsoft.XMLHTTP");
  
  }catch(e){
  
  xhr=false;
  
  }
  
  }
  
  if(!xhr&&typeofXMLHttpRequest!='undefined'){
  
  xhr=newXMLHttpRequest();
  
  }
  
  returnxhr;
  
  }
  
  functionopenXHR(method,url,callback){
  
  getXHR();
  
  xhr.open(method,url);
  
  xhr.onreadystatechange=function(){
  
  if(xhr.readyState!=4)return;
  
  callback(xhr);
  
  }
  
  xhr.send(null);
  
  }
  
  functionloadXML(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:自定义的返回处理函数

0 0