ASP+AJAX制作无刷新新闻评论系统01
傳統:上半部分評論列表直接通過數據庫查詢語句讀取并顯示,每當提交新的評論時,先傳遞給處理頁面,處理頁面處理完畢后再返回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
<!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="我要評論" οnclick="fb();" type="button" />
</fieldset>
</div>
<div style="font-size:12px;" id="msg"></div>
</body>
</html>
JS代碼頁(核心部分) main.js
JS代碼算是本系統的一個核心部分了,Ajax的體現基本全包含在這短短數十行的代碼中,是連結前臺與后臺處理的一個橋梁,可謂是重中之重,為了更好的讓大家理解整個功能,我們將分段介紹。
1、獲得XmlHttp對象,創建并返回一個XmlHttp對象。
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:自定義的返回處理函數
轉載于:https://www.cnblogs.com/bihailantian/archive/2010/10/03/1841608.html
總結
以上是生活随笔為你收集整理的ASP+AJAX制作无刷新新闻评论系统01的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: OpenDDS应用开发步骤
- 下一篇: tomcat 绑定 ip 及域名,限制非