ajax+servlet实例
PHP+AJAX教程(5)-AJAX MySQL数据库实例
PHP+AJAX教程(5):AJAX MySQL数据库实例AJAX 可用来与数据库进行交互式通信。
AJAX 数据库实例在下面的AJAX 实例中，我们将演示网页如何使用AJAX 技术从MySQL 数据库中读取信息。
在下拉列表中选择一个名字（测试说明：该实例功能未实现）在此列出用户信息。
此列由四个元素组成：MySQL 数据库简单的HTML 表单JavaScriptPHP 页面数据库将在本例中使用的数据库看起来类似这样：idFirstNameLastNameAgeHometownJob1PeterGriffin41QuahogBrewery2LoisGriffin40NewportPiano Teacher3JosephSwanson39QuahogPolice Officer4GlennQuagmire41QuahogPilotHTML 表单上面的例子包含了一个简单的HTML 表单，以及指向JavaScript 的链接：<html><head><script src="selectuser.js"></script></head><body><form> Select a User:<select name="users" onchange="showUser(this.value)"><option value="1">Peter Griffin</option><option value="2">Lois Griffin</option><option value="3">Glenn Quagmire</option><option value="4">JosephSwanson</option></select></form><p><divid="txtHint"><b>User info will be listed here.</b></div></p></body></html>例子解释- HTML 表单正如您看到的，它仅仅是一个简单的HTML 表单，其中带有名为"users" 的下拉列表，okooo澳客网这个列表包含了姓名，以及与数据库的"id" 对应的选项值。
AJAX案例
div 部分用于显示来自服务器的信息。
当按钮被点击时，它负责调用名为loadXMLDoc() 的函数：<html><body><div id="myDiv"><h3>Let AJAX change this text</h3></div><button type="button" onclick="loadXMLDoc()">Change Content</button></body></html>接下来，在页面的 head 部分添加一个 <script> 标签。
该标签中包含了这个loadXMLDoc() 函数：<head><script type="text/javascript">function loadXMLDoc(){.... AJAX script goes here ...}</script></head>AJAX - 创建 XMLHttpRequest 对象∙Previous Page∙Next PageXMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持XMLHttpRequest 对象。
Ajax基础教程
简介本文介绍一种方法，Ajax(Asynchronous JavaScript andXML，提出：Jesse James Garrett)，使用它可以构建更为动态和响应更灵敏的Web应用程序。
Ajax是2005年2月才正式提出的一项综合技术，其主要特点是为Web开发提供异步的数据传输和交换方式，可以在不重载（Reload）刷新（Refresh）界面的情况下与服务器进行数据交换。
该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。
如果使用得当，这种强大的力量可以使应用程序更加自然和响应灵敏（无刷新更新局部页面），从而提升用户的浏览体验。
术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。
在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。
Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。
借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML（是利用CSS(层叠样式表),JavaScript,HTML等技术而建立的能与访问者产生互动的网页）立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。
当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。
最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。
能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。
Google Suggest、Google Maps所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。
Java Web编程实战宝典(JSP+Servlet+Struts 2+Hibernate+Spri
20.2 掌握HQL和SQL技术
20.4 实战练习
21.1 什么是事务
21.3 应用查询缓存 （Query Cache）
21.5 学习过滤器
第3篇 Hibernate篇
21 Hibernate的高级技术
21.2 学习锁（Locking） 21.4 学习拦截器和事件
21.6 小结
第3篇 Hibernate 篇
3.4 其他客户端技术
3.6 学习AJAX技术
第1篇 Web开发基础篇
3.7 小 结
3.8 实 战练习
3 Web开发必会的客户端技 术
4.1 编写Servlet的 Helloworld程序 4.3 掌握
HttpServletResponse类
4.5 处理Cookie
第1篇 Web开发基础篇
4 Java Web的核心技术——Servlet
6.7 实战练习
第2篇 Struts 2篇
02
第2篇 Struts 2篇
7 编写Struts 2第一个程序
10 Struts 2的 类型转换
8 Struts 2进 阶
11 Struts 2的 输入校验
9 Struts 2的 拦截器
12 文件的上传 和下载
第2篇 Struts 2篇
14 Struts 2的标 签库
1.12 实战练习
1.11 小结
第1篇 Web开发基础篇
1 搭建开发环境
1.8 在Eclipse IDE for Java EE Developers中配置 Tomcat
1.9 下载与安装MySQL 5数据库
1.10 下载与安装数据库 客户端软件SQLyog
2.1 Web技术的发展
ajax和struts结合实现无刷新验证用户名是否存在
</td>
</tr>
</table>
</form>
</body>
</html>
structs-config配置:
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
try{
String msgStr="";
response.setContentType("text/xml;charset=GB2312");
*/
/**
* Method execute
* @param mapping
* @param form
* @param request
* @param response
* @return ActionForward
*/
public ActionForward execute(ActionMapping mapping, ActionForm form,
* @struts.action path="/login" name="loginForm" input="/login.jsp" scope="request" validate="true"
*/
public class LoginAction extends Action {
ajax调用java方法
ajax调用java方法ajax调用java后台的方法,其实是通过url链接来访问。
下面是店铺为大家带来一篇ajax调用java方法，希望对大家有所帮助。
ajax调用java方法(一)public void doPost(HttpServletRequest req, HttpServletResponse resp) throwsServletException,java.io.IOException{//得到类名、方法名和参数String methodName=req.getParameter("methodName");String className=req.getParameter("className");Object[] objs=req.getParameterValues("params");Object targetObj;try {targetObj = Class.forName(className).newInstance();Object obj=MethodUtils.invokeMethod(targetObj, methodName, objs);this.dealResp(resp, obj);} catch (InstantiationException e) {e.printStackTrace();} catch (IllegalAccessException e) {e.printStackTrace();} catch (ClassNotFoundException e) {e.printStackTrace();} catch (NoSuchMethodException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}}private void dealResp(HttpServletResponse resp,Object obj) throws IOException{resp.setContentType("text/xml;charset=GBK");PrintWriter pw=resp.getWriter();pw.write(""+deal(obj)+"");pw.flush();pw.close();}private String deal(Object obj){String sbResult="";if(obj==null){sbResult="";}else if(obj instanceof ng.String){sbResult=dealString(obj);}else if(obj instanceof java.util.List){sbResult=dealList(obj);}else if(obj instanceof ng.Boolean){sbResult=dealBoolean(obj);}else if(obj instanceof ng.Double){sbResult=dealDouble(obj);}else if((obj instanceof ng.Integer) || (obj instanceof ng.Long)){sbResult=dealInteger(obj);}else if(obj instanceof ng.Throwable){sbResult=dealException(obj);}else if(obj instanceof java.util.Map){sbResult=dealMap(obj);}else if(obj instanceof java.util.Date){sbResult=dealDate(obj);}else if(obj instanceof java.util.Calendar){sbResult=dealDate(obj);}else if(obj instanceof org.w3c.dom.Document){sbResult=dealXml(obj);}else{sbResult=dealObject(obj);}return sbResult;}//处理Date或Calendar类型，返回值为yyyy-MM-dd-HH-mm-ss-SSS格式的字符串private String dealDate(Object obj){Calendar cal=null;if(obj instanceof Calendar){cal=(Calendar)obj;}else{cal=Calendar.getInstance();cal.setTime((Date)obj);}StringBuffer sb=new StringBuffer();sb.append("");sb.append(cal.get(Calendar.YEAR));sb.append("-");sb.append(cal.get(Calendar.MONTH));sb.append("-");sb.append(cal.get(Calendar.DAY_OF_MONTH));sb.append("-");sb.append(cal.get(Calendar.HOUR_OF_DAY));sb.append("-");sb.append(cal.get(Calendar.MINUTE));sb.append("-");sb.append(cal.get(Calendar.SECOND)); sb.append("-");sb.append(cal.get(LISECOND)); sb.append("");return sb.toString();}private String dealMap(Object obj){ StringBuffer sb=new StringBuffer();Map map=(Map)obj;sb.append("");Set entrys=map.entrySet();Iterator ite=entrys.iterator();Map.Entry entry=null;while(ite.hasNext()){entry=(Map.Entry)ite.next();sb.append("<");sb.append(entry.getKey());sb.append(">");sb.append(deal(entry.getValue()));sb.append(");sb.append(entry.getKey());sb.append(">");}sb.append("");return sb.toString();}ajax调用java方法(二)public class Test {public static String sayHello(String name){ return "hello, " + name;}}注意：必须是公开的静态方法。
基于Ajax的相册
只要给我一点光，我会发出万象光芒本次教程将使用Ajax技术实现无刷新即可浏览图片的相册。
浏览图片时，自动向服务器发送请求，查询该类别下的照片，并显示到客户端。
本次项目使用db2数据库+servelet+ajax的技术，servelet返回XML数据，在js里转化成HTML代码。
一、项目演示由于个人技术有限，这个项目只能在firefox浏览器里正常运行，具体演示效果如下。
当鼠标指到某一幅图片上，图片会放大。
选择类别图片选择区二、创建数据库1、在db2控制中心里创建数据库。
（这里所说的数据库说准确点应该是逻辑数据库，即实例）2、设置数据库相关配置，点击完成。
3、在控制台里运行创建表脚本。
注意要选中要编辑的是刚才创建的TEST数据库。
CREATETABLE ALBUM(ALBUM_ID INTEGER NOT NULL GENERATED ALWAYS AS IDENTITY,ALBUM_NAME VARCHAR(255) NOT NULL,ALBUM_URL VARCHAR(255) NOT NULL,ALBUM_DESC VARCHAR(255) NOT NULL,ALBUM_CATEGORY VARCHAR(32) NOT NULL,ACTIVE_STATUS VARCHAR(4) DEFAULT 'Y' NOT NULL,CONSTRAINT CC1360585827685 PRIMARY KEY (ALBUM_ID) )4、向ALBUM里输入一些数据。
三、创建项目这个就不用细说了，贴出项目的文件目录吧。
四、界面设计1、HTML代码。
在WebRoot下创建show.html。
这时的页面效果如下：2、CSS代码在WebRoot下新建一个css的文件夹，在这个文件夹里创建一个new.css文件，编写css 代码。
这时的页面效果如下：图片显示区域图片放大的css代码。
图片放大的原理是，当鼠标移动到该图片上时，改变图片的大小和位置，从而呈现出放大的动态效果。
jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。
废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。
jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。
语法形如"url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件，例如表单。
示例代码：$(".ajax.load").load("/yeer/archive/2009/06/10/ 1500682.html .post",function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]//alert(responseText);//请求返回的内容//alert(textStatus);//请求状态：success，error//alert(XMLHttpRequest);//XMLHttpRequest对象});这里将显示结果。
jQuery AJAX和JSON例子
基于jQuery的AJAX和JSON的实例通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。
我们先来看一下html模板：<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"><tr><th>订单ID</th><th>客户ID</th><th>雇员ID</th><th>订购日期</th><th>发货日期</th><th>货主名称</th><th>货主地址</th><th>货主城市</th><th>更多信息</th></tr><tr id="template"><td id="OrderID"></td><td id="CustomerID"></td><td id="EmployeeID"></td><td id="OrderDate"></td><td id="ShippedDate"></td><td id="ShippedName"></td><td id="ShippedAddress"></td><td id="ShippedCity"></td><td id="more"></td></tr></table>一定要注意的就是里面所有的id属性，这个是一个关键。
解决拦截器对ajax请求的拦截实例详解
解决拦截器对ajax请求的拦截实例详解解决拦截器对ajax请求的的拦截拦截器配置：public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object obj) throws Exception {//获取判定登陆的session是否存在String token = (String) request.getSession().getAttribute("token");String postId = (String) request.getSession().getAttribute("postId");if(token == null || token == ""){String XRequested =request.getHeader("X-Requested-With");if("XMLHttpRequest".equals(XRequested)){response.getWriter().write("IsAjax");}else{response.sendRedirect("/m-web/user/toLogin");}return false;}if(postId == null || postId == ""){String XRequested =request.getHeader("X-Requested-With");if("XMLHttpRequest".equals(XRequested)){response.getWriter().write("IsAjax");}else{response.sendRedirect("/m-web/user/toLogin");}return false;}return true;}1、判断 String XRequested =request.getHeader("X-Requested-With") 的值，⽬的是判断是否是ajax请求。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一、用户注册的JSP页面<%@ page contentType="text/html;charset=UTF-8" language="java" %><head><META http-equiv=Content-Type content="text/html; charset=UTF-8"></head><script language="javascript">varXMLHttpReq;//创建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 = newActiveXObject("Microsoft.XMLHTTP");} catch (e) {}}}}//发送请求函数function sendRequest(url) {createXMLHttpRequest();XMLHttpReq.open("GET", url, true);XMLHttpReq.onreadystatechange = processResponse;//指定响应函数XMLHttpReq.send(null); // 发送请求}// 处理返回信息函数function processResponse() {if (XMLHttpReq.readyState == 4) { // 判断对象状态if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data; window.alert(res);} else { //页面不正常window.alert("您所请求的页面有异常。
");}}}// 注册函数function signUp() {varuname = document.myform.uname.value;varpsw = document.myform.psw.value;var psw2 = document.myform.psw2.value;if(uname=="") {window.alert("用户名不能为空。
");document.myform.uname.focus();return false;}else if(psw!=psw2) {window.alert("两次输入密码不同。
");document.myform.psw.focus();return false;}else {sendRequest('signUp?uname='+ uname + '&psw=' + psw);}}</script><body vLink="#006666" link="#003366" bgColor="#E0F0F8"><img height="33" src="enter.gif" width="148"><form action="" method="post" name="myform">用户名：<input size="15" name="uname"><p>密 码：<input type="password" size="15" name="psw"><p>重输密码：<input type="password" size="20" name="psw2"><p><input type="button" value="注册" onclick="signUp()" ></form></body>运行图：二、处理AJAX请求的servletpackage classmate;import java.io.IOException;import java.io.PrintWriter;import java.sql.ResultSet;import java.sql.SQLException;import javax.servlet.ServletConfig;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class SignUpAction extends HttpServlet {public void init(ServletConfigconfig) throws ServletException {}/** 处理请求方法.*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//设置接收信息的字符集request.setCharacterEncoding("UTF-8");//接收浏览器端提交的信息String uname = request.getParameter("uname");String psw = request.getParameter("psw");//设置输出信息的格式及字符集response.setContentType("text/xml; charset=UTF-8");response.setHeader("Cache-Control", "no-cache");//创建输出流对象PrintWriter out = response.getWriter();//依据验证结果输出不同的数据信息out.println("");//数据库操作DB db = new DB();ResultSetrs;intinsRes = 0;String strSql=null;//判断用户名是否重复strSql = "select * from classuser where username='"+ uname + "'";rs = db.executeQuery(strSql);booleanbnoRepeat = false;try {if ( !rs.next()) {bnoRepeat = true;}} catch (SQLException e) {e.printStackTrace();}//用户名不重复,插入记录if (bnoRepeat){strSql = "Insert Into classuser values('"+ uname + "','" + psw + "')";insRes = db. executeUpdate(strSql);}if(!bnoRepeat){out.println("" + "注册失败!用户名已存在，重新输入用户名" + "");}else if(insRes>0){out.println("" + "注册成功！" + "");}else{out.println("" + "注册失败！" + "");}out.println("");out.close();}}三、数据库操作类：package classmate;import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;public class DB {Connection connect = null;ResultSetrs = null;public DB() {try {Class.forName("org.gjt.mm.mysql.Driver"); //设置驱动程序类型}catch(ng.ClassNotFoundException e) {e.printStackTrace();}}//执行查询语句的方法public ResultSetexecuteQuery(String sql) {try {//建立与数据库服务器的连接onnect = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test1", "root", ""); tatementstmt =connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);rs = stmt.executeQuery(sql);//执行指定的数据查询语句}catch(SQLException ex) {ex.printStackTrace();}return rs;}//执行增、删改语句的方法public intexecuteUpdate(String sql) {int result = 0;try {connect =DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test1", "root", "");Statement stmt = connect.createStatement();result = stmt.executeUpdate(sql);//执行指定的数据操作语句}catch(SQLException ex) {System.err.println(ex.getMessage());}return result;}//关闭数据库连接的方法public void close(){if(connect!=null){try{connect.close();connect = null;}catch(SQLException ex) {System.err.println(ex.getMessage());}}}}四、web.xml文件中配置servlet<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4"xmlns="/xml/ns/j2ee"xmlns:xsi="/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.SignUpAction</servlet-class></servlet><servlet-mapping><servlet-name>ms1</servlet-name><url-pattern>/signUp</url-pattern></servlet-mapping><!-- The Welcome File List --><welcome-file-list><welcome-file>signUp.jsp</welcome-file></welcome-file-list></web-app>。