<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>study aJax</title> <script type="text/javascript"> function show(){ var ajax; if(window.XMLHttpRequest){ ajax=new XMLHttpRequest; }else if(window.ActiveXObject){ ajax=new ActiveXObject("Msxm12.XMLHTTP"); } ajax.onreadystatechange=function(){ //判断ajax状态码 if(ajax.readyState==4){ //判断响应状态码 if(ajax.status==200){ //获取响应数据 var result=ajax.responseText; //得到json对象，起名为user; eval("var user="+result); var table=document.getElementById("table"); //插入一行(0代表第一行，列同理) var tr=table.insertRow(1); //插入列 var td0=tr.insertCell(0); td0.innerHTML=user.uid; var td1=tr.insertCell(1); td1.innerHTML=user.uname; var td2=tr.insertCell(2); td2.innerHTML=user.loc; var td3=tr.insertCell(3); td3.innerHTML=user.desc; } } } //发送请求到ajaxServlet ajax.open("get","ajaxServlet?uname=javaee",true); ajax.send(null); } </script> <style type="text/css"> #test{ border:solid 2px; width:200px; height:100px; } </style> </head> <body> uname:<input type="text" id="uname" /> <input type="button" value="搜索" onclick="show()" /> <table id="table" border="1px"> <tr> <td>id</td> <td>uname</td> <td>loc</td> <td>desc</td> </tr> </table> <div id="test"></div> </body> </html>
public class TestAjax extends HttpServlet{ @Override public void service(HttpServletRequest request,HttpServletResponse response) throws IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String uname=request.getParameter("uname"); User u=new UserServiceImpl().UserService("javaee"); JsonObject jo=new JsonObject(); //JavaScript中声明对象 //response.getWriter().write("var user={uname:'javase'};"); //便用goson jar包，自动生成json response.getWriter().write(new Gson().toJson(u)); } public static void main(String[] args) { User u=new UserServiceImpl().UserService("javaee"); System.out.println(u.toString()); } }