静态页面使用ajax刷新页面访问量，通过easyui实现

网站要实现一个访问量刷新的功能。本来应该是很容易的一个小小功能，但是如果页面被静态化为html页面时以往的动态刷新访问量的方法就无法实现。如何才能实现在静态页面中增加并获取访问量数据呢？想到了一种解决方案——通过ajax异步请求不刷新页面，实现动态的从数据库获取并更新访问量数据。当然，如果有其他好的解决方案也请大家贴出来分享。下面来看看我的解决方案的代码实现。

两点说明

1.在开始编写程序之前先引入easyui的JQuery库——jquery.easyuiform.js

2.由于在测试时出现了页面刷新时存放访问量的<sapn></span>标签数据丢失问题，为了解决这个问题自己琢磨出一个解决方案是利用cookie来存放访问量数据，然后从cookie中获取数据再赋值到<span></span>中，同时也利用cookie解决了一个限时刷新访问量的问题即在一定时间段内刷新页面不会反复刷新访问量，当然这不是精确的访问量统计，只是能够减轻频繁读取数据给服务器带来的压力。通过JQuery操作cookie需要引入一个插件——jquery.cookie.js。

解决方案原理

页面通过ajax发送请求到handle.ashx一般处理程序，处理程序判断请求是否由页面发出并获取参数，然后初始化全局控制变量和起到控制和标识作用的变量；传递参数和SQL语句给后台方法更新数据库中访问量数据。获取访问量数据原理同理，只是SQL语句和调用的取数据的后台方法不同罢了。

静态页面ajax代码

$(document).ready(function(){      //页面加载完毕运行JQuery代码
           var uid = $("#UId").val();
           if(!jQuery.cookie(uid)){   //如果cookie不存在，则创建cookie，并增加访问量。
               UpdatePageView();
               PageViewCookie(uid);
               $("#PageView").html(jQuery.cookie("ViewCount"));
           }
           else{        //当在限制时间段内时，从cookie获取存放的访问量数据
               $("#PageView").html(jQuery.cookie("ViewCount"));
           }

       });

       function UpdatePageView(){       //更新访问量
           var uid = $("#UId").val();

           $("#PageViewForm").form(
               "submit",
               {
                   url: '/comments/HandleComments.ashx?action=update',
                   success: function (data) {
                       jsondata = eval('(' + data + ')');
                       if (jsondata.state == "success")
                       {
                           GetPageView();
                       }
                       else {
                           alert(jsondata.message);
                       }
                   }
               });
       }

       function GetPageView()
       {       //获取访问量
           var uid = $("#UId").val();
           $("#PageViewForm").form(
               "submit",
               {
                   url: '/comments/HandleComments.ashx?action=getartclick',
                   success: function (data) {
                       jsondata = eval('(' + data + ')');
                       if (jsondata.state == "success")
                       {
                           $("#PageView").html(jsondata.message);
                           var cookieName="ViewCount";

                           jQuery.cookie(cookieName,jsondata.message);       //创建存储访问量的cookie
                       }
                       else
                           {
                           alert(jsondata.message);
                       }
                   }
               });
       }

       function PageViewCookie(cookieName){       //生成存放访问时间的cookie
           var date = new Date();
           date.setTime(date.getTime()+(1*60*1000));
           jQuery.cookie(
               cookieName,
               date.getTime(),
               {expires:date}
           );
       }

静态页面中与ajax相关的html标签代码

<form id="PageViewForm" name="PageViewForm" method="post"> //设置了一个元素为隐藏元素的表单目的是传送获取到用户id
<input type="hidden" id="UId" name="UId" value="108"/>
</form>

处理程序代码

            context.Response.ContentType = "text/plain";
            context.Response.Cache.SetNoStore();
            context.Response.Clear();
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            JsonText.CommonStruct commonStruct = new JsonText.CommonStruct();
            commonStruct.state = "error";
            commonStruct.message = "操作失败";
            string requestAction = Utils.Tostring(context.Request["action"]).ToLower();

//更新访问量
            if (requestAction == "update")
            {
                int uid = Utils.Toint(context.Request.Form["UId"],0);
                string sql = "UVisitedCount=UVisitedCount+1";
                ExecResultData result ;

                    try
                    {
                        result = TbUserArt.UpdateTbUserstr(uid, sql);     //增加点击量
                        if (result.State == true)
                        {
                            commonStruct.state = "success";
                            commonStruct.message = "更新成功";
                        }
                        else if (result.State == false)
                        {
                            commonStruct.state = "error";
                            commonStruct.message = "更新失败";
                        }
                    }
                    catch (Exception ex)
                    {
                        commonStruct.state = "error";
                        commonStruct.message = ex.Message;

                    }
                    context.Response.Write(serializer.Serialize(commonStruct));
                    context.Response.End();
            }
            //更新访问量

            //获取访问量
            if (requestAction == "getartclick")
            {
                int uid = Utils.Toint(context.Request.Form["UId"], 0);
                TbUserArtData result;

                try
                {
                    result = TbUserArt.GetTbUserArtDataByUID(uid);     //获取点击量
                    if (result.UVisitedCount.ToString() != string.Empty)
                    {
                        commonStruct.state = "success";
                        commonStruct.message = result.UVisitedCount.ToString();
                    }
                    else
                    {
                        commonStruct.state = "error";
                        commonStruct.message = "获取失败";
                    }
                }
                catch (Exception ex)
                {
                    commonStruct.state = "error";
                    commonStruct.message = ex.Message;
                }

                context.Response.Write(serializer.Serialize(commonStruct));
                context.Response.End();
            }
            //获取访问量