Ajax+JSP例子2（用json序例化返回数据）
在ajax中返回数据有两种方式：第一个用responsetext;另外一种是用responseXML的方式，由于XML解析效率低下和占用的流量的确大了很多，所以序列化JSON便受到广大web程序员的喜爱。后台可以复杂的数据结构（如数组，自定义类等）序列成字符串后回传给前台js,而前台javascript可以用很方便 的用eval函数，json2.js(可以到www.json.org下载)等轻松的完成解析，然后呈现出来。
后台我用的是java的Servlet来进行业务处理。
在eclipse新建好web工程后，首先创建一个jsp文件,添加一个按扭，和一个div。
<script type="text/javascript"> function getAjaxJson() { httpGet("myServlet", "GET", "msg=123"); } </script> </head> <body> <strong>AJAX JSON序列化示例</strong> <hr> <input type="button" value="GET操作" onclick="getAjaxJson()"> <hr> <div id="showout"></div> </body>
web.xml配置：
<url-pattern>中的字段myServlet是脚本文件的url.
httpGet("myServlet","GET","msg=123");
<servlet-name>的字段是服务器端servlet类的类名。
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>jsonexample</display-name> <servlet> <servlet-name>myServlet</servlet-name> <servlet-class>com.myServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>myServlet</servlet-name> <url-pattern>/myServlet</url-pattern> </servlet-mapping> </web-app>
完成以上任务以后，我们再来编写ajax发送http请求的脚本，新建一个脚本并引入到网页中，在head标签之间。
<script type="text/javascript" src="script/ajaxRequest.js"></script>
/* * 函数名:getTransport * 功能: 根据不同的浏览器对象创建 XMLHttpRequest对象并返回，如果浏览器不支持该对象，则返回undefined. */ var xmlhttp=null; function getHttpRequest() { try { xmlhttp=new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { try { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } catch(e1) { xmlhttp=new XMLHttpRequest(); } } } function httpGet(url,method,data) { getHttpRequest(); xmlhttp.open(method,url +"?"+data,true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-Length",data.length); xmlhttp.onreadystatechange=callback; xmlhttp.send (null); } function callback() { if(xmlhttp.readyState==4) { if(xmlhttp.status==200) { //要实现的操作 var xmlDoc=xmlhttp.responseText; var data=eval(xmlDoc); document.getElementById("showout").innerHTML+=data[0].userId+","+data[0].userName+","+data[0].userSex+"<br>"; document.getElementById("showout").innerHTML+=data[1].userId+","+data[1].userName+","+data[1].userSex+"<br>"; } else { document.getElementById("showout").innerHTML="AJAX Server error!"; } } }
这样前台的编码就完成了，然后添加后的处理代码，新建一个servlet类：
Json的架包有：json-lib-2.3-jdk15.jar，commons-beanutils-1.7.0.jar，commons-collections-3.1.jar，commons-lang-2.3.jar，ezmorph-1.0.6.jar，commons-logging.jar。可以到csdn:http://download.csdn.net/detail/tyfengyu/4478154下载后，buildpath进去。
package com; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.ArrayList; import net.sf.json.*; public class myServlet extends HttpServlet { private static final long serialVersionUID=1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub //指定 去除客户端页面的缓存 ClearCache(response); //制造假数据 ArrayList<UserModel> list=new ArrayList<UserModel>(); UserModel user1=new UserModel();//用户对象1 user1.setUserId(1); user1.setUserName("哈哈"); user1.setUserSex("男"); list.add(user1); UserModel user2=new UserModel();//用户对象2 user2.setUserId(2); user2.setUserName("呵呵"); user2.setUserSex("女"); list.add(user2); //将List转化为JSON //设置编码 response.setCharacterEncoding("utf-8"); //写入到前台 JSONArray json1=JSONArray.fromObject(list); response.getWriter().write(json1.toString()); System.out.print(json1.toString()); response.getWriter().flush(); response.getWriter().close(); } public void ClearCache(HttpServletResponse response) { //指定 去除客户端页面的缓存 response.setHeader("pragma", "no-cache"); response.setHeader("cache-control", "no-cache"); response.setHeader("expires", "0"); } }
UserModel类：
必须显示声明缺省的构造函数，属性要用get 、set方法。
package com; public class UserModel { /** * @param args */ private int UserId; private String UserName; private String UserSex; public UserModel() { //super(); } /** * @return the userId */ public int getUserId() { return UserId; } /** * @param userId the userId to set */ public void setUserId(int userId) { UserId = userId; } /** * @return the userName */ public String getUserName() { return UserName; } /** * @param userName the userName to set */ public void setUserName(String userName) { UserName = userName; } /** * @return the userSex */ public String getUserSex() { return UserSex; } /** * @param userSex the userSex to set */ public void setUserSex(String userSex) { UserSex = userSex; } }
这样就完成ajax+jsp用JSON进行数据传输的例子。
效果：
参考：http://www.cnblogs.com/lsnproj/archive/2012/02/09/2341524.html
转载本文请标明出处。
