checkbox.jsp

采用JSP + Ajax + 文本来演示多选、全选

<%@ page contentType="text/html;charset=GBK" %>
<%
//set Chinese Char 
//Cody by [e-mail];
//homepage:jiarry.126.com
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset=GBK");
%>
<jsp:include page="inc/head.jsp" flush="true" />
<script src="js/cookie.js"></script>
<script src="js/init.js"></script>
<!--//拖拽css start-->
<style>
.drag{position:absolute;width:600px; background-color:#f1f1f1;
	/*filter:alpha(opacity=80);
    -moz-opacity:0.80;
    opacity:0.80;*/
filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
	}
.da{width:100%;background-color:gray;cursor:move;font-size:14px;vertical-align:middle;line-height:30px}
.max_min_btn{float:right;color:red;cursor:pointer;font-size:9pt;width:50px;line-height:30px;text-align:center;}
#list{border-top:2px ridge #9A9898;border-left:2px ridge #9A9898;border-bottom:1px solid #D4D0C8;border-right:1px solid #D4D0C8;background:white;width:578px;height:350px;margin:10px;overflow:auto}
.shadowBottom{margin-left:6px;height:5px;background:gray;font-size:0px;line-height:0px;filter:alpha(opacity=55);-moz-opacity:0.55;opacity:0.55;}
</style>
<pre>
本例是采用JSP + Ajax + 文本来演示多选、全选，添加、删除、更新checkbox多选框的效果。
本例充分展现了利用JavaScript控制HTML DOM以及利用XML http 传递数据，利用JSP操作文本的效果。
1，JavaScript 用来控制页面内容的现实与增删效果;
2，JSP作为后台，对文本进行读取、写入、更新等操作;
3，文本格式是用来存储数据的，数据编码UTF-8;<br>4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下调试通过，同时兼容Firefox 1.0,Opera 8.0,IE6。


本例子的优点:
1,实时创建html对象，所见即所得的页面增删操作。显示速度加快，增加用户体验。
2,XML http传递数据是只是一个id或一个表单值,节省带宽。
3,本例子适合采用XML http方式,所以这个效果实用性强，可是JS/JSP代码都很简单。
4,有很多东西可以在其他项目中共用,并且解决了操作文本关于中文字符编码的问题。
  &nbsp;&nbsp;(本例子在中文操作系统运行，所以选择了GBK编码，如果OS是英文的则需要另外处理，比如改编码为UTF-8，或者根据需要另外转换编码。)<br>5,有拖拽以及展开关闭的效果，用cookie记录了位置以及打开关闭状态，可以在某个项目里用。
6,有丰富的注释,适合初学者一起探讨。

缺点：
1,维护调试麻烦,为了这个效果是否值得这样做？如果采用普通的方式，嵌入一个iframe进来，会不会也可以。
2,代码没有更多地优化、简写,有些地方冗余。
3,交互设计方面没有好好地做，这里主要表示的是技术实现和交流。<br><br>在线说明文档 <a href="http://jiarry.blogchina.com/5599587.html">http://jiarry.blogchina.com/5599587.html</a><br>静态页面演示地址：<A href="http://jarryli.googlepages.com/checkbox_test.html">http://jarryli.googlepages.com/checkbox_test.html</A> (详细的说明，随后补充)<BR>源文件下载地址：<A href="http://jarryli.googlepages.com/checkbox.rar">http://jarryli.googlepages.com/checkbox.rar</A>
</pre><br>
另外之前做的<br>
PHP+Ajax 发帖程序实例:<a href="http://jiarry.blogchina.com/5555296.html">http://jiarry.blogchina.com/5555296.html</a>  源码下载:<a href="http://jarryli.googlepages.com/post_ajax.rar">http://jarryli.googlepages.com/post_ajax.rar</a><br>
JSP登录证码无刷新提示:<a href="http://jiarry.blogchina.com/5287654.html">http://jiarry.blogchina.com/5287654.html</a> 源码下载:<a href="http://jarryli.googlepages.com/imgValidate.rar">http://jarryli.googlepages.com/imgValidate.rar</a><br>


<!--//拖拽css end-->
<!--//拖拽-->
<div class="drag" rel="drag" id="siteMainDarg" style="left:10px;top:10px;" onMouseDown="dargit(this,event);">
<div class="da" ><span class="max_min_btn" id="max_min" style="background-color:#333"><font style="font-family:webdings">2</font>CLOSE</span>&nbsp;&nbsp;拖拽区</div>
<div id="sitelistDiv" >
<!--//拖拽--><script>initDrag();//直接在这调用就不会有迟延的感觉</script>
<form name="sitelist" action="action/savedata.jsp" onsubmit="return addSite(this)" style="border:1px groove blue;margin:0;padding:0;border-top:0;">
<div id="tip">&nbsp;</div>
&nbsp;&nbsp;http:// <input type="text" size="30" name="url" onmouseover="this.focus();" >
<input type="submit" name="add" value="添加网址至列表" ><div id="list"></div>
&nbsp;&nbsp;<input type="button" name="check" value="全选" disabled >&nbsp;&nbsp;<input type="button" value="反选" disabled name="recheck">&nbsp;&nbsp;<input type="button" name="remove" disabled value="删除" onclick="del($('list'),this.form)"><br><br>
</form>
<!--//拖拽-->
</div>
<div class="shadowBottom">&nbsp;</div>
</div>
<!--//拖拽-->
<script>
//本例子所有注释均没有删除，若用于正式项目需要对代码进行重新处理。
//格式化并压缩代码和删除注释，等等。
//var cl = new Array();////if use checkbox_array.jsp;
function loaddata(){
//load the checkbox data from jsp;
   function loadcheckbox(){
     var data = this.req.responseText;

     if( data.indexOf("\"$empty$\"")!=-1 ){
		 //如果没有数据,得到反馈为空的话,不向下执行;
		 showTip("没有数据");return;
	 }
      parseTxt(data);//use checkbox_text.jsp;

	 //eval(data); //if use checkbox_array.jsp;
     //parseJS();//parse javascript array;

	//页面加载时初始化按钮
     setStatus($("list"),document.sitelist);
   }


   showTip("数据加载中...");
   var url = "action/checkbox_text.jsp"; // //use this call parseTxt() function; 
   //var url = "action/checkbox_array.jsp"; //use this call parseJS() function; 
   //可以通过直接得到文本(checkbox_text.jsp)和得到js数组(checkbox_array.jsp)来解析数据。
   //直接得到文本则要用js来拆分数据,数据中没有转义字符如"'\回车等,
   //如果含有这些那需要把内容提前转义处理或者输出XML数据(但xml影响效率);
   //如果得到js数组用eval来执行得到的数组的话，那需要在后台输出时将数据处理成js的数组,比如Google的Suggest.;
   var load = new net.ContentLoader( url ,loadcheckbox,null,"GET",null,null);
}

loaddata();

window.onload=function(){
	//loaddata();
      initCheckbox();//初始化selectCheckBox对象;
}
</script>

<!--//拖拽js start,js放在页面下方,cookie放在drag前面-->
<script src="js/drag.js"></script>
<!--//拖拽js end-->
</body>
</html>