静态页系列（二）异步添加评论

这里，没有使用成型的框架类库，如ASP.NET Ajax、Prototype、JQuery 等，一个是这些库都太大，功能多，而我就用那么一点点，有些浪费资源；另一个原因是这个功能实现起来也不太麻烦，正好练练手。所以这里就自己实现了

好了，下面正式开始：

1、添加加评论：
呵呵，服务器控件用常了，乍一换，还真有些不太适应。要让人评论，咱得先给人个评论框啊，我的做法是用 script 调用动态页，输出所需要的内容：

2

if (!this.IsPostBack)
2

{
3

if (Request.QueryString["id"] != null)
4

{
5

string iParentID = Request.QueryString["id"].ToString();
6

string IP = "";
7

try
8

{
9

IP = Request.ServerVariables["HTTP_X_FORWARDED_FOR"].ToString();
10

}
11

catch
12

{
13

IP = Request.ServerVariables["REMOTE_ADDR"].ToString();
14

}
15

string cTitle = "Re:" + Request.QueryString["title"].ToString();
16

string str = "document.write(\"<b>FeedBack:</b><br /><div class='feedbackNoItems'></div><span id='comment'></span>\");";
17

//评论输入框
19

str += "document.write(\"<table border='0' style='width:600px;height:200px;FONT: 12px/150% '宋体' Tahoma;'>" +
20

"<tr><td colspan='2' align='right'><a href='javascript:requestComment(" + iParentID.ToString() + ")'>刷新评论列表</a></td></tr>" +
21

"<tr><td style='width:25%;'>标题</td>" +
22

"<td style='width:75%;'><input type='hidden' id='iParentID' value='" + iParentID + "' /><input type='hidden' id='cIP' value='" + IP + "' /><input type='text' id='cTitle' value='" + cTitle + "' style='width:90%;border:1px solid #979696; '/></td>" +
23

"</tr><tr><td style='width:25%;'>姓名</td>" +
24

"<td style='width:75%;'><input type='text' id='cAuthor' style='width:90%;border:1px solid #979696;'/></td>" +
25

"</tr><tr><td style='width:25%; vertical-align:top;'>内容</td>" +
26

"<td style='width:75%;'><input type='text' id='cContent' onkeydown='ctlent(event)' style='width:90%;height:100px;border:1px solid #979696;'/></td>" +
27

"</tr><tr><td style='width:25%;'></td><td style='width:75%;' align='center'>" +
28

"<input type='button' value='清空' onclick='clearup();' style='width:50px;border:1px solid #979696; padding-top:3px; background-color:#E8E8E8'/>      " +
29

"<input type='button' value='发表评论' onclick='send();' style='width:70px;border:1px solid #979696; padding-top:3px; background-color:#E8E8E8' />  " +
30

"</td></tr></table><br/><div id='message' style='FONT: 12px/150% 宋体 Tahoma ;color:#E00404;'></div>\");";
31

//输出JS脚本
33

str += "document.write(\"<script src='../../../JavaScript/myAjax.js' type='text/javascript'></script>\");";
34

//评论显示样式
36

str += "document.write(\"<style type='text/css'>.mo_wp{ background:#F7F7F7; margin-bottom:4px;border:1px solid #dfdfdf;FONT: 12px/150% '宋体' Tahoma; }" +
37

".mo_title{ clear:both; background:#e3e3e3; color:#000; padding:6px 8px 6px 12px;}" +
38

".mo_title_l{ display:block; margin-right:12px; width:auto;}" +
39

".mo_title_r1,.mo_title_r2{ display:block; float:right; height:12px; width:50%; }" +
40

".mo_con{ clear:both; padding:8px 12px;color:#555; line-height:22px;}</style>\");";
41

Response.Write(str);
42

}
43

else
44

{
45

Response.Write("");
46

}
47

}

嗯，连样式一块输出 ;在这里，还记下了他的IP地址，嘿嘿。

框出来了，添加好内容，提交评论。这一过程中的表单验证、保存数据我都写在了myAjax.js里，主要就是调用WebService
向数据库添加数据我也表述不清，大家还是看代码吧：

/*
2

Title: Ajax 无刷新增加新闻评论【Ajax调用WebService】
3

Author:xpengfee DateTime:2007-07-27 9:40
4

*/
5

function getXMLRequester( )
6

{ //此函数是建立XMLHTTP组件的，可能ie低版本无法使用，请参阅msdn；
7

var xmlhttp_request = false;
8

try{
9

if( window.ActiveXObject )
10

{
11

for( var i = 5; i; i-- )
12

{
13

try
14

{
15

if( i == 2 )
16

{
17

xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
18

}
19

else
20

{
21

xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
22

xmlhttp_request.setRequestHeader("Content-Type", "text/xml;charset=utf-8");
23

}
24

break;　　
26

}
27

catch(e)
28

{
29

xmlhttp_request = false;
30

}
31

}
32

}
33

else if( window.XMLHttpRequest )
34

{
35

xmlhttp_request = new XMLHttpRequest();
36

if (xmlhttp_request.overrideMimeType)
37

{
38

xmlhttp_request.overrideMimeType('text/xml');
39

}
40

}
41

}
42

catch(e)
43

{
44

xmlhttp_request = false;
45

alert("对不起您的浏览器版本太低，请更新后使用。");
46

}
47

return xmlhttp_request ;
49

}
50

var req;
52

function sendRequest(url, Method, HttpMethod, params) //发送请求
53

{
54

url += "/" + Method;
55

if (!HttpMethod)
56

{
57

HttpMethod = "POST";
58

}
59

req = getXMLRequester(); //建立组件
60

if (req)
61

{
62

req.onreadystatechange = processReqChange;//调用[设定]进程监视函数
63

req.open(HttpMethod, url, true);
64

req.setRequestHeader("Host", "localhost");//发布时要更正 Host
65

req.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");//一定要加上charset,否则有乱码
66

req.setRequestHeader("Content-Length",params.length);
67

req.send(params); //发送数据参数
68

}
69

}
70

function sendRequest2(url, Method, HttpMethod,params) //发送请求
72

{
73

url += "/" + Method;
74

if (!HttpMethod)
75

{
76

HttpMethod = "POST";
77

}
78

req = getXMLRequester(); //建立组件
79

if (req)
80

{
81

req.onreadystatechange = processReqChange2;//调用[设定]进程监视函数
82

req.open(HttpMethod, url, false);
83

req.setRequestHeader("Host", "localhost");//发布时要更正 Host
84

req.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");//一定要加上charset,否则有乱码
85

req.setRequestHeader("Content-Length",params.length);
86

req.send(params); //发送数据参数
87

}
88

}
89

function sendRequest_Item(url, Method, HttpMethod,params) //发送请求
91

{
92

url += "/" + Method;
93

if (!HttpMethod)
94

{
95

HttpMethod = "GET";
96

}
97

req = getXMLRequester(); //建立组件
98

if (req)
99

{
100

req.onreadystatechange = processReqChange_Item;//调用[设定]进程监视函数
101

req.open(HttpMethod, url, false);
102

req.setRequestHeader("Host", "localhost");//发布时要更正 Host
103

req.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");//一定要加上charset,否则有乱码
104

req.setRequestHeader("Content-Length",params.length);
105

req.send(params); //发送数据参数
106

}
107

}
108

109

110

function processReqChange()
111

{
112

// 监视数据传递。
113

if (req.readyState == 4)
114

{
115

if (req.status == 200)
116

{
117

xmlResponse(); // connect OK 执行输出函数out()
118

}
119

else
120

{ //抛出错误
121

alert("无法正常连接服务器，错误：\n" +
122

req.statusText+":"+req.status);
123

}
124

}
125

}
126

127

function processReqChange2()
128

{
129

// 监视数据传递。
130

if (req.readyState == 4)
131

{
132

if (req.status == 200)
133

{
134

xmlResponse2(); // connect OK 执行输出函数out()
135

}
136

else
137

{ //抛出错误
138

alert("无法正常连接服务器，错误：\n" +
139

req.statusText+":"+req.status);
140

}
141

}
142

}
143

144

function processReqChange_Item()
145

{
146

// 监视数据传递。
147

if (req.readyState == 4)
148

{
149

if (req.status == 200)
150

{
151

xmlResponse_Item(); // connect OK 执行输出函数out()
152

}
153

else
154

{ //抛出错误
155

alert("无法正常连接服务器，错误：\n" +
156

req.statusText+":"+req.status);
157

}
158

}
159

}
160

161

function xmlResponse2() //输出函数【Success】
162

{
163

var xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
164

xmlDoc.async=false;
165

xmlDoc.validateOnParse=false;
166

xmlDoc.loadXML(req.responseText);
167

168

document.getElementById("comment").innerHTML=xmlDoc.selectSingleNode("string").text;
169

}
170

171

function xmlResponse_Item() //输出函数【Success】
172

{
173

var xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
174

xmlDoc.async=false;
175

xmlDoc.validateOnParse=false;
176

xmlDoc.loadXML(html(req.responseText));//从服务器端传回的数据 HTML元素被Encode 所以在这用 html 函数反编码
177

178

var lbItem = document.getElementById("lbItem");
179

lbItem.options.length=0;//清空列表框
180

181

var options=xmlDoc.getElementsByTagName("Item");
182

183

for (var i = 0;i<options.length;i++)
184

{
185

lbItem.add(new Option(options[i].text,options[i].getAttribute("value")));
186

}
187

188

//http://community.csdn.net/Expert/topic/5581/5581510.xml?temp=.740719
189

//http://www.blogjava.net/crazycy/archive/2007/08/29/59579.html
190

//http://www.xqblog.net/sitemap.aspx
191

}
192

193

//
194

function html(str)
195

{
196

var reg=new RegExp("<","g"); //创建正则RegExp对象
197

var newstr=str.replace(reg,"<");
198

var reg2=new RegExp(">","g");
199

newstr=newstr.replace(reg2,">");
200

return newstr;
201

202

}
203

204

function xmlResponse() //输出函数【Success】
205

{
206

document.getElementById("message").innerHTML="感谢您的评论!:)";
207

}
208

209

////=========================================================
210

//Ctrl+Enter发送信息
211

function ctlent(evt)
212

{
213

if(evt.ctrlKey && evt.keyCode == 13)
214

{
215

send();
216

}
217

}
218

//清空信息
219

function clearup()
220

{
221

clear();
222

}
223

function clear()
224

{
225

//清空输入框
226

document.getElementById("cTitle").value = "";
227

document.getElementById("cAuthor").value = "";
228

document.getElementById("cContent").value = "";
229

}
230

//发送消息
231

function send()
232

{
233

var iParentID=document.getElementById("iParentID").value;
234

var cAuthor=document.getElementById("cAuthor").value;
235

var cTitle=document.getElementById("cTitle").value;
236

var cEmail="";//Email暂时为空
237

var cSourceIP=document.getElementById("cIP").value;
238

var cContent=document.getElementById("cContent").value;
239

240

//验证评论信息
241

if(cTitle=="")
242

{
243

alert("请填写标题");
244

document.getElementById("cTitle").focus();
245

return false;
246

}
247

if(cAuthor=="")
248

{
249

alert("请留下大名");
250

document.getElementById("cAuthor").focus();
251

return false;
252

}
253

if(cContent=="")
254

{
255

alert("请填写评论内容");
256

document.getElementById("cContent").focus();
257

return false;
258

}
259

260

261

//调用WEBService方法发送消息
262

sendRequest('http://localhost:83/WebService/Module_Comment.asmx','Insert','POST','iParentID='+iParentID+'&cAuthor='+cAuthor+'&cTitle='+cTitle+'&cEmail='+cEmail+'&cSourceIP='+cSourceIP+'&cContent='+cContent+'');
263

264

document.getElementById("message").innerHTML="感谢您的评论!:)";
265

//取出评论内容
266

requestComment(iParentID);
267

268

//清空输入框
269

clear();
270

}
271

272

//取出评论信息
273

function requestComment(iParentID)
274

{
275

sendRequest2('http://localhost:83/WebService/Module_Comment.asmx','GetModule_CommentByParentID','Post','iParentID='+iParentID+'');
276

}

用的时候要注意一下编码问题，还有调用WEB服务的host也要做适当修改

2、取出评论列表：
用requestComment调用JS文件里的方法，通过WEB服务取出评论列表，详细实现都在代码里。OK，就这些，希望多提宝贵意见，谢谢！

posted on 2007-09-24 16:13 xpengfee 阅读(1385) 评论(5) 收藏举报