生成html页如何更新文章浏览次数

利用强大的jquery的AJAX功能,可以很方便的实现,由于本人js水平有限,研究了2天才搞出来,期间主要参考了关于jquery的中文手册等资料,所以感觉掌握这些基本知识后做起东西来就随心所欲了,好了进入正题!
关于ASP.NET动转静技术这里就不讨论了,网上有很多资料。现在是生成静态页后如何更新文章浏览次数
这里需要掌握jquery ajax相关知识,

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。

$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。

jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。

这里我采用$get()方式,简单的,如果要实现错误处理需要采用高级的$ajax方式;
首先在页面要加载jquery.js(可到官网下载,最新版本)
<script language="javascript" type="text/javascript" src="../js/jquery.js"></script>

另外我生成的每篇文章是以id编号来命名的 要知道浏览的是那篇文章只需要传递文章编号就可以了
实际我们需要一个函数来处理
<script language="javascript" type="text/javascript" src="../js/GetData.js?id=12"></script>
我们通过这样的方式把文章编号传进去 做模板的时候这样也很方便替换。现在是js函数怎么接受这个id=12的参数呢?
参考网上,找到一个非常好的方法,这里我就直接贴源码了哈!

 1//读取文章浏览次数
 2var getArgs=(
 3function(){
 4    var sc=document.getElementsByTagName('script');
 5    var paramsArr=sc[sc.length-1].src.split('?')[1].split('&');
 6    var args={},argsStr=[],param,t,name,value;
 7    for(var ii=0,len=paramsArr.length;ii<len;ii++){
 8            param=paramsArr[ii].split('=');
 9            name=param[0],value=param[1];
10            if(typeof args[name]=="undefined")//参数尚不存在
11                args[name]=value;
12            }
else if(typeof args[name]=="string")//参数已经存在则保存为数组
13                args[name]=[args[name]]
14                args[name].push(value);
15            }
else{  //已经是数组的
16                args[name].push(value);
17            }

18    }

19    /*在实际应用中下面的showArg和args.toString可以删掉,这里只是为了测试函数getArgs返回的内容*/
20   // var showArg=function(x){   //转换不同数据的显示方式
21     //  if(typeof(x)=="string"&&!/\d+/.test(x)) return "'"+x+"'";   //字符串
22    //   if(x instanceof Array) return "["+x+"]" //数组
23      //  return x;   //数字
24    //}
25    
26   // 组装成json格式
27 //  args.toString=function(){
28    //    for(var ii in args) argsStr.push(ii+':'+showArg(args[ii]));
29   //     return '{'+argsStr.join(',')+'}';
30   // }  
31    return function(){return args;} //以json格式返回获取的所有参数   
32}

33)();
34
35//alert(getArgs());
36//alert("id:"+getArgs()["id"]);
37
38var fid=getArgs()["id"];
39$( function GetHits(){$.get("../WebControls/BackHandler.ashx"{id: fid},function(data){
40 var temparr=data;
41 temparr=temparr.split(",");
42 $("#hits").html(temparr[0]);
43 $("#renum").html("评论数:"+temparr[1]);
44 $("#load").hide();}
); }
)
好了,至于以get方式传递参数到后台处理就很简单 以上代码已经包含,我就不多解释了。

下面是后台处理程序 ashx
 1<%@ WebHandler Language="C#" Class="BackHandler" %>
 2
 3using System;
 4using System.Data;
 5using System.Web;
 6using System.Collections;
 7using System.Web.Services;
 8using System.Web.Services.Protocols;
 9using System.Configuration;
10using System.Text;
11using System.Xml;
12using Common;
13using System.Data.SqlClient;
14
15public class BackHandler : IHttpHandler {
16    
17    public void ProcessRequest (HttpContext context) {
18        context.Response.ContentType = "text/plain";
19        //不让浏览器缓存
20        context.Response.Buffer = true;
21        context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
22        context.Response.AddHeader("pragma""no-cache");
23        context.Response.AddHeader("cache-control""");
24        context.Response.CacheControl = "no-cache";
25
26        string result = "";
27        if (context.Request.Params["id"!= null)
28        {
29            int id = Convert.ToInt32(context.Request.Params["id"]);
30              SqlParameter[] sqlParameter =
31            new SqlParameter("@ArticleId",SqlDbType.Int,4)
32        }
;
33            sqlParameter[0].Value = id;
34
35            SqlDataReader reader = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure, "News_GetHits", sqlParameter);
36            if (reader.Read())
37            {
38               result = reader["Hits"].ToString()+",";
39               result += reader["RemarkNum"].ToString();
40            }

41           
42            context.Response.Write(result);
43
44        }

45      
46        
47    }

48 
49    
50    public bool IsReusable {
51        get {
52            return false;
53        }

54    }

55
56}

  另外数据库存储过程代码 News_GetHits

CREATE PROCEDURE News_GetHits
@ArticleId int
AS
update Article set Hits=Hits+1 where ArticleId=@ArticleId
select ArticleId,Hits,RemarkNum from Article where ArticleId=@ArticleId
GO
完工
posted @ 2008-07-03 03:05  Mating_luo  阅读(2425)  评论(1)    收藏  举报