一波传奇巨星相继退役，科比、邓肯的离去，让如今的NBA赛场少了一份当年的滋味，当另...
再过几年，Apple Watch将会进化到一个什么样的程度呢？
过去十年里，苹果和任天堂，这两家公司的牵连太少，竞争太多，但相似的地方却又异常相...
Apple Watch Nike+，其实可以说得上是一款特别版的Apple Watch Series 2。
苹果在健康软件方面也下了更多的功夫，这种“实质性影响”是否仍不会产生呢？
关于 iPhone 7 或 iPhone 7 Plus 手机的各种问题，最近比较火热的问题则是“不在服务...
这个以测试性质为主的浏览器是苹果在今年3月推出的，在Safari技术预览进行测试的功能...
我们不是业内人士，不知道一部手机的爆炸到底会有多深远的影响。
网络表情的发展也是经过了一段时间的，最近几年最火的莫过于就是emoji表情了。而在本...
此前曾经在GDC（游戏开发者大会）上备受关注的“走心”游戏《癌症似龙》（That Dragon...
在推出了《超级火柴人高尔夫》之后，游戏开发商Noodlecake Studios计划紧接着推出另一...
《剑侠世界》是西山居将《剑侠情缘》IP 投放到移动平台的手游第二作，世界观承袭单机...
《矢量跑酷（Vector）》这部作品的正统续作《适量跑酷2（Vector 2 Premium）》正式登...
在《炉石传说》、《皇室战争》等一批高质量的卡牌新作推出之后，卡牌对战类的游戏作品...
近年来在篮球游戏领域EA公司已经逐渐处于下方，但是在足球游戏领域其《FIFA》系列还是...
这款 Cordura 保护壳仍然拥有安全的口袋来放置证件、信用卡和现金等物品，同时还为用...
对于 MacBook 用户来说，找到保护性能出色并且造型好看的保护壳并不是一件容易的事。
目前无法确定苹果会如何基于增强现实技术来进行布局，但可以肯定的是苹果已经在路上了...
据匿名爆料者透露，苹果已经在伦敦组建了一个新的团队。
嗯，乱点科技树的日本机友们真的是别出心裁~
当然，这个“最准确”的范围被限定在了腕戴式范畴。
为每一个键位配备电子墨水屏可以让键位上的图案根据应用的不同而进行变化。
每一个购买了 Apple Pencil 的用户都希望苹果能够花心思在它身上做更多完善和改进，那...
大神快来看看
注册时间 最后登录
在线时间618 小时 UID
主题帖子人气
红苹果, 积分 374, 距离下一级还需 126 积分
问题是这样“本人想做双系统，在做双系统期间驱动已经下载好，分区的时候，不小心强退了，导致分出来的280G内存，不见了，以前是。1.12T现在712G，没有其他磁盘，不知道去哪了，改不出来，而且在开机command+r的磁盘里面也看不到。。。。求解决办法！如图”
1.png (70.48 KB, 下载次数: 0)
19:59 上传
2.png (64.65 KB, 下载次数: 0)
19:59 上传
注册时间 最后登录
在线时间618 小时 UID
主题帖子人气
求帮忙怎么解决。。。。。。。
注册时间 最后登录
在线时间618 小时 UID
主题帖子人气
谁来帮帮看下啊！！！
注册时间 最后登录
在线时间618 小时 UID
主题帖子人气
后面再装也是不行的！！！
5D14DD67-C37F-42D5-A816-64F38E4C245A.png (97.96 KB, 下载次数: 0)
20:54 上传
注册时间 最后登录
在线时间323 小时 UID
主题帖子人气
Mac OSX BootCamp 磁盘回收方法，供你参考。
1）在系统偏好设置启动磁盘为Mac OSX，而不是Win；否则会提示：启动磁盘不能被分区或恢复成单个分区。
2）启动Mac OSX，退出所有打开的应用程序，然后注销电脑上的所有其他用户；
3）启动Bootcamp 助理，选择 “创建或移除Windows 分区&，继续；
4）如果电脑是单个内置磁盘，则点击恢复（为一个Mac OSX卷宗）；如果电脑有多个内置磁盘，则选择Windows 所在磁盘，然后选择恢复到单个Mac OSX分区，继续。Windows 移除后空间会被Mac 自动回收。
对于Windows分区移除后，空间没有被回收：
5）苹果系统菜单，前往-实用工具-磁盘工具-然后选择主硬盘-分区-在分区图表下面有加减，选中bootcamp分区-点一下减号然后选择应用，弹出确认删除窗口点确定就可以删除windows分区了
6）苹果系统菜单，前往-实用工具-磁盘工具-然后选择主硬盘-分区-手动把分区拖满（Mac OS扩展（日志式）’宗卷，分区合并）即可。
注册时间 最后登录
在线时间174 小时 UID
帖子 精华2
主题帖子人气
Mac OSX BootCamp 磁盘回收方法，供你参考。
1）在系统偏好设置启动磁盘为Mac OSX，而不是Win；否则会提示 ...
如果还不ok& &保存好个人资料文档& &进恢复模式&&用命令强抹磁盘& &不知道是否组了fd&&如果组了&&抹了之后再组回来
注册时间 最后登录
在线时间0 小时 UID
主题帖子人气
学习中………………
注册时间 最后登录
在线时间618 小时 UID
主题帖子人气
如果还不ok& &保存好个人资料文档& &进恢复模式&&用命令强抹磁盘& &不知道是否组了fd&&如果组了&&抹了之 ...
我是组了fd，如何进行强行抹除？
威锋旗下产品
Hi~我是威威！
沪公网安备 29号　|　沪ICP备号-1
新三板上市公司威锋科技（836555）
增值电信业务经营许可证：
Powered by Discuz!从数据库中得到的数据过长，需要在jsp页面上部分显示出来，没有显示的部分用...代替_百度知道3289人阅读
在Web页面中经常需要实现如图5-2所示的级联菜单的效果。即根据用户的选择，动态展开并显示出对应选项子菜单中的内容。本例中是根据用户所选择的商品类别信息，在子菜单中显示对应的商品名称。
图5-2& 级联菜单的效果
在传统的Web实现方式中，一般是在页面初始化时动态获取到服务器端数据库中对应所有子菜单中的信息，放置页面中对应的位置，然后在结合CSS层叠样式表动态控制对应子菜单的显示或者隐藏。
采用这种方法的弊端在于会造成浏览器端下载的页面非常臃肿，许多根本用不到的信息也必须提前装载到页面中。
而如果借助Ajax技术，我们可以实现当用户选择对应的菜单项后，将对应的请求以异步方式提交到服务器端，然后有选择地从服务器端获取到对应的子菜单信息，再返回浏览器端进行响应显示。
首先在Eclipse中新建一个Web项目，项目名称为P52_Menu，对应的浏览器端页面代码如下：
源文件：menu.jsp
&%@ page contentType=&text/charset=UTF-8& language=&java& %&
&&&&& &META http-equiv=Content-Type content=&text/ charset=UTF-8&&
&&&&& &LINK href=&images/css.css& type=text/css rel=stylesheet&
&script language=&javascript&&
&&&&& &var XMLHttpR
&&&&& &var currentS
&&&&& &//创建XMLHttpRequest对象
&&& &&function createXMLHttpRequest() {
&&&&&&&&&&&& if(window.XMLHttpRequest) { //Mozilla 浏览器
&&&&&&&&&&&&&&&&&&& XMLHttpReq = new XMLHttpRequest();
&&&&&&&&&&&& }
&&&&&&&&&&&& elseif (window.ActiveXObject) { // IE浏览器
&&&&&&&&&&&&&&&&&&& try {
&&&&&&&&&&&&&&&&&&&&&&&&&& XMLHttpReq = new ActiveXObject(&Msxml2.XMLHTTP&);
&&&&&&&&&&&&&&&&&&& } catch(e){
&&&&&&&&&&&&&&&&&&&&&&&&&& try{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &XMLHttpReq = new ActiveXObject(&Microsoft.XMLHTTP&);
&&&&&&&&&&&&&&&&&&&&&&&&&& } catch (e) {}
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&& }
&&& &&//发送请求函数
&&& &&function sendRequest(url) {
&&&&&&&&&&& &createXMLHttpRequest();
&&&&&&&&&&& &XMLHttpReq.open(&GET&, url, true);
&&&&&&&&&&& &XMLHttpReq.onreadystatechange = processR//指定响应函数
&&&&&&&&&&& &XMLHttpReq.send(null);& // 发送请求
&&& &&&// 处理返回信息函数
&&& &&function processResponse() {
&&& &&&if(XMLHttpReq.readyState == 4) { // 判断对象状态
&&&&&&&&&&& &if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
&&& &&&&&&&&&&&&&&&&&&&&&updateMenu();
&&& &&&&&&&&&&&&&&}else{ //页面不正常
&&& &&&&&&&&&&&&&&&&&&&&alert(&您所请求的页面有异常。&);
&&& &&&&&&&&&&&&&&}
&&&&&&&&&& &}
&&& &&//更新菜单函数
&&& &&function updateMenu() {
&&&&&&&&&& &var res=XMLHttpReq.responseXML.getElementsByTagName(&res&)
&&&&&&&&&& &var subMenu = &&;
&&&&&&&&&& &for(var i = 0; i & res. i++) {
&&&&&&&&&&&&&&&& subMenu = subMenu + &&&& + res[i].firstChild.data + &&br&&;
&&&&&&&&&& &}
&&&&&&&&&& &currentSort.innerHTML = subM
&&& &// 创建级联菜单函数
&&& &function showSubMenu(obj) {
&&&&&&&&&& &currentSort =document.getElementById(obj);
&&&&&&&&&& &currentSort.parentNode.style.display = &&;
&&&&&&&&&& &sendRequest(&menu?sort=& + obj);
&table& style=&BORDER-COLLAPSE: collapse& borderColor=#111111
&&&&&&&&&&& &&&&&cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0&
&&&&&&&& &&TD align=middle height=4&&IMG height=4
&&&&&&&& &src=&images/promo_list_top.gif& width=&100%&
&&&&&&&& &border=0&
&&& &&&&&&&&/TD&
&&& &&/TR&
&&&&&& &TD align=middle bgColor=#dbc2b0
&&&&&&&&&&&& &&&&&&&&&&height=19&&B&笔记本品牌&/B&
&&& &&&&/TD&
&&& &&/TR&
&&&&&&& &&td height=&20&&
&&& &&&&&&&&&&&&&&&a onClick=&showSubMenu('IBM')&&IBM&/a&
&&& &&&&&&&/td&
&&& &tr style=&display:none&&
&&&&&&& &&td height=&20& id=&IBM&& &/td&
&&&&&&& &&td height=&20&&
&&& &&&&&&&&&&&&&&&a onClick=&showSubMenu('SONY')&&SONY&/a&
&&& &&&&&&&/td&
&&& &tr style=&display:none &&
&&&&&&& &td id=&SONY& height=&20&& &/td&
在该页面中提供了对应的菜单以供用户进行选择，用户选择菜单后，将调用&showSubMenu('XXX')&函数，该函数带参数，其中参数用于传递所选菜单项的标志信息，以决定获取服务器端的哪个子菜单信息。在&showSubMenu('XXX')&函数中首先获取到所选菜单项的识别信息，然后再借助Ajax提交请求，并同时提交用户所选菜单的标识信息到服务器端，等待服务器端的处理。当服务器端处理完成后，将返回对应的子菜单信息，在Ajax提供的处理函数中对应菜单项的位置进行显示，这里用innerHTML属性实现定位显示。
该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到，当浏览器端提交&menu&请求时，将由服务器端的类名为&classmate.MenuAction&的Servlet程序进行处理。
&?xml version=&1.0& encoding=&UTF-8&?&
&web-app version=&2.4&
&&& &xmlns=&/xml/ns/j2ee&
&&& &xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
&&& &xsi:schemaLocation=&/xml/ns/j2ee
&&& &/xml/ns/j2ee/web-app_2_4.xsd&&
&&& &servlet&
&&&&& &&&&servlet-name&ms1&/servlet-name&
&&&&&& &&&servlet-class&classmate.MenuAction&/servlet-class&
&&& &/servlet&
&& &servlet-mapping&
&&&&&& &&&servlet-name&ms1&/servlet-name&
&&&&&&& &&url-pattern&/menu&/url-pattern&
&&& &/servlet-mapping&
&!-- The Welcome File List --&
& &welcome-file-list&
&&& &welcome-file&menu.jsp&/welcome-file&
& &/welcome-file-list&
&/web-app&
下面我们关注一下服务器端Servlet程序MenuAction.java中对应的程序代码。当接收到浏览器端提交的请求后，Servlet程序将首先获取浏览器端提交的所选菜单项的标志信息，即所选择的商品类别信息，然后借助封装了数据库操作的JavaBean完成数据库的查询工作，依据类别获取到对应商品名称的信息。
import java.io.IOE
public class MenuAction extends HttpServlet {
&&& &&&public void init(ServletConfig config) throws ServletException {
&&&& &&*&处理&GET& 请求方法
&&& protected void doGet(HttpServletRequest request, HttpServletResponse response)
&&& throws ServletException, IOException {
&&&& //设置接收信息的字符集
&&& &request.setCharacterEncoding(&UTF-8&);
&&&& //接收浏览器端提交的信息
&&& &&&&&&&&String sort = request.getParameter(&sort&);
&&& &&&&&&&&//设置输出信息的格式及字符集&&&&&&&
&&&&&&& response.setContentType(&text/ charset=UTF-8&);
&&&&&&& response.setHeader(&Cache-Control&, &no-cache&);
&&&&&&& //创建输出流对象
&&&&&&& PrintWriter out = response.getWriter();
&&&&&&& //依据验证结果输出不同的数据信息
&&&&&&& out.println(&&response&&);&&&
&&&&&&& //数据库操作
&&&&&&& DB db = new DB();
&&& &&&&&&&ResultS
&&&&&&& String strSql=
&&& &&&&//查找该品牌具体型号
&&&&&&& strSql = &select product.name from sort,product where sort.id=product.sortid&&&&&&&&&&&&&&&&&&&&& and sort.name='&+ sort + &'&;
&&& &&&&&&&rs = db.executeQuery(strSql);
&&& &&&&&&&try {
&&& &&&&&&&&&&&&&&&while (rs.next()) {
&&& &&&&&&&&&&&&&&&&&&&&&&&&out.println(&&res&& + rs.getString(&name&) + &&/res&&);
&&& &&&&&&&&&&&&&&&}
&&& &&&&&&&}catch (SQLException e) {
&&& &&&&&&&&&&&&&&&e.printStackTrace();
&&& &&&&&&&}
&&& &&&&&&&out.println(&&/response&&);
&&& &&&&&&&out.close();
注意在本例中，返回的XML文档的格式如下所示：
&response&
&&&& &&res&商品名称1&/ res&
&&&& &&res&商品名称2&/ res&
&/response&
提示：读者可以进一步完善该程序，实现从服务器端动态获取菜单项信息，然后再依据用户选择动态显示子菜单信息的效果。这里所说的刷新，指的是通过重发URL请求来从服务器获得更新的数据以更新视图的显示。
实现动态加载列表框
本例中所实现的效果如图5-3所示。当用户在品牌选择的下拉列表框中选择了对应品牌后，该品牌下所有的商品信息将会动态出现在商品选择列表框中以供用户进一步选择。这种表单元素之间的联动效果在网页中非常常用。例如，随着所选专业，显示班级选择列表。随着所选部门，显示职务选择列表等。
传统的Web实现方式，页面初始化时准备好所有列表框中的信息，并通过逻辑控制建立列表框之间对应选项的联系。再依据用户的选择，通过逻辑判断将事先准备好的列表框信息装入对应的联动列表框中。
这种方法的弊端是造成浏览器端下载的页面非常臃肿，许多在本次交互中根本用不到的信息也必须提前装载到页面中。
图5-3& 动态加载列表框的效果
借助Ajax技术，可以实现当用户选择第一个列表框中对应的选项后，将对应的请求以异步方式提交到服务器端，然后有选择地从服务器端获取到下一个列表框中的列表信息，再返回浏览器端进行响应显示，下面介绍一下具体的实现过程。
首先在Eclipse中新建一个Web项目，项目名称为P53_DyList，对应的浏览器端页面代码如下：
源文件：dyList.jsp
&%@ page contentType=&text/charset=UTF-8& language=&java& %&
&&&& &META http-equiv=Content-Type content=&text/ charset=UTF-8&&
&script language=&javascript&&
&&&&& var XMLHttpR
&&&&& //创建XMLHttpRequest对象&&&&&&
&&& &&function createXMLHttpRequest() {
&&&&&&&&&&&& if(window.XMLHttpRequest) { //Mozilla 浏览器
&&&&&&&& &&&&&&&&&&&XMLHttpReq = new XMLHttpRequest();
&&&&&&&&&&&& }
&&&&&&&&&&&& else if (window.ActiveXObject) { // IE浏览器
&&&&&&&&&&&&&&&&&&& try {
&&&&&&&&&&&&&&&&&&&&&&&&&& XMLHttpReq = new ActiveXObject(&Msxml2.XMLHTTP&);
&&&&&&&&&&&&&&&&&&& } catch (e) {
&& &&&&&&&&&&&&&&&&&&&&&&&&try {
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &XMLHttpReq = new ActiveXObject(&Microsoft.XMLHTTP&);
&&&&&&&&&&&&&&&&&&&&&&&&&& } catch (e) {}
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&& }
&&&&& //发送请求函数
&&&&& function sendRequest(url) {
& &&&&&&&&&&&createXMLHttpRequest();
&&&&&&&&&&&& XMLHttpReq.open(&GET&, url, true);
&&&&&&&&&&&& XMLHttpReq.onreadystatechange = processR//指定响应函数
&&&&&&&&&&&& XMLHttpReq.send(null);& // 发送请求
&&&&& // 处理返回信息函数
&&&&& function processResponse() {
&&&&& &if (XMLHttpReq.readyState == 4) { // 判断对象状态
&&&&&&&&&&&& if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
&&&&&&&&&&&&&&&&&& &updateList();
&&&&&&&&&&& } else { //页面不正常
&&&&&&&&&&&&&& &&&window.alert(&您所请求的页面有异常。&);
&&&&&&&&&& &}
&&&&&&& &}
&&& // 刷新列表框函数
&&& function refreshList() {
&&&&&&& &var sort = document.getElementById(&sort&).
&&&&&&& &if(sort == && ) {
&&&&&&& &&&&&&&&clearList();
&&&&&&& &&&&&&&&
&&&&&&& &}
&&&&&&& &var url = &dyList?sort=& +& &&&&&&&
&&&&&&& &&sendRequest(url)
&&& // 更新列表框中列表项函数
&&& &function updateList() {
&&&&&&& &&clearList();
&&&&&&& &&var product = document.getElementById(&product&);
&&&&&&& &&var results = XMLHttpReq.responseXML.getElementsByTagName(&name&);
&&&&&&& &&var option =
&&&&&&& &&for(var i = 0; i & results. i++) {
&&&&&&& &&&&&&&option = document.createElement(&option&);
&&&&&&& &&&&&&&option.appendChild(document.createTextNode(results[i].firstChild. nodeValue));
&&&&&&& &&&&&&&product.appendChild(option);
&&&&&&& &&}
&&& // 清除列表框中原有选项的函数
&&& &function clearList() {
&&&&&&& &&var product = document.getElementById(&product&);
&&&&&&& &&while(product.childNodes.length & 0) {
&&&&&&& &&&&&&&product.removeChild(product.childNodes[0]);
&&&&&&& &&}
&table& style=&BORDER-COLLAPSE: collapse& borderColor=#111111
&&&&&&&&&&& cellSpacing=0 cellPadding=2 width=200 bgColor=#f5efe7 border=0&
&&&&&&&& &TD align=middle height=4 colspan=&2&&&IMG height=4
&&&&&&&& src=&images/promo_list_top.gif& width=&100%&
&&&&& &&&border=0&
&&&&&&&&& &/TD&
&&&&& &&TD align=middle bgColor=#dbc2b0
&&&&&&&&&&&&&&&&&&& &&&height=19 colspan=&2&&&B&商品搜索&/B&
&&&&& &&/TD&
&&&&& &&&td height=&20&&
&&&&& &&&&&&&&&&&&&品牌选择:
&&&&& &&&&/td&
&&&&& &&&&td height=&20&&
&&&&& &&&&&&&&&&&select id=&sort& onchange=&refreshList();&&
&&&&& &&&&&&&&&&&&&&&&&&option value=&default&&请选择&/option&
&& &&&&&&&&&&&&&&&&&&&&&option value=&IBM&&IBM&/option&
&&&&& &&&&&&&&&&&&&&&&&&option value=&SONY&&SONY&/option&
&&&&& &&&&&&&&&&&&&&&&&&option value=&联想&&联想&/option&
&&&&& &&&&&&&&&&&/select&
&&&&& &&&&&/td&
&&&&& &&&&&td height=&20&&
&&&&& &&&&&&&&&&&商品信息:
&&&&& &&&&&/td&
&&&&& &&&&&td height=&20&&
&&&&& &&&&&select id=&product& &
&&&&& &&&&&/select&
&&&&& &&&&&/td&
&&&& &/tr&
在该页面中，第一个列表框中提供了对应的品牌选项以供用户进行选择，当用户选择了所需的品牌信息后，将调用&refreshList()&函数，在该函数中首先获取到所选列表项的标志信息，如果用户选择的是&请选择&，则调用&clearList()&函数清除第二个列表框中的内容，如果用户选择的是有效的品牌选项，则借助Ajax提交请求，并同时提交用户所选选项的标识信息到服务器端，等待服务器端的处理。当服务器端后续处理完成后，将返回第二个列表框中的信息，然后在Ajax提供的处理函数中在对应的列表框中显示，在显示时使用了本书第3章中介绍的使用DOM操作HTML的方式。
该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到，当浏览器端提交&dyList&请求时，将由服务器端的类名为&classmate.DyListAction&的Servlet程序进行处理。
&?xml version=&1.0& encoding=&UTF-8&?&
&web-app version=&2.4&
&&& &xmlns=&/xml/ns/j2ee&
&&& &xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
&&& &xsi:schemaLocation=&/xml/ns/j2ee
&&& &/xml/ns/j2ee/web-app_2_4.xsd&&
&&& &&servlet&
&&&&&&& &&servlet-name&ms1&/servlet-name&
&&&&&&& &&servlet-class&classmate.DyListAction&/servlet-class&
&&& &&/servlet&
&& &&servlet-mapping&
&&&&&&& &&&servlet-name&ms1&/servlet-name&
&&&&&&& &&&url-pattern&/dyList&/url-pattern&
&&& &&/servlet-mapping&
&!-- The Welcome File List --&
& &welcome-file-list&
&&& &welcome-file&dyList.jsp&/welcome-file&
& &/welcome-file-list&
&/web-app&
下面我们关注一下服务器端Servlet程序DyListAction.java中对应的程序代码。当接收到浏览器端提交的请求后，Servlet程序首先获取浏览器端提交的所选列表项的标志信息，即所选择的商品类别信息，然后借助封装了数据库操作的JavaBean完成数据库的查询工作，依据类别获取到对应的商品名称信息。
import java.io.IOE
public class DyListAction extends HttpServlet {
&&&&& public void init(ServletConfig config) throws ServletException {
&&&& *& 处理&GET& 请求方法
&&& protected void doGet(HttpServletRequest request, HttpServletResponse response)
&&& throws ServletException, IOException {
&&&& //设置接收信息的字符集
&&& &request.setCharacterEncoding(&UTF-8&);
&&&& //接收浏览器端提交的信息
&&&& &&&&&&String sort = request.getParameter(&sort&);
&&&& &&&&&&//设置输出信息的格式及字符集&&&&&&&
&&&&&&& &response.setContentType(&text/ charset=UTF-8&);
&&&&&&& &response.setHeader(&Cache-Control&, &no-cache&);
&&&&&&&& //创建输出流对象
&&&&&&& &PrintWriter out = response.getWriter();
&&&&&&&& //依据验证结果输出不同的数据信息
&&&&&&& &out.println(&&response&&);&&&&&
&&&&&&&& //数据库操作
&&&&&&& &DB db = new DB();
&&&&&&&&& ResultS
&&&&&&& &String strSql=
&&&&&&&& //查找该品牌具体型号
&&&&&&& &strSql =&select product.name,product.id from sort,product where sort.id=&&&&&&&&&&&&&&&&&&&&&& &product.sortid and sort.name='&+ sort + &'&;
&&&&&&&&& rs = db.executeQuery(strSql);
&&&&&&&&& try {
&&&&&&&&&&&&&&& while (rs.next()) {
&&&&&&&&&&&&&&&&&&&&&& out.println(&&name&& + rs.getString(&name&) + &&/name&&);
&&&&&&&&&&&&&&& }
&&&&&&&&& } catch (SQLException e) {
&&&&&&&&&&&&&&& e.printStackTrace();
&&&&&&&&& }
&&&&&&&&& out.println(&&/response&&);
&&&&&&&&& out.close();
注意在本例中，返回的XML文档的格式如下所示：
&response&
&&&&& &&name&商品名称1&/ name&
&&&&& &&name&商品名称2&/name&
&/response&
读者可以进一步完善该程序，实现从服务器端动态获取第一个列表框中的信息，然后再依据用户选择动态显示第二个列表框中的信息。
&实现自动刷新页面
本例实现页面自动刷新的效果，该页面的内容如图5-4所示，在该页面中将根据数据库中存储的最新数据信息更新页面中热卖商品的信息，但是对这些信息的修改并不会导致整个页面的刷新。
实际的Web应用中，诸如：天气预报、直播比赛以及股市行情等页面往往都需要定期进行自动刷新。
传统的Web实现方式中，要想实现类似的效果必须进行整个页面的刷新，在网络速度受到一定限制的情况下，这种因为一个局部变动而牵动整个页面的处理方式显得有些得不偿失。
图5-4& 自动刷新页面的效果
借助Ajax技术，可以实现对页面中局部区域的动态刷新，使得用户能够以更好的方式获得最新的数据信息，下面介绍一下自动刷新页面的具体实现过程。
首先在Eclipse中新建一个Web项目，项目名称为P54_AutoRefresh，对应的浏览器端页面代码如下：
源文件：aotuRefresh.jsp
&%@ page contentType=&text/charset=UTF-8& language=&java& %&
&&&&& &META http-equiv=Content-Type content=&text/ charset=UTF-8&&
&script language=&javascript&&
&&&&& &var XMLHttpR
&&&&& &//创建XMLHttpRequest对象&&&&&&
&&& &&function createXMLHttpRequest() {
&&&&&&&&&&& &&if(window.XMLHttpRequest) { //Mozilla 浏览器
&&&&&&&&&&&&&&&&&&& &XMLHttpReq = new XMLHttpRequest();
&&&&&&&&&&& &&}
&&&&&&&&&&& &&else if (window.ActiveXObject) { // IE浏览器
&&&&& &&&&&&&&&&&&&&&try {
&&&&&&&&&&&&&&&&&&&&&&&&&& XMLHttpReq = new ActiveXObject(&Msxml2.XMLHTTP&);
&&&&&&&&&&&&&&&&&&& &} catch(e){
&&&&&&&&&&&&&&&&&&&&&&&&& &try {
&&&&&&&&&&&&&&&&&&&&&&&&& &&&&XMLHttpReq = new ActiveXObject(&Microsoft.XMLHTTP&);
&&&&&&&& &&&&&&&&&&&&&&&&&&} catch (e) {}
&&&&&&&&&&&&&&&&&&& &}
&&&&&&&&&&& &&}
&&&& &&//发送请求函数
&&&& &&function sendRequest() {
&&&&&&&&&&& &&createXMLHttpRequest();
&&&&&&& &&&&var url = &refresh&;
&&&&&&&&&&& &&XMLHttpReq.open(&GET&, url, true);
&&&&&&&&&&& &&XMLHttpReq.onreadystatechange = processR//指定响应函数
&&&&&&&&&&& &&XMLHttpReq.send(null);& // 发送请求
&&&& &&// 处理返回信息函数
&&&& &&function processResponse() {
&&&& &&if (XMLHttpReq.readyState == 4) { // 判断对象状态
&&&&&&&&&&& &&if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
&&&&&&&&&&&&&&&&&&&&&& &DisplayHot();
&&&&&&&&&&&&&&&&& &&&&&&setTimeout(&sendRequest()&, 1000);
&&&&&&&&&&& &&} else { //页面不正常
&&&&&&&&&&&&& &&&&&&window.alert(&您所请求的页面有异常。&);
&&&&&&&&&&& &&}
&&&&&&& &}
&& &&&// 显示更新数据信息的函数
&&& &&function DisplayHot() {
&&&&&&&&&& &var name = XMLHttpReq.responseXML.getElementsByTagName(&name&)[0]. firstChild.nodeV
&&&&&&&&&& &var count = XMLHttpReq.responseXML.getElementsByTagName(&count&)[0]. firstChild.nodeV
&&&&&&&&&& &document.getElementById(&product&).innerHTML =&&&
&&&&&&&&&& &document.getElementById(&count&).innerHTML =
&body onload =sendRequest()&
&table& style=&BORDER-COLLAPSE: collapse& borderColor=#111111
&&&&&&&&&&& &&&&cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0&
&&&&&&&& &TD align=middle height=4 colspan=&2&&&IMG height=4
&&&&&&&& src=&images/promo_list_top.gif& width=&100%&
&&&&&&&& border=0&
&&&&&&&& &&&/TD&
&&& &&&/TR&
&&& &&&TR&
&&&&&& &TD align=middle bgColor=#dbc2b0
&&&&&&&&&&&&&&&&&&& &&&height=19 colspan=&2&&&B&正在热卖的笔记本&/B&
&&&&&& &/TD&
&&&&&&& &td height=&20&&
&&& &&&&&&&&&&&&&型号：
&&& &&&&&&&/td&
&&&&&&& &td height=&20& id=&product&&
&&& &&&&&&&/td&
&&&&&&& &td height=&20&&
&&& &&&&&&&&&&&&&&&&&销售数量：
&&& &&&&&&&/td&
&&& &&&&&&&td height=&20& id=&count&&
&&& &&&&&&&/td&
&/body&&&&
在该页面中在第一次进行页面装载时，将调用&sendRequest()&函数，在该函数中将借助Ajax提交请求，等待服务器端的处理。当服务器端后续处理完成后，将返回最新热卖商品的信息，然后在Ajax提供的处理函数中调用&DisplayHot()&函数在页面的对应位置进行显示，在进行显示时使用了本书第3章中介绍的使用DOM操作HTML的方式，同时使用了对应元素的innerHTML属性。此外，为了能够实现页面的自动刷新，在&sendRequest()&函数的最后设置了定时器，即在1000ms之后再次调用本函数，执行上面所有的处理工作，从而真正实现页面的自动刷新。注意本例中所使用的setTimeout (&sendRequest()&, 1000)函数是HTML DOM中window对象提供的设置定时器的方法。
该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到，当浏览器端提交&refresh&请求时，将由服务器端的类名为&classmate.AutoRefreshAction&的Servlet程序进行处理。
&?xml version=&1.0& encoding=&UTF-8&?&
&web-app version=&2.4&
&&&& xmlns=&/xml/ns/j2ee&
&&&& xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
&&&& xsi:schemaLocation=&/xml/ns/j2ee
&&&& /xml/ns/j2ee/web-app_2_4.xsd&&
&&& &&servlet&
&&&&& &&&&&servlet-name&ms1&/servlet-name&
&&&&& &&&&&servlet-class&classmate.AutoRefreshAction&/servlet-class&
& &&&&/servlet&
&& &&servlet-mapping&
&&&&& &&&&&servlet-name&ms1&/servlet-name&
&&&&& &&&&&url-pattern&/refresh&/url-pattern&
&&& &/servlet-mapping&
&!-- The Welcome File List --&
& &welcome-file-list&
&&& &welcome-file&autoRefresh.jsp&/welcome-file&
& &/welcome-file-list&
&/web-app&
下面我们关注一下服务器端Servlet程序AutoRefreshAction.java中对应的程序代码。当接收到浏览器端提交的请求后，借助封装了数据库操作的JavaBean完成数据库的查询工作，获取最新热卖的商品信息进行响应。
import java.io.IOE
public class AutoRefreshAction extends HttpServlet {
&&& &&public void init(ServletConfig config) throws ServletException {
&&&&& *& 处理&GET& 请求方法
&&& &protected void doGet(HttpServletRequest request, HttpServletResponse response)
&& &&throws ServletException, IOException {
&&& &&&&&&&&//设置输出信息的格式及字符集&&&&&&&
&&&&& &&&&response.setContentType(&text/ charset=UTF-8&);
&&&&&& &&&response.setHeader(&Cache-Control&, &no-cache&);
&&&&&& &&&//创建输出流对象
&&&&&& &&&PrintWriter out = response.getWriter();
&&&&&& &&&//依据验证结果输出不同的数据信息
&&&&&& &&&out.println(&&response&&);&&&&&&
&& &&&&&//数据库操作
&&&&&&& DB db = new DB();
&&&&&&& &ResultS
&&&&&&& String strSql=
&&&&&&& //查询热卖产品
&&&&&&& strSql = &select name,salecount from product order by salecount desc&;
&&&&&&& &&rs = db.executeQuery(strSql);
&&&&&&& &&try {
&&&&&&& &&&&&&&&if ( rs.next()) {
&&&&&&& &&&&&&&&&&&&&&&&out.println(&&name&& + rs.getString(&name&) + &&/name&&);
&&&&&&& &&&&&&&&&&&&&&&&out.println(&&count&& + rs.getString(&salecount&) + &&/count&&);
&&&&&&& &&&&&&&&}
&&&&&&& &&} catch (SQLException e) {
&&&&&&& &&&&&&&&e.printStackTrace();
&&&&&&& &&}
&&&&&&& &&out.println(&&/response&&);
&&&&&&& &&out.close();
注意在本例中，返回的XML文档的格式如下所示：
&response&
&&& &&&name&热卖商品名称&/ name&
&&& &&count&热卖数量&/count&
&/response&
由于数据库中商品的销售数量一直在发生改变，因此，本例中实现的原则是通过页面自动刷新定期获取数据库中销售数量最高的商品信息，在浏览器端的页面中进行显示。
实现Web页面的局部动态更新
本例中实现的是页面中局部动态更新的效果，对应页面的显示效果如图5-5所示，在该页面中实现的相当于商品信息的后台维护页面，在该页面中用户可以动态增加新的品牌信息到数据库中，增加后的品牌信息将会直接在动态表格中进行显示。同时也可以借助动态表格中的删除按钮进行品牌信息的删除操作。同样在本例中对这些信息的修改并不会导致整个页面的刷新。
图5-5& Web页面的局部刷新效果
传统的Web实现方式中，实现类似的效果必须进行整个页面的刷新。
借助Ajax技术，可以实现对页面中局部区域的动态刷新，使得用户能够以更好的方式获得最新的数据信息，下面介绍一下具体的实现过程。
首先在Eclipse中新建一个Web项目，项目名称为P55_DyUpdate，对应的浏览器端页面代码如下：
源文件：dyUpdate.jsp
&%@ page contentType=&text/charset=UTF-8& language=&java& %&
&&& &&META http-equiv=Content-Type content=&text/ charset=UTF-8&&
&&& &&LINK href=&images/css.css& type=text/css rel=stylesheet&
&script language=&javascript&&
&&& &&var XMLHttpR
&&& &&var PREFIX = &Sort&;
&&& &&//创建XMLHttpRequest对象&&&&&&
&&& &&function createXMLHttpRequest() {
&&& &&&&&&&&&if(window.XMLHttpRequest) { //Mozilla 浏览器
&&& &&&&&&&&&&&&&&&&XMLHttpReq = new XMLHttpRequest();
&&& &&&&&&&&&}
&&& &&&&&&&&&else if (window.ActiveXObject) { // IE浏览器
&&& &&&&&&&&&&&&&&&&&try {
&&& &&&&&&&&&&&&&&&&&&&&&&&&&XMLHttpReq = new ActiveXObject(&Msxml2.XMLHTTP&);
&&& &&&&&&&&&&&&&&&&&} catch (e){
&&& &&&&&&&&&&&&&&&&&&&&&&&&try {
&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&XMLHttpReq = new ActiveXObject(&Microsoft.XMLHTTP&);
&&& &&&&&&&&&&&&&&&&&&&&&&&&} catch (e) {}
&&& &&&&&&&&&&&&&&&&&}
&&& &&&&&&&&&}
&&& &&// 处理增加品牌响应函数
&&& &function AddStateChange() {
&&& &&if (XMLHttpReq.readyState == 4) { // 判断对象状态
&&& &&&&&&&&if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
&&& &&&&&&&&&&&&&&&&AddSortList();
&&&&&&&&&&& &&&}else { //页面不正常
&&&&&&&&&&&&&&& &&&&window.alert(&您所请求的页面有异常。&);
&&&&&&&&&&& &&&}
&&& &&&&&&&&}
&&& &// 增加品牌函数
&&& &function addSort() {
&&&& &&&&&name = document.getElementById(&name&).
&&&& &&&&&if(name == && ) {
&&&& &&&&&&&&&&
&&&& &&&&&}
&&&& &&&&&var url = &dyUpdate?action=add& + &&name=&+
&&&& &&&&&createXMLHttpRequest();
&&&& &&&&&XMLHttpReq.onreadystatechange = AddStateC
&&&& &&&&&XMLHttpReq.open(&GET&, url, true);
&&&& &&&&&XMLHttpReq.send(null);
&&& &function AddSortList() {
&&&& &&&&&var AddID = XMLHttpReq.responseXML.getElementsByTagName(&id&)[0].firstChild. nodeV
&&&& &&&&&if (AddID!=null){
&&&& &&&&&&&&&&&&&var row = document.createElement(&tr&);
&&&& &&&&&&&&&&&&&row.setAttribute(&id&, PREFIX + AddID);
&&&& &&&&&&&&&&&&&var cell = document.createElement(&td&);
&&&& &&&&&&&&&&&&&cell.appendChild(document.createTextNode(name));
&&&& &&&&&&&&&&&&&row.appendChild(cell);
&&&& &&&&&&&&&&&&&var deleteButton = document.createElement(&input&);
&&&& &&&&&&&&&&&&&deleteButton.setAttribute(&type&, &button&);
&&&& &&&&&&&&&&&&&deleteButton.setAttribute(&value&, &删除&);
&&&& &&&&&&&&&&&&&deleteButton.onclick = function () { deleteSort(AddID); };
&&&& &&&&&&&&&&&&&cell = document.createElement(&td&);
&&&& &&&&&&&&&&&&&cell.appendChild(deleteButton);
&&&& &&&&&&&&&&&&&row.appendChild(cell);
&&&& &&&&&&&&&&&&&document.getElementById(&sortList&).appendChild(row);
&&&& &&&&&//清空输入框
&&&& &&&&&&&&&&&&&document.getElementById(&name&).value = &&;
&&&& &&&&&}
&& &// 删除品牌函数
&& &function deleteSort(id) {
&&&& &&&&&var url = &dyUpdate?action=delete& + &&id=& +
&&&& &&&&&createXMLHttpRequest();
&&&& &&&&&XMLHttpReq.onreadystatechange = DeleteStateC
&&&& &&&&&XMLHttpReq.open(&GET&, url, true);
&&&& &&&&&XMLHttpReq.send(null);
&& &// 处理删除品牌响应函数
&& &function DeleteStateChange() {
&& &if(XMLHttpReq.readyState == 4) { // 判断对象状态
&&&& &&&&&if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
&&&& &&&&&&&&&&&&&&&&deleteSortList();
&&&& &&&&&&&&&&}else { //页面不正常
&&&&&&&&&&&&&&& &&window.alert(&您所请求的页面有异常。&);
&&&& &&&&&&&&&&}
&&&& &&&&&}
&& &function deleteSortList() {
&& &deleteID = XMLHttpReq.responseXML.getElementsByTagName(&id&)[0].firstChild. nodeV
&&&& &&&&&&if (deleteID!=null){
&&&& &&&&&&&&&&&&&var rowToDelete = document.getElementById(PREFIX + deleteID);
&&&& &&&&&&&&&&&&&var sortList = document.getElementById(&sortList&);
&&&& &&&&&&&&&&&&&sortList.removeChild(rowToDelete);
&&&& &&&&&&}
&table& style=&BORDER-COLLAPSE: collapse& borderColor=#111111
&&&&&&&&&&& &&&&&cellSpacing=0 cellPadding=2 width=400 bgColor=#f5efe7 border=0&
&&&&&&&& &TD align=middle height=4 colspan=&3&&&IMG height=4
&&&&&&&& src=&images/promo_list_top.gif& width=&100%&
&&&&&&&& border=0&
&& &&&&&&&&/TD&
&&&&&& &TD align=middle bgColor=#dbc2b0
&&&&&&&&&&&&&&&&&&& &&&height=19 colspan=&3&&&B&品牌信息管理&/B&
&&&&&& &/TD&
&&&&&&& &td height=&20&&
&& &&&&&&&&&&&&&&增加新品牌:
&&& &&&&&&/td&
&&& &&&&&&td height=&20&&
&& &&&&&&&&&&&&&&&&input id=&name& type=&text&&&& size=&15&&
&&& &&&&&&/td&
&&& &&&&&&td height=&20&&
&& &&&&&&&&&&&&&&&&img src=&images/ok.gif& onclick=&addSort();&&
&&& &&&&&&/td&
&& &&&&tr&
&& &&&&&&&&td height=&20&&
&&& &&&&&&&&&&&&品牌信息管理:
&&& &&&&&&/td&
&&& &&/tr&
& &table border=&1& width=&400&&
&&& &&&&&&td height=&20& valign=&top& align=&center&&
&& &&&&&&&&&&&&&品牌名称:
&&& &&&&&&/td&
&&&&&&& &td id=&pos_1& height=&20&&
&& &&&&&&&&&&&&&操作
&&& &&&&&&/td&
&&& &tbody id=&sortList&&&/tbody&
& &/table&
在该页面中当用户在文本框中输入新品牌的名称，单击&提交&按钮后，将调用&addSort()&函数，在该函数中首先获取到用户输入的新品牌信息，借助Ajax提交请求，同时提交文本框中用户填写的新的品牌信息，请求的格式为& dyUpdate?action=add& + &&name=&+ name，可以看到，为了表明请求的类型，使用了参数action，其值为&add&,等待服务器端的处理。当服务器端后续处理完成后，将返回最新的商品品牌信息列表，然后在Ajax提供的处理函数中调用&AddSortList()&函数以动态表格的方式在页面的对应位置进行显示，在进行显示时使用了本书第3章中介绍的使用DOM操作HTML的方式。
此外，当用户在动态表格中选择了对应品牌，单击&操作&按钮后，将调用&deleteSort()&，该函数带参数，参数用于传递待操作的品牌标志信息，在&deleteSort()&函数中将提交请求，同时提交品牌标志信息到服务器端，请求的格式为&dyUpdate?action=delete& + &&id=& + id，可以看到，为了表明请求的类型，使用了参数action，其值为&delete&。等待服务器端的处理。当服务器端后续处理完成后，将调用&deleteSortList()&函数借助DOM操作HTML方式从动态表格中去除对应的品牌信息。
该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到，当浏览器端提交&dyUpdate&请求时，将由服务器端的类名为&classmate.DyUpdateAction&的Servlet程序进行处理。
&?xml version=&1.0& encoding=&UTF-8&?&
&web-app version=&2.4&
&&&& xmlns=&/xml/ns/j2ee&
&&&& xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
&&&& xsi:schemaLocation=&/xml/ns/j2ee
&&&& /xml/ns/j2ee/web-app_2_4.xsd&&
&& &&&servlet&
&&&& &&&&&&servlet-name&ms1&/servlet-name&
&&&& &&&&&&servlet-class&classmate.DyUpdateAction&/servlet-class&
&& &&&/servlet&
& &&&servlet-mapping&
&&&& &&&&&&servlet-name&ms1&/servlet-name&
&&&& &&&&&&url-pattern&/dyUpdate&/url-pattern&
&&& &&/servlet-mapping&
&!-- The Welcome File List --&
& &welcome-file-list&
&&& &welcome-file&dyUpdate.jsp&/welcome-file&
& &/welcome-file-list&
&/web-app&
下面我们关注一下服务器端Servlet程序DyUpdateAction.java中对应的程序代码。当接收到浏览器端提交的请求后，首先获取请求的类型及相关的数据信息，然后借助封装了数据库操作的JavaBean完成数据库的操作，如果是添加新品牌信息的请求，则向数据库中进行记录插入，否则进行记录删除操作。
import java.io.IOE
public class DyUpdateAction extends HttpServlet {
&&&& &public void init(ServletConfig config) throws ServletException {
&&&&& *& 处理&GET& 请求方法
&&&& protected void doGet(HttpServletRequest request, HttpServletResponse response)
&& &&throws ServletException, IOException {
&&&& //设置接收信息的字符集
&& &&request.setCharacterEncoding(&UTF-8&);
&& &&//接收浏览器端提交的信息
&& &&&&&&&&String action = request.getParameter(&action&);&&&&
&& &&&&&&&&String name = request.getParameter(&name&);
&& &&&&&&&&String id = request.getParameter(&id&);
&& &&&&&&&&//设置输出信息的格式及字符集&&&&&&&
&&&&&&& &response.setContentType(&text/ charset=UTF-8&);
&&&&&&& &response.setHeader(&Cache-Control&, &no-cache&);
&&&&&&&& //创建输出流对象
&&&&&&& &PrintWriter out = response.getWriter();
&&&&&&&& //依据验证结果输出不同的数据信息
&&&&&&& &out.println(&&response&&);&&&&&
&&&&&&&& //数据库操作
&& &&&&&&DB db = new DB();
&&&&&& &&&ResultS
&& &String strSql=
&&&&&& &&&int insRes = 0;
&&&&&&& &if (&add&.equals(action)){
&&&&&& &&&&&&&&&//判断用户名是否重复
&&&&&& &&&&&&&&&strSql = &select max(id) from sort&;
&&&&&& &&&&&&&&&&rs = db.executeQuery(strSql);
&&&&&& &&&&&&&&&&int iMaxId=0;
&&&&&& &&&&&&&&&&try {
&&&&&& &&&&&&&&&&&&&&&&if ( rs.next()) {
&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&iMaxId=rs.getInt(1)+1;
&&&&&& &&&&&&&&&&&&&&&&}
&&&&&& &&&&&&&&&&&&&&&&else {
&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&iMaxId=1;
&&&&&& &&&&&&&&&&&&&&&&}
&&&&&& &&&&&&&&&&} catch (SQLException e) {
&&&&&& &&&&&&&&&&&&&&&&e.printStackTrace();
&&&&&& &&&&&&&&&&}
&&&&&& &&&&&&&&&&if ( iMaxId&0 ){
&&&&&& &&&&&&&&&&&&&&&&&strSql = &insert into sort values('&
&&&&&& &&&&&&&&&&&&&&&&&&+ iMaxId & &+&','&
&&&&&& &&&&&&&&&&&&&&&&&&&&&&&+ name &&& &+&')&;
&&&&&& &&&&&&&&&&&&&&&&&&insRes = db. executeUpdate(strSql);
&&&&&& &&&&&&&&}
&&&&&& &&&&&&&&&&if(insRes&0){
&&&&&& &&&&&&&&&&&&&&&&&out.println(&&id&& + iMaxId + &&/id&&);
&&&&&& &&&&&&&&&&&&&&&&&out.println(&&name&& + name + &&/name&&);
&&&&&& &&&&&&&&&&}
&&&&&&& &}
&&&&&&& &else if (&delete&.equals(action)){
&&&&&& &&&&&&&&&&strSql = &delete from sort where id= & +
&&&&&& &&&&&&&&&&&insRes = db. executeUpdate(strSql);
&&&&&& &&&&&&&&&&&if(insRes&0){
&&&&&& &&&&&&&&&&&&&&&&&&out.println(&&id&& + id + &&/id&&);
&&&&&& &&&&&&&&&&&}
&&&&&&& &}
&&&&&&& &&out.println(&&/response&&);
&&&&&&& &&out.close();
在本例中，完成添加新品牌的请求处理之后，返回的XML文档的格式如下：
&response&
&& &&&&id&新品牌id&/ id&
&& &&&&name&新品牌名称&/name&
&/response&
完成品牌删除的请求处理之后，返回的XML文档的格式如下：
&response&
&& &&&&id&删除品牌id&/ id&
&/response&
实现自动完成功能
本章实现的最后一个效果如图5-6所示。该页面实现的效果对读者并不陌生，我们在著名的搜索网站Google中已经非常熟悉自动完成功能的效果。本例中当用户在文本框中输入待查询的商品名称时，页面中将根据用户输入的文字信息，及时给出提示列表，以帮助用户快速进行选择，该提示信息来源于服务器端数据库中的数据。当用户选择了对应商品名称，单击&搜索&按钮后，将会在文本区域中显示商品相关的描述信息。
首先在Eclipse中新建一个Web项目，项目名称为P56_AutoComplete，对应的浏览器端页面代码如下：
源文件：autoComplete.jsp
&%@ page contentType=&text/charset=UTF-8& language=&java& %&
&HTML&&HEAD&&TITLE&Shopping Online&/TITLE&
&& &&&META http-equiv=Content-Type content=&text/ charset=UTF-8&&
&& &&&LINK href=&images/css.css& type=text/css rel=stylesheet&
图5-6& 自动完成的效果
&script language=&javascript&&
&& &&&var XMLHttpR
&& &&&var completeD
&& &&&var inputF
&& &&&var completeT
&& &&&var completeB
&& &&&&//创建XMLHttpRequest对象&&&&&&
&& &&&function createXMLHttpRequest() {
&& &&&&&&&&&&if(window.XMLHttpRequest) { //Mozilla 浏览器
&& &&&&&&&&&&&&&&&&&XMLHttpReq = new XMLHttpRequest();
&& &&&&&&&&&&}
&& &&&&&&&&&&else if (window.ActiveXObject) { // IE浏览器
&& &&&&&&&&&&&&&&&&&try {
&& &&&&&&&&&&&&&&&&&&&&&&&&XMLHttpReq = new ActiveXObject(&Msxml2.XMLHTTP&);
&& &&&&&&&&&&&&&&&&&} catch(e){
&& &&&&&&&&&&&&&&&&&&&&&&&&try{
&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&XMLHttpReq = new ActiveXObject(&Microsoft.XMLHTTP&);
&& &&&&&&&&&&&&&&&&&&&&&&&&} catch (e) {}
&& &&&&&&&&&&&&&&&&&}
&& &&&&&&&&&&}
&& &//发送匹配请求函数
&& &function findNames() {
&&&&&& &inputField = document.getElementById(&names&);&&&&&&&&&&&
&&&&&& &completeTable = document.getElementById(&complete_table&);
&&&&&& &completeDiv = document.getElementById(&popup&);
&&&&&& &completeBody = document.getElementById(&complete_body&);
&&&&&& &if (inputField.value.length & 0) {
&&&&&& &&&&&&&&createXMLHttpRequest();&&&&&&&&&&&
&&&&&& &&&&&&&&var url = &autoComplete?action=match&names=& + escape(inputField.value);
&&&&&& &&&&&&&&XMLHttpReq.open(&GET&, url, true);
&&&&&& &&&&&&&&XMLHttpReq.onreadystatechange = processMatchR//指定响应函数
&&&&&& &&&&&&&&XMLHttpReq.send(null); // 发送请求
&&&&&& &} else {
&&&&&&&&&&& &&&clearNames();
&&& &// 处理返回匹配信息函数
&&& function processMatchResponse() {
&&& &if (XMLHttpReq.readyState == 4) { // 判断对象状态
&&&&&&& &&&if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
&&&&&&&&&&&&& &&&&&&&&&&&setNames(XMLHttpReq.responseXML.getElementsByTagName(&res&));
&&&&&&&&&&& &&&}else { //页面不正常
&&&&&&&&&&&&&&& &&&&&window.alert(&您所请求的页面有异常。&);
&&&&&&&&&&& &&&}
&&&&&&& &&&}
&&& &//生成与输入内容匹配行
&&&&&&& &&&function setNames(names) {&&&&&&&&&&&
&&&&&&&&&&& &&clearNames();
&&&&&&&&&&& &&var size = names.
&&&&&&&&&&& &&setOffsets();
&&&&&&&&&&& &&var row, cell, txtN
&&&&&&&&&&& &&for (var i = 0; i & i++) {
&&&&&&&&&&&&&&& &&&&var nextNode = names[i].firstChild.
&&&&&&&&&&&&&&& &&&&row = document.createElement(&tr&);
&&&&&&&&&&&&&&& &&&&cell = document.createElement(&td&);
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& &&&&cell.onmouseout = function() {this.className='mouseOver';};
&&&&&&& &&&&&&&&&&&&cell.onmouseover = function() {this.className='mouseOut';};
&&&&&&&&&&&&&&& &&&&cell.setAttribute(&bgcolor&, &#FFFAFA&);
&&&&&&&&&&&&&&& &&&&cell.setAttribute(&border&, &0&);
&&&&&&&&&&&&&&& &&&&cell.onclick = function() { completeField(this); } ;
&&&&&&&&&&&&&&& &&&&txtNode = document.createTextNode(nextNode);
&&&&&&&&&&&&&&& &&&&cell.appendChild(txtNode);
&&&&&&&&&&&&&&& &&&&row.appendChild(cell);
&&&&&&&&&&&&&&& &&&&completeBody.appendChild(row);
&&&&&&&&&&& &&}
&&&&&&& &&&}
&&& &&//设置显示位置& &&&&&&&&&&&&&&
&&&&&&& &&&function setOffsets() {
&&&&&&&&&&& &&&completeTable.style.width = inputField.offsetW + &px&;
&&&&&&&&&&& &&&var left = calculateOffset(inputField, &offsetLeft&);
&&&&&&&&&&& &&&var top = calculateOffset(inputField, &offsetTop&) + inputField. offsetH
&&&&&&&&&&& &&&completeDiv.style.border = &black 1px solid&;
&&&&&&&&&&& &&&completeDiv.style.left = left + &px&;
&&&&&&&&&&& &&&completeDiv.style.top = top + &px&;
&&&&&&& &&&}
&&& &&//计算显示位置
&&& function calculateOffset(field, attr) {
&&&&& var offset = 0;
&&&&& while(field) {
&&&&&& &offset += field[attr];
&&&&&& &field = field.offsetP
&& &//填写输入框
&& &function completeField(cell) {
&&&&&&& inputField.value = cell.firstChild.nodeV
&&&&&&& clearNames();
&&& //清除自动完成行
&& &function clearNames() {
&&&&&&& var ind = completeBody.childNodes.
&&&&&&& for (var i = ind - 1; i &= 0 ; i--) {
&&&&&&&&&&&& &&&completeBody.removeChild(completeBody.childNodes[i]);
&&&&&&& completeDiv.style.border = &none&;
&&& &//搜索请求函数
&& &function search() {
&&&&&&& var sortName = document.getElementById(&names&);
&&&&&&& createXMLHttpRequest();&&&&&&&&&&&
&&&&&&& var url = &autoComplete?action=search&names=& + escape(inputField.value);
&&&&&&& XMLHttpReq.open(&GET&, url, true);
&&&&&&& XMLHttpReq.onreadystatechange = processSearchR//指定响应函数
&&&&&&& XMLHttpReq.send(null); // 发送请求
&&& &// 处理返回匹配信息函数
&&& function processSearchResponse() {
&&& &if (XMLHttpReq.readyState == 4) { // 判断对象状态
&&&&&&& &&&if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
&&&&&&&&&&&&&& &&&&var res=XMLHttpReq.responseXML.getElementsByTagName(&res&);
&&&&&&&&&&&&&& &&&&if (res.length&0){
&&&&&&&&&&&&&& &&&&&&&&&document.getElementById(&content&).value=res[0].firstChild.
&&&&&&&&&&&&&& &&&&}
&&&&&&&&&&& &&}else { //页面不正常
&&&&&&&&&&&&&& &&&&window.alert(&您所请求的页面有异常。&);
&&&&&&&&&&& &&}
&table& style=&BORDER-COLLAPSE: collapse& borderColor=#111111
&&&&&&&&&&& &&&&&cellSpacing=0 cellPadding=2 width=400 bgColor=#f5efe7 border=0&
&&&&&&&& &TD align=middle height=4 colspan=&3&&&IMG height=4
&&&&&&&& src=&images/promo_list_top.gif& width=&100%&
&&&&&&&& border=0&
&&&&&&&&& &/TD&
&&& &&/TR&
&&&&&& &TD align=middle bgColor=#dbc2b0
&&&&&&&&&&&&&&&&&&& &&&height=19 colspan=&3&&&B&商品信息搜索&/B&
&&&&&& &/TD&
&&& &&/TR&
&&&&&&& &&td height=&20&&
&&& &&&&&&&&&&&&&&输入品牌关键字:
&&& &&&&&&&&&&/td&
&&& &&&&&&&&&&td height=&20&&
&&& &&&&&&&&&&&&&&&&&&&&&&input type=&text&& size=&15& id=&names& onkeyup=&findNames();& style=&&&&&&&&&&&&& &&&&&&&&&&height:20;&&
&&& &&&&&&&&&&div style=&position:& id=&popup&&
&&& &&&&&&&&&&&&&&&&&&table id=&complete_table& bgcolor=&#FFFAFA& border=&0& cellspacing=&&& &&&&&&&&&&&&&&&&&&&&&&&&&&0& cellpadding=&0&/&&&&&&&&&&&&
&&& &&&&&&&&&&&&&&&&&&&&&&&&&&tbody id=&complete_body&&&/tbody&
&&& &&&&&&&&&&&&&&&&&&/table&
&&& &&&&&&&&&&/div&
&&& &&&&&&&&&&&/td&
&&& &&&&&&&&&&&td height=&20&&
&&& &&&&&&&&&&&&&&&&&&&&&&&&img src=&images/search.gif& onclick=&search();&&
&&& &&&&&&&&&&&/td&
&&& &&&&&&&td height=&20& valign=&top& align=&center&&
&& &&&&&&&&&&&&&产品描述:
&&& &&&&&&&/td&
&&&&&&& &td id=&pos_1& height=&80&&
&& &&&&&&&&&&&&&&textarea id=&content&&
&& &&&&&&&&&&&&&&/textarea&
&&&&&&& &&&/td&
在该页面中一旦用户开始在文本框中输入待查询商品的名称，即触发&onkeyup&事件，调用&findNames()&函数，在该函数中首先获取到用户已经在文本框中输入的信息，然后借助Ajax提交请求，同时提交文本框中用户已经填写的信息，请求的格式为& autoComplete? action=match&names=& + escape(inputField.value)，可以看到，为了表明请求的类型，使用了参数action，其值为&match&，等待服务器端的处理。当服务器端后续处理完成后，将返回获取到的与用户已输入信息相匹配的信息列表，在Ajax提供的处理函数中调用&setNames(names)&函数以动态方式在页面的对应位置进行显示，在进行显示时还调用了&setOffsets()&函数以及&calculateOffsets()&函数。
此外，当用户录入完待查询的商品名称，单击&搜索&按钮后，将调用&search()&，该函数将首先获取待查询的商品名称信息，然后提交请求，同时提交待查询商品信息到服务器端，请求的格式为& autoComplete?action=search&names=& + escape(inputField.value)，可以看到，为了表明请求的类型，使用了参数action，其值为&search&。等待服务器端的处理。当服务器端后续处理完成后，将调用&processSearchResponse()&函数在对应的文本区域中显示查询的商品描述信息。
该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到，当浏览器端提交&autoComplete&请求时，将由服务器端的类名为&classmate.AutoCompleteAction&的Servlet程序进行处理。
&?xml version=&1.0& encoding=&UTF-8&?&
&web-app version=&2.4&
&&& &xmlns=&/xml/ns/j2ee&
&&& &xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
&&& &xsi:schemaLocation=&/xml/ns/j2ee
&&& &/xml/ns/j2ee/web-app_2_4.xsd&&
&&& &servlet&
&&&&&&& &&servlet-name&ms1&/servlet-name&
&&&&&&& &&servlet-class&classmate.AutoCompleteAction&/servlet-class&
&&& &/servlet&
&& &servlet-mapping&
&&&&&&& &&servlet-name&ms1&/servlet-name&
&&&&&&& &&url-pattern&/autoComplete&/url-pattern&
&&& &/servlet-mapping&
&!-- The Welcome File List --&
& &welcome-file-list&
&&& &welcome-file&autoComplete.jsp&/welcome-file&
& &/welcome-file-list&
&/web-app&
下面我们关注一下服务器端Servlet程序AutoCompleteAction.java中对应的程序代码。当接收到浏览器端提交的请求后，首先获取请求的类型及相关的数据信息，然后借助封装了数据库操作的JavaBean完成数据库的操作，例如：获取候选商品名称信息，或者查询指定商品的描述信息等。
import java.io.IOE
public class AutoCompleteAction extends HttpServlet {
&&&& &public void init(ServletConfig config) throws ServletException {
& &&protected void doGet(HttpServletRequest request, HttpServletResponse response)
&&& throws ServletException, IOException {
&&&& //设置接收信息的字符集
&&& &request.setCharacterEncoding(&UTF-8&);
&&&& //接收浏览器端提交的信息
&&&& &&&&&String action = request.getParameter(&action&);&&&
&&&& &&&&&String name = request.getParameter(&names&);
&&&& &&&&&//设置输出信息的格式及字符集&&&&&&&
&&&&&&& response.setContentType(&text/ charset=UTF-8&);
&&&&&&& response.setHeader(&Cache-Control&, &no-cache&);
&&&&&&& //创建输出流对象
&&&&&&& PrintWriter out = response.getWriter();
&&&&&&& //依据验证结果输出不同的数据信息
&&&&&&& out.println(&&response&&);&&&
&&&&&&& //数据库操作
&&&&&&& DB db = new DB();
&&&& &&&&ResultS
&&&&&&& String strSql=
&&&&&&& //匹配
&&&&&&& if (&match&.equals(action)){
&&&&&&&&&&& &&strSql = &select * from product where name like'& + name + &%'&;
&&&& &&&&rs = db.executeQuery(strSql);
&&&& &&&&try {
&&&& &&&&&&&&&&while(rs.next()) {
&&&& &&&&&&&&&&&&&&&&out.println(&&res&& + rs.getString(&name&) + &&/res&&);
&&&& &&&&&&&&&&}
&&&& &&&&}catch (SQLException e) {
&&&& &&&&&&&&&&e.printStackTrace();
&&&& &&&&}
&&&&&&& else if (&search&.equals(action)){
&&&&&&&&&&& &&strSql = &select contents from product where name ='& + name + &'&;
&&&& &&&&rs = db.executeQuery(strSql);
&&&& &&&&try {
&&&& &&&&&&&&&&if ( rs.next()) {
&&&& &&&&&&&&&&&&&&&&&&out.println(&&res&& + rs.getString(&contents&) + &&/res&&);
&&&& &&&&&&&&&&}
&&&& &&&&}catch (SQLException e) {
&&&& &&&&&&&&&&e.printStackTrace();
&&&& &&&&}
&&&& &&&&out.println(&&/response&&);
&&&& &&&&out.close();
在本例中，完成match类型的请求处理之后，返回的XML文档的格式如下所示：
&response&
&&& &&&res&候选商品名称1&/ res&
&&& &&&res&候选商品名称1&/ res&
&res&候选商品名称1&/ res&
&/response&
完成search类型的请求处理之后，返回的XML文档的格式如下所示：
&response&
&&& &&&res&商品描述信息&/ res&
&/response&
至此，本章相关的案例介绍完毕，通过本章的学习，读者对Ajax的实际应用方式和技巧都应有了一定程度的掌握和理解。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：28053次
排名：千里之外
原创：14篇
转载：13篇
(7)(14)(1)(5)