Jsp数据库二级联动原理利用AJAX访问servlet来完成
数据库二级联动构思:利用AJAX访问servlet来完成
* 第一、父级列表由页面初始完成
* 并加上onchange="javascript:getData(this.value)"事件
* 注意：getData(obj)为AJAX访问servlet函数，具体见代码jslib/linkage.js
* 第二、在servlet中返回数据时，要求采用XML,如：
Java代码
复制代码
1.
2.String id = request.getParameter("id");
3. String str = "";
4. str = str + "
5. String name = "";
6. if (id.trim().equals("1")){
7. name = "项目A";
8. } else if (id.trim().equals("2")){
9. name = "项目B";
10. }else if (id.trim().equals("3")){
11. name = "项目C";
12. }
13. for (int i = 0; i < 10; i++) {
14. //数据可以从数据库中读取
15. str = str + " + "\"/>"; 16. } 17. str = str + ""; 18. out.println(str); 19. * 第三、在获取服务器返回有数据时，利用DOM重新设置子列表的所有内容 Javascript代码 复制代码 1.var messageNode = domObj.selectNodes("/Results"); 2. var spanNode = document.getElementById("data");//用于存入列表的 span元素 3. var strText = "" 19. //alert(strText); 20. // alert("源内容：" + spanNode.innerHTML); 21. spanNode.innerHTML = strText; 注：也可以加入事件onchange=\"javascript:show(this)，以响应联动出来的列表，可以处理用户的鼠标事件 复制代码 1.//这个方法将使用XMLHTTPRequest对象来进行AJA X的异步数据交互 2.var xmlhttp; 3.function getDataById(id) { 4.// alert("进入AJAX调用函数中"); 5. //1、使用dom的方式获取文本框中的值 6. // document.getElementById("userName")是dom中获 取元素节点的一种方法， 7. //一个元素节点对应HTML页面中的一个标签 ut> 8. // .value可以获取一个元素节点的value属性值 9.// var userName = document.getElementById("userNa me").value; 10. 11. 12. //2.创建XMLHTTPRquest对象 13. //这是XMLHTTPRquest对象五步使用中最复杂的一 步 14. //需要针对IE和其它类的浏览器建立这个对象的不 同方式写不同的代码 15. 16. if (window.XMLHttpRequest) { 17. //针对FireFox, Mozillar, Opera, Safari, IE7, IE8 18. xmlhttp = new XMLHttpRequest(); 19. //针对某些特定版本的mozillar浏览器的BUG进 行修正 20. if (xmlhttp.overrideMimeType) { 21. xmlhttp.overrideMimeType("text/xml"); 22. } 23. } else if (window.ActiveXObject) { 24. //针对IE6，IE5.5, IE5 25. //两个可以用于创建XMLHTTPRequest对象的控 件名称，保存在一个js的数组趾 26. //用前面的版本较新 27. var activexName = ["MSXML2.XMLHTTP", "Mi crosoft.XMLHTTP"]; 28. for (var i = 0; i < activexName.length; i++) { 29. try { 30.//取出一个控件名称进行创建，如果创建成功 就终止循环 31.//如果创建失败，会抛出异常，然后可以继续 循环，继续尝试创建 32.xmlhttp = new ActiveXObject(activexName [i]); 33. } catch (e) { 34. } 35. } 36. } 37. 38. //确认XMLHTTPRequest对象创建成功 39. if (!xmlhttp) { 40. alert("XMLHttpRequest对象创建失败！！"); 41. return; 42. } else { 43.//alert(xmlhttp); 44. } 45. 46. //3、注册回调函数 47. //注册回调函数时，需要函数名，不要加括号 48. //我们需要将函数名注册，如果加上括号，就会把函 数的返回值注册上，这是错误的。 49. //onreadystatechange为注册回调方法，是保证数据回 来以后，可以找到一个方法去执行 50. xmlhttp.onreadystatechange = callback; 51. 52. //4、设置连接信息 53. //open：设置与服务器端连接的信息： 54. // 第一个参数表示HTTP的请求方式，支持所有HT TP的请求方式，主要使用GET/POST 55. // 第二个参数表示请求的URL地址，GET方式请求 的参数也在URL中 56. // 第三个参数表示采用异步还是采同步试交互，true 表示异步 57. //xmlhttp.open("GET", "AJAXServer?name=" + user Name,true); 58. 59. //POST方式请求的代码 60. xmlhttp.open("POST", "servlet/test", true); 61. //POST方式需要自己设置HTTP的请求头 62. //xmlhttp.setRequestHeader:设置请求头 63.xmlhttp.setRequestHeader("Content-Type", "application /x-www-form-urlencoded"); 64. //POST方式发送数据 65. //alert(userName); 66. xmlhttp.send("id=" + id); 67. 68. //5、发送数据，开始和服务器端进行交互 69. //同步方式下，send这句话会在服务器端数据回来后 才执行完 70. //异步方式下，send这句话会立即完成执行 71. //send参数：如果GET方式为null，因为参数已经在 URL中了，如果是POST方式，则为参数值 72. //xmlhttp.send(null); //GET方式 73.} 74. 75.function callback(){ 76. //6、接收响应数据 77.//判断对象的状态是交互完成 78. //readyState状态为5种： 79. //readyState共有5个状态，实际上HTTP刚建立好 的状态是0 80. //然后随着不断设置信息并和服务器进行交互，他 的readyState 81. //的状态是不断的变化的，每次readyState变化， 82. //都会去执行onreadystatechange所指定的方法 83. //--0:表示请求还没有发出去。 84. //--1:表示open方法成功调用以后，正在处理中 85. //--2:表示服务器已经应答客户端的请求 86. //--3:交互中，Http头信息已经接收，响应数据尚未 接收 87. //--4:表示请求服务器端的返回已经回到客户端了 88. 89. if(xmlhttp.readyState == 4) { 90. //判断HTTP协议的交互是否成功 91. //200表示正常 92. //status:服务器返回状态码。200表示“成功”，404 表示“未找到” 93. if (xmlhttp.status == 200) { 94. //获取服务器端返回的数据 95. //两种获取方法(纯文本和XML格式） 96. //reponseText:服务器返回的文本内容 97. //responseXML:的方式来接收XML数据对象的 DOM对象 98. var domObj = xmlhttp.responseXML; 99. //DOM对于操作HTML和XML的API是通用 的。 100. // 101. //dom中利用getElementsByTagName可以根据标签名来获取元素节点,可能会取得多个元素，所以返回是一个数组 102. var messageNode = domObj.selectNodes("/Resu lts"); 103. //alert("根节点数：" + messageNode.length); 104. 105.var spanNode = document.getElementById("da ta"); 106.var strText = " 107.strText += " 108. 109. if (messageNode.length > 0){ 110. var subItem = messageNode[0].childNodes; 111. for(i=0;i 112. var item = subItem.item(i);//获取集合中的某一个元素对象 113. var strTemp = ""; 118. strText += strTemp 119. } 120. } 121. 122. strText += "" 123. //alert(strText); 124. // alert("源内容：" + spanNode.innerHTML); 125. spanNode.innerHTML = strText; 126. /* 127. if (messageNode.length > 0) { 128. //获取message节点中的文本内容 129. //message标签中的文本在DOM中是messag e标签所对应的元素节点的字节点， 130. //firstChild可以获取到当前节点的第一个节 点 131. //通过以下方式就可以获取到文本内容所对应的节点 132.var textNode = messageNode[0].firstChild; 133. //对于文本节点来说，可能通过nodeValue 的方式返回文本节点的文本内容。 134.var responseMessage = textNode.nodeValue; / /获取message标签的元素节点 135. 136.// statusText:服务器返回状态码的文本信息137. 138. //将数据显示在页面上 139. //通过DOM的方式找到div标签所对应的元素节点 140.var divNode = document.getElementById("res ult"); 141.//设置元素节点中的HTML内容 142. divNode.innerHTML = responseMessage; 143. } else { 144. alert("XML数据格式错误，原始文本内容为：" + xmlhttp.responseText) 145. } 146. */ 147. } else { 148. alert("出错了……"); 149. } 150. } 151.} 实验2：运用JSP编写动态网页 一．选题问题 1）编写一个购物车，实现向购物车里添加商品、移除指定商品和清空购物车的功能 2）延续实验一 二．程序设计 1.功能 1）购物车：可以实现向购物车里添加指定商品，移除指定商品，清空购物车的基本功能，另外还可以实现简单的结算功能。 2）实验一延续：实现登录、以及同一用户不能重复登录的功能 2.技术 1）必用技术： JSP内置对象：Request，Response 2）选用技术： JSP、JavaScript：Session，application 三．数据设计 1.含义 1）购物车： 1>goods.html:用来显示商品清单，选择购买数量，以及添加到购物车 2>cart.jsp:用来查看添加到购物车的商品，实现商品的删除，以及返回购物页面继续添加或者跳转到结算页面支付。使用了request获得信息，session创建表单，调用了自创建的hzsb类。 3>hzsb.jsp:定义了一个“汉子识别”的类，该类可以把从页面中获取的汉子自动转换成单字节编码，并在显示时再转换回来。 4>cost.jsp:结算页面。负责将购物车里所有的商品及数量显示出来并且进行统计，得到总计钱数。使用了request获得信息，session创建表单，调用hzsb类。 2）实验一添加功能 1>web.html:显示实验一中的页面，其中“登录”超链接到index.jsp；“注册”超链接到count.jsp。 2>index.jsp：登录页面。用于用户名和密码的输入，输入完成后点击“确定”，可以跳转到rsInfo.jsp页面查看所输入的信息是否保存。 3>rsInfo.jsp:查看页面。该页面用于显示所输入的信息。另外该页面调用了response对象，用于显示当前的时间，并用于页面的刷新。 4>count.jsp:“同一用户只能登录一次页面”，即用户一旦登录就不能够通过反复刷新页面造成“多次登录”的假象。该页面调用了application对象，用于覆盖掉刷新的次数。 2.作用范围 1）购物车 1>goods.html: 作用于“购物车实例”页面，代码如下 JSP(JavaServer Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。 用JSP开发的Web应用是跨平台的，即能在Linux下运行，也能在其他操作系统上运行。 JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。 Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序段，然后将执行结果连同JSP文件中的HTML代码一起返回给客户。插入的Java程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。 JSP与Java Servlet一样，是在服务器端执行的，通常返回该客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。 JSP的1.0规范的最后版本是1999年9月推出的，12月又推出了1.1规范。目前较新的是JSP1.2规范，JSP2.0规范的征求意见稿也已出台。 JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理，然后将生成的HTML页面返回给客户端的浏览器。Java Servlet 是JSP的技术基础，而且大型的Web应用程序的开发需要Java Servlet和JSP配合才能完成。JSP具备了Java技术的简单易用，完全的面向对象，具有平台无关性且安全可靠，主要面向因特网的所有特点。 1．JSP技术的强势 （1）一次编写，到处运行。在这一点上Java比PHP更出色，除了系统之外，代码不用做任何更改。 （2）系统的多平台支持。基本上可以在所有平台上的任意环境中开发，在任意环境中进行系统部署，在任意环境中扩展。相比ASP/PHP的局限性是现而易见的。 （3）强大的可伸缩性。从只有一个小的Jar文件就可以运行Servlet/JSP，到由多台服务器进行集群和负载均衡，到多台Application进行事务处理，消息处理，一台服务器到无数台服务器，Java显示了一个巨大的生命力。 （4）多样化和功能强大的开发工具支持。这一点与ASP很像，Java已经有了许多非常优秀的开发工具，而且许多可以免费得到，并且其中许多已经可以顺利 第一章JSP技术基础习题 一、选择题 1．当用户请求jsp页面时，JSP引擎就会执行该页面的字节码文件响应客户的请求，执行字 节码文件的结果是（C） A）发送一个JSP源文件到客户端 B）发送一个Java文件到客户端 C）发送一个HTML页面到客户端 D）什么都不做。 2．当多个用户请求同一个JSP页面时，Tomcat服务器为每个客户启动一个（B）A）进程B）线程C）程序D服务。 3．下列动态网页和静态网页的根本区别描述错误的是。（D） A）静态网页服务器端返回的HTML文件是事先存储好的 B）动态网页服务器端返回的HTML文件是程序生成的。 C）静态网页文件里只有HTML标记，没有程序代码。 D）动态网页中只有程序，不能有HTML代码。 4．不是JSP运行必须的是（D） A）操作系统 B）JavaJDK C）支持Jsp的Web服务器 D）数据库 5．URL是Internet中资源的命名机制，URL由三部分构成。（A） A）协议、主机DNS名或IP地址和文件名 B）主机、DNS名或IP地址和文件名、协议 C）协议、文件名、主机名 D）协议、文件名、IP地址 6．下列说法哪一项是正确的（C） A）Apache用于ASP技术所开发网站的服务器 B）IIS用于CGI技术所开发网站的服务器 C）Tomcat用于JSP技术所开发网站的服务器 D）WebLogic用于PHP技术所开发网站的服务器 7．Tomcat服务器的默认端口号是：（B） A）80 B）8080 C）21 D）2121 二、判断题 1．动态网页和静态网页的根本区别在于服务器端返回的HTML文件是事先存储好的还是由动态网页程序生成的。（对） 2．Internet和intranet的含义意义相同。（错） 3．互联网起源于美国国防部高级研究计划管理局建立的ARPA网。（对） 4．Web开发技术包括客户端和服务器端的技术。（对） 5．Tomcat和JDK都不是开源的。（错） 三、填空题 1．W3C是指__万维网联盟_____________。 2．Internet采用的通信协议是______TCP/IP________。 3．IP地址用四组由圆点分割的数字表示，其中每一组数字都在__0~254____________之间。 4．当今比较流行的技术研发模式是____C/S______和____B/S________的体系结构来实现的。 5．Web应用中的每一次信息交换都要涉及到______服务器_______和_______客户端_______两个层面。 6．静态网页文件里只有___HTML标记___________，没有程序代码。 四、思考题 1．为什么要为JDK设置环境变量？ 2．Tomcat和JDK是什么关系？ 3．什么是Web服务根目录、子目录、相对目录？如何配置虚拟目录？ 4．什么是B/S模式？ 5．JSP、JavaBeans和JavaServlet之间的关系? 6．集成开发环境能为程序员做什么？ 7．使用MyEclipse开发JSP程序，需要做那些配置？ 8．MyEclipse和Eclipse的关系？ 美文管理系统 班级: : 指导教师: 学号: 姓名: 一、主要功能 这个小项目实现了前台用户插入美文和后台站长浏览并回复或删除美文的功能。在用户插入美文的时候，可以使用本项目提供的在线编辑器来插入自己所想插入的不同格式。此外，用户还可在前台浏览项目中的文章，选择想去的页码或单击下一页、上一页、首页、尾页等底部功能键可以欣赏到数据库中的不同文章。管理员可以在后台简易浏览项目中所存在的各种文章的标题，并可选择想要回复的文章作者给予相应的回复。 二、技术描述 三、数据库信息 四、主要代码 1、插入文章页面 jsp动态网页实用代码
JSP简介
第一章 JSP技术基础习题
JSP动态页面项目书