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

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

好了，下面正式开始：

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

1<!--相关评论-->
2                                                                        <script src="/Module_News/Comment.aspx?id=11&title=科技奥运5个“第一次”" type="text/javascript"></script>
3                                                                        <script language="javascript" type="text/javascript">requestComment(11);</script>
4                                                                        <!--相关评论-->

 1if (!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
18                //评论输入框
19                str += "document.write(\"<table border='0' style='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='25%;'>标题</td>" +
22                                "<td style='75%;'><input type='hidden' id='iParentID' value='" + iParentID + "' /><input type='hidden' id='cIP' value='" + IP + "' /><input type='text' id='cTitle' value='" + cTitle + "' style='90%;border:1px solid #979696; '/></td>" +
23                                "</tr><tr><td style='25%;'>姓名</td>" +
24                                "<td style='75%;'><input type='text' id='cAuthor' style='90%;border:1px solid #979696;'/></td>" +
25                                "</tr><tr><td style='25%; vertical-align:top;'>内容</td>" +
26                                "<td style='75%;'><input type='text' id='cContent' onkeydown='ctlent(event)' style='90%;height:100px;border:1px solid #979696;'/></td>" +
27                                "</tr><tr><td style='25%;'></td><td style='75%;' align='center'>" +
28                                "<input type='button' value='清空' onclick='clearup();' style='50px;border:1px solid #979696; padding-top:3px; background-color:#E8E8E8'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
29                                "<input type='button' value='发表评论' onclick='send();' style='70px;border:1px solid #979696; padding-top:3px; background-color:#E8E8E8' />&nbsp;&nbsp;" +
30                                "</td></tr></table><br/><div id='message' style='FONT: 12px/150% 宋体 Tahoma ;color:#E00404;'></div>\");";
31
32                //输出JS脚本
33                str += "document.write(\"<script src='../../../JavaScript/myAjax.js' type='text/javascript'></script>\");";
34
35                //评论显示样式
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; auto;}" +
39                        ".mo_title_r1,.mo_title_r2{ display:block; float:right; height:12px; 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
向数据库添加数据  我也表述不清，大家还是看代码吧：

  1/**//*
  2    Title: Ajax 无刷新增加新闻评论【Ajax调用WebService】
  3    Author:xpengfee        DateTime:2007-07-27 9:40
  4*/
  5function 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                        
 25                        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    
 48    return xmlhttp_request ;
 49}
 50
 51var req;
 52function 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
 71function 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
 90function 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
110function 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
127function 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
144function 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
161function 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
171function 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//
194function html(str)
195{
196    var reg=new RegExp("&lt;","g"); //创建正则RegExp对象
197    var newstr=str.replace(reg,"<"); 
198    var reg2=new RegExp("&gt;","g");
199    newstr=newstr.replace(reg2,">");
200    return newstr;
201
202}
203
204function xmlResponse() //输出函数【Success】
205{
206    document.getElementById("message").innerHTML="感谢您的评论!:)";
207}
208
209/**/////=========================================================
210//Ctrl+Enter发送信息
211function ctlent(evt)
212{
213    if(evt.ctrlKey && evt.keyCode == 13)
214    {
215        send();
216    }
217}
218//清空信息
219function clearup()
220{
221    clear();
222}
223function clear()
224{
225    //清空输入框
226    document.getElementById("cTitle").value = "";
227    document.getElementById("cAuthor").value = "";
228    document.getElementById("cContent").value = "";
229}
230//发送消息
231function 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//取出评论信息
273function 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，就这些，希望多提宝贵意见，谢谢！