1、JavaScript代码
var req; /*通过异步传输XMLHTTP发送参数到ajaxServlet,返回符合条件的XML文档*/ var url; function getResult() { var f=document.getElementById("form_pub"); var key=f.s.options[f.s.selectedIndex].text; //获取对select中文本的引用 if (window.XMLHttpRequest) { req = new XMLHttpRequest(); url = "ajaxServlet?action="+key+"&bm=UTF-8"; }else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); url = "ajaxServlet?action="+key+"&bm=gbk"; } if(req) { req.open("GET",url, true); req.setRequestHeader("Content-Type", "text/html;charset=UTF-8"); //这里如果不设定头部则会导致 firfox 发送数据错误,servlet接受到的参数为乱码,在IE中正常 req.onreadystatechange = complete; req.send(null); //req.setRequestHeader("Content-Type", "text/xml; charset=UTF-8"); } } /*分析返回的XML文档*/ function complete(){ if (req.readyState == 4) { if (req.status == 200) { var items=document.getElementById("belong"); //以下为解析返回的XML文档 var xmlDoc = req.responseXML; var Node=xmlDoc.getElementsByTagName("type_name"); //var str=new Array(); var str=null; //清空工作 items.innerHTML=""; //删除一个 select内的全部内容 for(var i=0;i<Node.length;i++) { str=Node[i]; //alert(str.childNodes[0].nodeValue); var objectOption=document.createElement("option"); items.options.add(objectOption); //firfox不支持innerText必须用textContent代替 if (window.ActiveXObject) {objectOption.innerText=str.childNodes[0].nodeValue;} else {objectOption.textContent=str.childNodes[0].nodeValue;} } } } }
2、Servlet代码
package ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import Data_GetConn.GetConn;//这个包是自己写的为获取对mysql的引用 import java.sql.*;//这个包必须有!! public class ajaxServlet extends HttpServlet{ //private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";//这里最好统一用UTF-8进行编码 public void init() throws ServletException{} public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/xml; charset=UTF-8"); //以下两句为取消在本地的缓存 response.setHeader("Cache-Control", "no-cache"); response.setHeader("Pragma", "no-cache"); PrintWriter out = response.getWriter(); String action = request.getParameter("action"); String bm = request.getParameter("bm"); if(("gbk").equals(bm)) { action=new String(action.getBytes("ISO-8859-1"),"gbk");//将获得的数据用gbk从新编码!(感谢董卫老师) } else { action=new String(action.getBytes("ISO-8859-1"),"gbk"); } try { GetConn wq=new GetConn(); Connection con=wq.getCon(); Statement stmt=con.createStatement(); ResultSet rs=stmt.executeQuery("select items from class where main='"+action+"'"); StringBuffer sb = new StringBuffer(); sb.append("<type>"); while(rs.next()) { sb.append("<type_name>"+rs.getString(1)+"</type_name>"); } //sb.append("<type_name>"+action+"</type_name>"); sb.append("</type>"); out.write(sb.toString());//注意这里向jsp输出的流,在script中的截获方法 out.close(); stmt.close(); con.close(); } catch(Exception ex) { } } }
相关推荐
6. **Ajax与Servlet交互的优势**: - **用户体验**:通过异步交互,用户无需等待整个页面刷新,提升了交互体验。 - **资源利用**:仅加载必要的数据,减少了网络带宽消耗和服务器负载。 7. **注意事项**: - **...
在Web开发中,AJAX(Asynchronous JavaScript and XML)和Servlet是两种关键的技术,它们共同构建了动态、交互性强的Web应用程序。这个入门实例将向我们展示如何利用AJAX与Servlet实现用户注册功能,从而提升用户...
在这个实例中,我们将深入探讨如何使用Ajax与Servlet结合,以实现更高效、更流畅的用户界面。 ### 1. 创建Ajax请求 在Ajax中,我们通常使用JavaScript的XMLHttpRequest对象或其现代版本——fetch API来发送请求。...
AJAX+servlet实例入门 AJAX+servlet实例入门是指通过结合AJAX技术和Servlet实现的Web应用程序。...通过这个实例,开发者可以学习如何使用AJAX和Servlet来实现异步交互、响应速度快、复杂UI的成功处理等功能。
在Web开发中,Ajax(Asynchronous JavaScript and XML)与Servlet是两种非常重要的技术。Ajax允许在不刷新整个页面的情况下,实现局部数据的异步更新,极大地提升了用户体验。Servlet则是Java Web开发中的服务器端...
下面将详细解释Ajax与Servlet交互的原理和具体实现。 Ajax的核心是JavaScript,它允许在后台与服务器进行通信,而无需刷新整个网页。在给出的实例中,Ajax通过XMLHttpRequest对象与Servlet进行数据交换。以下是对...
AJAX(Asynchronous JavaScript and XML)与Servlet技术的结合,是Web开发中实现异步数据交互的重要手段。AJAX允许Web应用在不刷新整个页面的情况下,与服务器进行数据交换,提高了用户体验。本教程将带你入门AJAX和...
在IT行业中,Ajax(Asynchronous JavaScript and XML)与Servlet的结合使用是构建高效、交互性强的Web应用程序的关键技术。这个实例“Ajax与servlet免刷新验证”主要展示了如何利用Ajax实现用户输入数据的实时验证,...
在这个"JSON Servlet实例 Ajax应用"中,我们将探讨如何使用Servlet与客户端进行JSON数据交互,并结合Ajax实现异步通信。 首先,了解JSON的基本结构至关重要。JSON由键值对组成,键必须是字符串,且用双引号包围,值...
在本示例中,我们将探讨Servlet如何与Ajax进行数据交互,从而实现无刷新页面更新。 首先,让我们了解一下Servlet的工作原理。当用户通过浏览器发送一个HTTP请求到服务器时,Servlet容器(如Tomcat)会捕获这个请求...
这个实例源码主要展示了如何在Web开发中利用jQuery库进行AJAX异步请求,与后台Servlet进行数据交互,并通过JSON格式来序列化和反序列化数据。这些技术是现代Web应用中常见的组件,对于前端与后端通信至关重要。 ...
**Ajax技术** Ajax,全称为Asynchronous JavaScript and XML(异步...通过这个Ajax实例,我们可以学习到如何结合使用这些技术来构建一个动态、交互式的Web应用,提高用户体验,同时减少服务器与客户端之间的通信开销。
总之,"Eclipse平台下的Servlet AJAX代码实例"是一个很好的学习资源,它展示了如何在JSP页面中集成Servlet和AJAX技术,实现动态交互的Web应用。通过实践这个项目,开发者可以深入理解这两种技术的工作原理,提升Web...
**正文** 本项目是关于构建一个使用JSP、Ajax和Servlet技术实现的自动完成搜索功能,类似于谷歌或百度搜索引擎...这个项目不仅展示了JSP、Ajax和Servlet的综合应用,还强调了与数据库的交互以及前端与后端的通信方式。
在本"Ajax网站开发典型实例JSP源码包"中,我们可以深入学习如何使用Ajax与JavaServer Pages (JSP) 结合,创建高效动态的Web应用。 1. **Ajax基础** Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在...
虽然js.html是一个纯静态的页面,但是以下的程序必须挂在Tomcat服务器上,才能做到Ajax交互,否则看不出效果的。 Eclipse for javaee注意把做好的工程挂在Tomcat上,才运行Tomcat。 本工程除了JSP必须的Servlet包...
8. **异步处理**:Ajax的异步特性意味着用户可以在请求处理期间继续与页面交互,提高了用户体验。 9. **jQuery和现代库**:虽然可以使用原生XMLHttpRequest对象,但使用jQuery等库可以简化Ajax代码,提供更高级的...
本主题将深入探讨Ajax与Java后台交互的核心概念和技术。 一、Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信。当用户触发一个事件(如点击按钮),JavaScript会创建一个...
本示例“ajax调用servlet_test_可以运行的例子”提供了一个完整的工程,它演示了如何利用Ajax异步地与Servlet进行交互,从而提高用户体验。这个项目基于JDK5.0环境,确保了兼容性和可运行性。 首先,让我们深入理解...