论坛 › 原创文章 & 讨论汇总版 › 使用Javascript面向对象的思想编写ASP（二）

jlmqq 发表于 2008-5-22 16:07:05

使用Javascript面向对象的思想编写ASP（二）

上次我使用Javascript将记录集转换成数组，然后逐一输出数据。但是遗留下来一个问题就是如果数据库中的数据很多，那么最好的解决方案还是采取分页方式。注意了此处的分页和传统的记录集分页是有区别的。记住，这里是采用数组分页。下面创建一个分页类。
step 1 创建分页类文件class_data_grid.asp，代码如下：
<%
/*----------------------------------------------*/
//分页类data_grid
//参数 : pagesize - 每页显示最多记录数 rs_arr - 记录集数组
/*----------------------------------------------*/
function data_grid(pagesize,rs_arr) {
  //公共属性
  this.pagesize = pagesize;
  this.rs_arr = rs_arr;
  this.start_pagecount = "";
  this.end_pagecount = "";
  //私有属性
  var count = this.rs_arr.length;
  var page = 0;
  var flag = "";

  /*----------------------------------------------*/
  //公共方法:get_page()
  //参数 : 无
  //作用 : 得到当前页并设置当前页
  //返回值:无
  /*----------------------------------------------*/
  this.get_page = function() {  
   if(is_empty(Request.QueryString("page")) || isNaN(Request.QueryString("page")) || Request.QueryString("page") == "" || parseInt(Request.QueryString("page"))<0)
    page = 0;
   else if(parseInt(Request.QueryString("page")) >= myint(count/this.pagesize))
    page = myint(count/this.pagesize -1);
   else
    page = Request.QueryString("page");
  }
  /*----------------------------------------------*/
  //私有方法:is_empty()
  //参数 : 无
  //作用 : 判断是否捕获到参数
  //返回值:无
  /*----------------------------------------------*/
  var is_empty = function(obj) {
      return !(String(obj) != "" && String(obj) != "undefined");
    }
  /*----------------------------------------------*/
  //私有方法:myint()
  //参数 : 数值
  //作用 : 得到整数
  //返回值:整数
  /*----------------------------------------------*/
  var myint = function (avalue) {
   var rvalue;
   if (avalue > parseInt(avalue))
    rvalue = parseInt(avalue) + 1;
   else
    rvalue = parseInt(avalue);
   return rvalue;
  }
  
  /*----------------------------------------------*/
  //公共方法:set_pagecount()
  //参数:pagesize - 每页显示最多记录数
  //作用:设置每页显示多少条记录
  //flag = 1   是最后一页
  //flag = 2   是第一页
  //flag = 3    既是第一页,又是最后一页     
  //返回值:此页循环上限
  /*----------------------------------------------*/
  this.set_pagecount = function() {
   var n,s;
   this.start_pagecount = parseInt(page) * this.pagesize;
   //当到了这页的时候还剩余多少条记录
   s = count - parseInt(page) * this.pagesize;
   //如何循环?
   if (parseInt(page) == 0 && s <= this.pagesize) {  // 既是第一页,又是最后一页(也就是只有一页)
    flag = 3;
    n = count;
   } else if(parseInt(page) != 0 && s <= this.pagesize) {   //最后一页
    flag = 1;
    n = count;
   } else { //第一页
    flag = 2;
    n = (parseInt(page)+1) * this.pagesize;
   }
   this.end_pagecount =  n;
  }
/*----------------------------------------------*/
//公共方法:show_pagelink()
//参数 : page_name - 页面名称 para - 参数
//作用 : 显示分页
//返回值:无
/*----------------------------------------------*/
this.show_pagelink = function(page_name,para) {
  if (typeof(para) == "undefined") para = "";
  Response.Write ("<ul>");
  Response.Write("<li><font color=\"red\">" + (parseInt(page)+1) + "</font>/" + myint(count/this.pagesize) + " ");
  Response.Write ("每页" + this.pagesize + "条 ");
  Response.Write ("共<font color=\"red\">" + count + "</font>条记录&nbsp</li>");
  //首页
  if (flag != 3 && parseInt(page) != 0)
   Response.Write ("<li><a href=\"" +page_name + "?page=" + 0 + para + "\">首 页</a></li>");
  else  
   Response.Write ("<li class=\"cur\">首 页</li>");
  //上一页
  if (parseInt(page)>0)
   Response.Write ("<li><a href=\"" + page_name + "?page=" + (parseInt(page)-1) + para + "\">上一页</a></li>");
  else
   Response.Write ("<li class=\"cur\">上一页</li>");
  /*var begin_page = 0;
  var end_page = myint(count/this.pagesize);
  if(end_page >= 8) {
   if(parseInt(page) >= 5) {
    begin_page = parseInt(page) - 4;
    if (parseInt(page) <= (end_page - 4)) {
     end_page = parseInt(page) + 4;
    }else{
     end_page = end_page;
     begin_page = end_page - 4;
    }
   }else{
    begin_page = 0;
    end_page = 8;
   }
  }
  
  var str_page = "";
  for(var i=begin_page;i<end_page;i++) {
   if(i == parseInt(page)) {
    str_page += " <li class=\"cur\">[";
    str_page += (i+1);
    str_page += "]</li> ";
   }else{
    str_page += " <a href=\"" + page_name + "?page="
    str_page += i;
    str_page += para;
    str_page += "\" class=\"page\">[";
    str_page += (i+1);
    str_page += "]</a>";
   }
  }
  Response.Write(str_page);*/
  
  //下一页
  if (flag ==2)
   Response.Write ("<li><a href=' " + page_name + "?page=" + (parseInt(page)+1) + para + " ' >下一页</a></li>");
  else
   Response.Write ("<li class=\"cur\">下一页</li>");
   
  //末页
  if (flag != 1 && flag != 3)
   Response.Write ("<li><a href=\"" + page_name + "?page=" + myint((count+1)/this.pagesize -1) +para + "\">末 页</a></li>");
  else
   Response.Write ("<li class=\"cur\">末 页</li>");
  
  var str_form = "";
  str_form += "<li><form method=\"post\" onsubmit=\"document.location = ' ";
  str_form += page_name;
  str_form += "?page='+(page.value-1)+'";
  str_form += para;
  str_form += "';return false;\">";
  str_form += "跳转到 <input type=\"text\" name=\"page\" size=\"2\" value=\"";
  str_form += (parseInt(page)+1);
  str_form += "\" /> 页</form></li>";
  Response.Write(str_form);
  
  Response.Write ("</ul>");
}
}
%>
以上都有注释，相信有一定基础的朋友都能够读懂代码。

step 2 有了分页类，使用起来就简单多了。修改上次的view.asp文件，代码如下：
<!--#Include file="class_database.asp"-->
<!--#Include file="class_data_grid.asp"-->
<%
var database_obj = new database();
//数据库连接
database_obj.connection();
str_sql = "Select CourseID,CourseName,UpdateTime,CommDateTime,Comm,Hit From Course Order by UpdateTime Desc";
var tmp_arr = database_obj.query(str_sql);
var data_grid_obj = new data_grid(10,tmp_arr);
data_grid_obj.get_page();
data_grid_obj.set_pagecount();
for(var y=data_grid_obj.start_pagecount;y<data_grid_obj.end_pagecount;y++) {
    Response.Write("CourseID: "+tmp_arr+", CourseName: "+tmp_arr+ ",UpdateTime: "+tmp_arr+"<br />");
}
para = "&keyword=aaa";
data_grid_obj.show_pagelink("view.asp",para);
database_obj.close_database();
%>
OK!全部完成了。这样页面代码逻辑思路清晰，也不会有其他乱七八糟的冗余代码了。
以上就是使用Javascript服务器端脚本来实现数据库操作，希望对大家有所帮助，由于时间仓促，可能会有地方还需改进。在此基础上自己还可以加一些其他的方法，比如数据的增、删、改等等，操作数据库同样很方便。本例采用的思路是面向对象，这样也符合代码规范，其实大家如果了解PHP的面向对象的编程思路，应该一看就知道它和PHP的面向对象编程思路实际上是完全一致的。

收藏夹 发表于 2008-5-27 22:46:11

很好~

:victory:

datathink 发表于 2008-7-7 15:50:56

据说这样可以提高输出效率，学习了~~

昙雾伊始 发表于 2008-7-12 15:28:27

但是JS好像不可以对服务器的数据库进行操作
这样的输出只能是很表面的输出
只能输出一个静态的是吗？

qq124543565 发表于 2008-7-16 06:10:49

:Q  每次搞起来，后台用 Dim 前台用 Var 郁闷~~ 尝试着都var吧。

[ 本帖最后由 qq124543565 于 2008-7-16 06:27 编辑 ]

nyynk 发表于 2008-7-16 09:42:42

建议楼主多多发这方面的文章,小弟正在学习这方便的知识...

建议楼主多多发这方面的文章,小弟正在学习这方便的知识...

多多的发啊.我会天天关注的....

qj009 发表于 2008-7-17 03:50:22

真深奥啊
郁闷:L

jlmqq 发表于 2008-7-20 11:43:03

呵呵，其实我和大家都是不断的在摸索，研究，希望以后共同交流心得体会:lol

jlmqq 发表于 2009-4-16 10:03:37

回复 #4 昙雾伊始 的帖子

当然支持数据库了，JS也可以用来写后台呀。

syt0529 发表于 2009-8-12 17:43:46

目前我也对js实现asp框架感兴趣，不知道怎么联系楼主？

无殇 发表于 2009-8-18 22:03:25

怎么现在大家都对这方面这么感兴趣啊！！！呵呵。。我有一套自己用纯JS写的ASP后台，我自己写网站也是用纯JS的！
http://www.by-soft.net
还是习惯用JS的语法风格，有兴趣可以交流一下！

收藏夹 发表于 2009-9-7 15:31:34

原帖由 无殇 于 2009-8-18 22:03 发表 http://bbs.51js.com/images/common/back.gif
怎么现在大家都对这方面这么感兴趣啊！！！呵呵。。我有一套自己用纯JS写的ASP后台，我自己写网站也是用纯JS的！
http://www.by-soft.net
还是习惯用JS的语法风格，有兴趣可以交流一下！


开源吗？ 我只是学习一下纯JS写的ASP是咋样的.

:lol :lol

shiny 发表于 2009-9-27 03:12:27

一直用VB写，当时对JS写ASP比较感兴趣，可惜没学习材料
现在转PHP已久。

查看完整版本: 使用Javascript面向对象的思想编写ASP（二）