<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ajax Json数据处理演示</title> <script type="text/javascript"> function ask1() { //1创建ajax对象 var xhr = null; if (window.XMLHttpRequest) {//高版本 xhr = new XMLHttpRequest(); } else {//低版本 xhr = new ActiveXObject("Microsoft.XMLHttp"); } //2请求地址 var url = "<c:url value='/JsonServlet1'/>"; //3设置访问方式 xhr.open("POST", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange = function() { if (xhr.readyState == 4) {//返回 if (xhr.status == 200) {//响应代码正常 //※※※※※解析后台返回的json串 //js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象 var txt = xhr.responseText; var users = eval("(" + txt + ")"); //把符合json格式的文本串 转换成 json对象 for ( var i = 0; i < users.length; i++) { alert(users[i].id + "," + users[i].name + "," + users[i].age); } } } }; //5 发送 xhr.send(null); } function ask2() { //1创建ajax对象 var xhr = null; if (window.XMLHttpRequest) {//高版本 xhr = new XMLHttpRequest(); } else {//低版本 xhr = new ActiveXObject("Microsoft.XMLHttp"); } //2请求地址 var url = "<c:url value='/JsonServlet2'/>"; //3设置访问方式 xhr.open("POST", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange = function() { if (xhr.readyState == 4) {//返回 if (xhr.status == 200) {//响应代码正常 //※※※※※解析后台返回的json串 //js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象 var txt = xhr.responseText; //alert(txt); //把符合json格式的文本串 转换成 json对象 var users = eval("(" + txt + ")"); for ( var key in users)//map的便利方式 alert("属性：" + key + ",值：" + users[key]); } //for ( var i = 0; i < users.length; i++) {//list的遍历方式 //alert(users[i].id +","+users[i].name+","+users[i].age); //} }; }; //5 发送 xhr.send(null); } function ask3() { //1创建ajax对象 var xhr = null; if (window.XMLHttpRequest) {//高版本 xhr = new XMLHttpRequest(); } else {//低版本 xhr = new ActiveXObject("Microsoft.XMLHttp"); } //2请求地址 var url = "<c:url value='/JsonServlet2'/>"; //3设置访问方式 xhr.open("POST", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange = function() { if (xhr.readyState == 4) {//返回 if (xhr.status == 200) {//响应代码正常 //※※※※※解析后台返回的json串 //js中eval()方法的功能：是校验参数文本串符合js中哪一种数据类型，并把其转换成对应类型的对象 var txt = xhr.responseText; //alert(txt); //把符合json格式的文本串 转换成 json对象 var users = eval("(" + txt + ")"); for ( var key in users)//map的便利方式 alert("属性：" + key + ",值：" + users[key]); } //for ( var i = 0; i < users.length; i++) {//list的遍历方式 //alert(users[i].id +","+users[i].name+","+users[i].age); //} }; }; //5 发送 xhr.send(null); } </script> </head> <body> <input type="button" value="ajax请求后台数据(手动封装json方式)" /> <br /> <input type="button" value="ajax请求后台数据(用apache工具封装json方式)" /> <input type="button" value="ajax请求后台数据(用fastjson工具封装json方式)" /> </body> </html>
JsonServlet1.java
package cn.hncu.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.hncu.domain.User; public class JsonServlet1 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //调用后台service.dao.query()，到数据库当中把信息读取出来 //为简化知识点的理解，此处后台部分的功能直接模拟 response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); List<User> users = new ArrayList<User>(); users.add(new User("A001","Jack",20)); users.add(new User("A002","Rose",22)); users.add(new User("B001","张三",20)); users.add(new User("B002","李四",30)); String json=""; //用java封装出json格式的字符串：[{name:"Jack",age:25}, {...}, {...} ] for(User u:users){ if(json.equals("")){ json="{name:\""+u.getName()+"\",id:\""+u.getId()+"\",age:"+u.getAge()+"}"; }else{ json = json +",{ name:\""+u.getName()+"\",id:\""+u.getId()+"\",age:"+u.getAge()+"}" ; } } json="["+json+"]"; out.print(json); } }
JsonServlet2.java