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

本例充分展現(xiàn)了利用JavaScript控制HTML DOM以及利用XML http 傳遞數(shù)據(jù)，利用JSP操作文本的效果。

1，JavaScript 用來控制頁面內(nèi)容的現(xiàn)實與增刪效果;
2，JSP作為后臺，對文本進行讀取、寫入、更新等操作;
3，文本格式是用來存儲數(shù)據(jù)的，數(shù)據(jù)編碼UTF-8;4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下調(diào)試通過，同時兼容Firefox 1.0,Opera 8.0,IE6。

本例子的優(yōu)點:

1，實時創(chuàng)建html對象，所見即所得的頁面增刪操作。顯示速度加快，增加用戶體驗。
2，XML http傳遞數(shù)據(jù)是只是一個id或一個表單值,節(jié)省帶寬。
3，本例子適合采用XML http方式,所以這個效果實用性強，可是JS/JSP代碼都很簡單。
4，有很多東西可以在其他項目中共用,并且解決了操作文本關(guān)于中文字符編碼的問題。 (本例子在中文操作系統(tǒng)運行，所以選擇了GBK編碼，如果OS是英文的則需要另外處理，比如改編碼為UTF-8，或者根據(jù)需要另外轉(zhuǎn)換編碼。)
5，有拖拽以及展開關(guān)閉的效果，用cookie記錄了位置以及打開關(guān)閉狀態(tài)，可以在某個項目里用。
6，有豐富的注釋,適合初學(xué)者一起探討。

缺點：

1，維護調(diào)試麻煩,為了這個效果是否值得這樣做？如果采用普通的方式，嵌入一個iframe進來，會不會也可以。
2，代碼沒有更多地優(yōu)化、簡寫,有些地方冗余。
3，交互設(shè)計方面沒有好好地做，這里主要表示的是技術(shù)實現(xiàn)和交流。

源文件下載：checkbox.rar

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]

由于時間有限，難免有很多問題，希望大家提出來。其實本例做的并不怎么好，拿出來希望眾位多多入指點，同時也希望對同樣是初學(xué)者的朋友來說有幫助，也希望大家一起交流進步，謝謝！:p

另外之前做的有關(guān)Ajax的東東，順便請供參考，謝謝！

PHP+Ajax 發(fā)帖程序?qū)嵗?　　
源碼下載:　post_ajax.rar

JSP登錄證碼無刷新提示:　　
源碼下載:　imgValidate.rar

代碼沒有整理，優(yōu)化，所以本例子只供大家交流參考用，希望可以通過這種方式得到各位的幫助，謝謝！

經(jīng)典論壇討論：
?tid=2673442

您可能感興趣的文章: