AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。
这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
现在来看一下3个常用的ajax方法
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。是一个json格式的数据。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
看一个获取服务端时间的例子
jsp：
<script type="text/javascript" src="${basePath }/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ $(":button").click(function(){ var url = "${basePath}/timeServlet"; //最简单的ajax, 默认以get方式提交, 返回值自动填充到标签中 $("#time").load(url); }); }); </script> </head> <body> 当前时间：<span id="time"></span><br> <input type="button" value="获取时间"> </body>
页面是这样的：
其中basePath是这样的：
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <% pageContext.setAttribute("basePath", path); %>
servlet：
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { SimpleDateFormat sdf = new SimpleDateFormat("hh:mm:ss"); String formatTime = sdf.format(new Date()); PrintWriter pw = response.getWriter(); pw.println(formatTime); pw.flush(); pw.close(); }
这样就完成了一个最简单的ajax，如果有第2个参数data，提交方式就是post，否则就是get。
看一下效果，点击获取时间就可以获取到服务端的时间：
后2个参数怎么使用，别急，下面在$.post中讲解
定义和用法
post() 方法通过 HTTP POST 请求从服务器载入数据。
语法
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
| 参数 | 描述 |
| url | 必需。规定把请求发送到哪个 URL。 |
| data | 可选。映射或字符串值。规定连同请求发送到服务器的数据。 |
| success(data, textStatus, jqXHR) | 可选。请求成功时执行的回调函数。 |
| dataType | 可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。 |
看一个判断登录的例子来了解它的用法，这个例子通过验证登录然后返回一个图片的路径，如果输入正确，如果输入正确，则图片显示一个对号，否则显示一个叉：
jsp：
<script type="text/javascript"> $(function(){ $(":button").click(function(){ var url = "${basePath}/userServlet"; //先用servlet来做 //var url = "${basePath}/user_login.action"; //然后用struts2来做 var username = $(":text").val(); var password = $(":password").val(); var data_servlet = {"username" : username, "password" : password}; var data_struts2 = {"user.username" : username, "user.password" : password}; //先测试servlet, 测试struts2的时候将第2个data参数改为data_struts2即可 $.post(url, data_servlet, function(data, statusTxt, jqXHR){ alert("data-=-"+data); alert("data.src-=-="+data.src); alert("statusTxt-=-"+statusTxt); alert("jqXHR.status-=-"+jqXHR.status); //状态码, 如200 alert("jqXHR.readyState-=-"+jqXHR.readyState);//请求执行的状态, 如4 alert("jqXHR.statusText-=-"+jqXHR.statusText); //状态字符串, 如ok alert("jqXHR.responseText-=-"+jqXHR.responseText);//返回的字符串值 alert("jqXHR.responseXML-=-"+jqXHR.responseXML);//返回的XML数据 $("img").attr("src", '${basePath}'+data);//返回的字符串 //$("img").attr("src", '${basePath}'+data.src); //返回的是json数据 }); }); }); </script> </head> <body> <form> 用户名<input type="text"><br> 密码<input type="password"><br> <input type="button" value="点我验证"> <img> </form> </body>
页面是这样的：
先看用servlet做的：
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String username = request.getParameter("username"); String password = request.getParameter("password"); //从数据库查询 User user = userDao.findByUsernameAndPassword(username, password); System.out.println(user); PrintWriter pw = response.getWriter(); if(user != null) pw.println("/images/icon/Button_Ok_64px_1070400_easyicon.net.ico"); else pw.println("/images/icon/Button_Delete_64px_1070396_easyicon.net.ico"); pw.flush(); pw.close(); }
看一下效果：
如果输入正确，显示如下：
如果输入错误，显示如下：
通过jqXHR.responseText可以看到返回的是一个字符串，字符串不需要解析。接下来看一下struts2的ajax
先做web.xml中配置struts2的过滤器：
<filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*.action</url-pattern> </filter-mapping>
struts2配置文件struts.xml，放到src下：
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <constant name="struts.action.extension" value="action" /> <!-- 设置struts访问后缀为action --> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <!-- 禁止动态方法访问 --> <package name="user-action" namespace="/" extends="json-default"> <!-- json-default是继承自struts-default的 --> <action name="user_login" class="top.bwcx.ajax.user.UserAction"> <result type="json" /><!-- 无需跳转页面 --> </action> </package> </struts>
struts2的ajax需要struts2-json-plugin.jar插件包的支持
这里是通过c3p0连接数据库, dbutils操作数据库的，有关这方面的内容，请参看我以前的随笔c3p0连接数据库的3种方式和dbutils基本使用
action中的配置:
public class UserAction extends ActionSupport { //这里为了简单, 就直接写了一个dao, service什么的没有写 private UserDao userDao = new UserDao(); //User实体类，用来接收页面传过来的值,需要get和set方法, 很重要 private User user; //用get方法返回值, 然后在页面取的, 这个需要get方法 private String src; @Override public String execute() throws Exception { System.out.println(user.getUsername()); System.out.println(user.getPassword()); user = userDao.findByUsernameAndPassword(user.getUsername(), user.getPassword()); System.out.println(user); if(user == null){ src = "/images/icon/Button_Delete_64px_1070396_easyicon.net.ico"; }else src = "/images/icon/Button_Ok_64px_1070400_easyicon.net.ico"; return SUCCESS; }
public void setUser(User user) { this.user = user; } public User getUser() { return user; } public String getSrc() { return src; } }
ajax请求struts，是在action页面通过get方法传递响应的，此处就是src属性加上其get方法就能把图片路径返回了，返回格式是json串
在页面接收时，注意把传递的参数改为data_struts2，url也改一下，直接像这样解析json就行了：data.src
效果与刚才servlet的效果是一样的，也可以看一下打印的属性值，如：
其实收集表单项的值还有一种简单的方法，像这样
var params = $("form").serialize();
不过这样需要提供name属性值
$.get()和$.post()是类似的，接下来看一下$.ajax()
$.ajax()这个参数很多，常用的有这么几个：
type: 提交方式，get或post
url: 请求路径
data: 请求参数
success: 执行成功后所调用的函数
把这个登陆验证用这个改一下：
jsp改为：
<form> 用户名<input type="text" name="user.username"><br> 密码<input type="password" name="user.password"><br> <input type="button" value="点我验证"> <img> </form>
js代码改为：
<script type="text/javascript"> $(function(){ $(":button").click(function(){ var params = $("form").serialize(); //直接序列化表单 $.ajax({ type : "post", url : "${basePath}/user_login.action", data : params, success : function(result){ $("img").attr("src", '${basePath}'+result.src); //返回的是json数据 } }); }); }); </script>
其他的不变，这样也能达到一样的效果。当然，你也可以在struts2中用response对象响应ajax请求，就像在servlet中一样。
2467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
