更新文章浏览次数

利用强大的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的参数呢?
参考网上,找到一个非常好的方法,这里我就直接贴源码了哈!
//读取文章浏览次数

 

var getArgs=( function(){ var sc=document.getElementsByTagName('script'); var paramsArr=sc[sc.length-1].src.split('?')[1].split('&'); var args={},argsStr=[],param,t,name,value; for(var ii=0,len=paramsArr.length;ii<len;ii++){ param=paramsArr[ii].split('='); name=param[0],value=param[1]; if(typeof args[name]=="undefined"){ //参数尚不存在 args[name]=value; }else if(typeof args[name]=="string"){ //参数已经存在则保存为数组 args[name]=[args[name]] args[name].push(value); }else{ //已经是数组的 args[name].push(value); } } /**//*在实际应用中下面的showArg和 args.toString可以删掉,这里只是为了测试函数getArgs返回的内容*/ // var showArg=function(x){ //转换不同数据的显示方式 // if(typeof(x)=="string"&&!//d+ /.test(x)) return "'"+x+"'"; //字符串 // if(x instanceof Array) return "["+x+"]" //数组 // return x; //数字 //} // 组装成json格式 // args.toString=function(){ // for(var ii in args) argsStr.push(ii+':'+showArg(args[ii])); // return '{'+argsStr.join(',')+'}'; // } return function(){return args;} //以json格式返回获取的所有参数 } )(); //alert(getArgs()); //alert("id:"+getArgs()["id"]); var fid=getArgs()["id"]; $( function GetHits(){$.get("../WebControls/BackHandler.ashx", {id: fid},function(data){ var temparr=data; temparr=temparr.split(","); $("#hits").html(temparr[0]); $("#renum").html("评论数:"+temparr[1]); $("#load").hide();}); })

好了,至于以get方式传递参数到后台处理就很简单 以上代码已经包含,我就不多解释了。

下面是后台处理程序 ashx

<%@ WebHandler Language="C#" Class="BackHandler" %> using System; using System.Data; using System.Web; using System.Collections; using System.Web.Services; using System.Web.Services.Protocols; using System.Configuration; using System.Text; using System.Xml; using Common; using System.Data.SqlClient; public class BackHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; //不让浏览器缓存 context.Response.Buffer = true; context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1); context.Response.AddHeader("pragma", "no-cache"); context.Response.AddHeader("cache-control", ""); context.Response.CacheControl = "no-cache"; string result = ""; if (context.Request.Params["id"] != null) { int id = Convert.ToInt32(context.Request.Params["id"]); SqlParameter[] sqlParameter ={ new SqlParameter("@ArticleId",SqlDbType.Int,4) }; sqlParameter[0].Value = id; SqlDataReader reader = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure, "News_GetHits", sqlParameter); if (reader.Read()) { result = reader["Hits"].ToString()+","; result += reader["RemarkNum"].ToString(); } context.Response.Write(result); } } public bool IsReusable { get { return false; } } } 另外数据库存储过程代码 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 完工

来自:http://www.cnblogs.com/mygood/articles/1234427.html

你可能感兴趣的:(JavaScript,jsonp,jquery,Ajax,function,XMLhttpREquest)