JSP+Ajax 添加、刪除多選框

本例是採用JSP + Ajax + 文本來示範多選、全選，添加、刪除、更新checkbox多選框的效果。

本例充分展現了利用JavaScript控制HTML DOM以及利用XML http 傳遞資料，利用JSP操作文本的效果。

1，JavaScript 用來控制頁面內容的現實與增刪效果;
2，JSP作為後台，對文本進行讀取、寫入、更新等操作;
3，文字格式設定是用來儲存資料的，資料編碼UTF-8;4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下調試通過，同時相容Firefox 1.0,Opera 8.0,IE6。

本例子的優點:

1，即時建立html對象，所見即所得 (WYSIWYG)的頁面增刪操作。顯示速度加快，增加使用者體驗。
2，XML http傳遞資料是只是一個id或一個表單值,節省頻寬。
3，本例子適合採用XML http方式,所以這個效果實用性強，可是JS/JSP代碼都很簡單。
4，有很多東西可以在其他項目中共用,並且解決了操作文本關於中文字元編碼的問題。 (本例子在中文作業系統運行，所以選擇了GBK編碼，如果OS是英文的則需要另外處理，比如改編碼為UTF-8，或者根據需要另外轉換編碼。)
5，有拖拽以及展開關閉的效果，用cookie記錄了位置以及開啟關閉狀態，可以在某個項目裡用。
6，有豐富的注釋,適合初學者一起探討。

缺點：

1，維護調試麻煩,為了這個效果是否值得這樣做？如果採用普通的方式，嵌入一個iframe進來，會不會也可以。
2，代碼沒有更多地最佳化、簡寫,有些地方冗餘。
3，互動設計方面沒有好好地做，這裡主要表示的是技術實現和交流。

源檔案下載：checkbox.rar

<meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><br /><style> .drag{position:absolute;width:600px; background-color:#f1f1f1; 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;} </p></style><pre> 本例是採用JSP + Ajax + 文本來示範多選、全選，添加、刪除、更新checkbox多選框的效果。 本例充分展現了利用JavaScript控制HTML DOM以及利用XML http 傳遞資料，利用JSP操作文本的效果。 1，JavaScript 用來控制頁面內容的現實與增刪效果; 2，JSP作為後台，對文本進行讀取、寫入、更新等操作; 3，文字格式設定是用來儲存資料的，資料編碼UTF-8;4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下調試通過，同時相容Firefox 1.0,Opera 8.0,IE6。 線上說明文檔 http://jiarry.blogchina.com/5599587.html靜態頁面示範地址：http://jarryli.googlepages.com/checkbox_test.html (詳細的說明，隨後補充)源檔案：http://jarryli.googlepages.com/checkbox.rar 另外之前做的 PHP+Ajax 發帖程式執行個體:http://jiarry.blogchina.com/5555296.html 源碼下載:http://jarryli.googlepages.com/post_ajax.rar JSP登入證碼無重新整理提示:http://jiarry.blogchina.com/5287654.html 源碼下載:http://jarryli.googlepages.com/imgValidate.rar 2CLOSE 拖拽區 Cody by JarryLi@gmail.com; CopyRight?Jarry,All right reserved! 本例僅供個人蔘考，引用請保留著作權資訊。謝謝！ homepage:jiarry.126.com Blog:http://jiarry.blogchina.com </pre><p>