ajax技术是服务器和浏览器交互方式的其中一种,之前一直用的是最普遍的 请求新页面或者刷新现有页面(旧代码拼接新代码)的交互方式,ajax技术的特点在于利用当前页面中js函数中的ajax引擎对象发出请求,这样的请求得到的响应,页面是不会刷新的,响应返回到本页面js中,然后将响应添加到本页面某个标签当中。
普通交互和ajax交互对比
这三个是jackson的jar包
下边jsp中有一张表,点击显示数据链接,将servlet中的两个Users对象信息显示在该表中,写该表的点击时间,使用ajax(下边代码写了两种ajax的使用,注释掉的是另一种最详细的写法),有三个参数:url、参数、返回数据,因为传回来的是list,所以for循环,组成html的指令,将html字符串给tbody标签(html方法添加html字符串),而点击时间return false作用是取消默认动作,使页面不会跳转到demo的空白页中,留在本页
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> /* url:请求服务器地址 data:请求参数 dataType:服务器返回数据类型 error:请求出错执行的功能 success 请求成功执行 的功能 data服务器返回的数据 type:请求方式 */ $(function(){ $("a").click(function(){ /* $.ajax({ url:'demo', data:{"name":"张三"}, dataType:'html', error:function(){ alert("请求出错"); }, success:function(data){ alert("请求成功:"+data) }, type:'POST' }); */ $.post("demo",{"name":"张三"},function(data){ var result=""; for(var i=0;i<data.length;i++){ result+="<tr>"; result+="<td>"+data[i].id+"</td>" result+="<td>"+data[i].userName+"</td>" result+="<td>"+data[i].passWord+"</td>" result+="</tr>" } //先清空,后添加 $("#mytbody").html(result); }); return false; }) }); </script> </head> <body> <a href="demo">显示数据</a> </body> <table border="1"> <tr> <th>编号</th> <th>姓名</th> <th>密码</th> </tr> <tbody id="mytbody"></tbody> </table> </html>创建了两个Users对象,放进list里边,将list转换为jackson的字符串格式,然后设置响应编码格式,将字符串打印给浏览器
@WebServlet("/demo") public class DemoServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("执行控制器"); Users users=new Users(); Users users2=new Users(); users.setId(1); users.setPassWord("123"); users.setUserName("张三"); users2.setId(2); users2.setPassWord("456"); users2.setUserName("李四"); List<Users>list=new ArrayList<>(); list.add(users); list.add(users2); //将数据变成jackson的字符串格式 ObjectMapper mapper=new ObjectMapper(); String result = mapper.writeValueAsString(list); //resp是告诉浏览器需要用什么编码格式进行接受的 resp.setContentType("application/json;charset=utf-8"); PrintWriter out=resp.getWriter(); out.println(result); out.flush(); out.close(); } }