精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站开发>ajax教程>正文

ASP+AJAX打造无刷新新闻评论系统


来源:不详 时间:07-06-12 点击: 点击这里收藏本文

  此新闻评论系统共分为五个部分,分别为数据库、前台页面、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:自定义的返回处理函数

9 7 3 1 2 3 4 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.