使用原生ajax异步返回json数据
index.jsp
<%@ 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>
</head>
<script type="text/javascript" src="./ajax.js"></script>
<body>
<form name="myForm">
<input type="button" value="现在时间" onclick="ajaxFunction();">
</form>
</body>
</html>
function getxmlHttp(){
var xmlHttp;
try {
// Firefox,Opera 8.0+,Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
function ajaxFunction()
{
var xmlHttp = getxmlHttp();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if(xmlHttp.status == 200 || xmlHttp == 304){
var data = xmlHttp.responseText;
var dataObj = eval("("+data+")");
for(var i = 0;i<dataObj.length;i++){
alert(dataObj[i].name);
}
}
}
};
xmlHttp.open("post","Deal?a=3&&time="+new Date().toString(),true);
//post方法独有，请求向服务器发送数据，数据已经符合url编码
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("b=5");
}
Deal.java
package cn;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JsonConfig;
public class Deal extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
}
protected void doPost(HttpServletRequest request,IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
List<Province> list = new ArrayList<Province>();
Province p1 = new Province(1,"广东省");
Province p2 = new Province(2,"辽宁省");
Province p3 = new Province(3,"山东省");
list.add(p1);
list.add(p2);
list.add(p3);
JsonConfig config = new JsonConfig();
config.setExcludes(new String[]{"id"}); //不用转化的字段
JSONArray json = JSONArray.fromObject(list,config);
System.out.println(json.toString());
writer.write(json.toString());
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>Deal</servlet-name> <servlet-class>cn.Deal</servlet-class> </servlet> <servlet-mapping> <servlet-name>Deal</servlet-name> <url-pattern>/Deal</url-pattern> </servlet-mapping> </web-app>
实体bean
Province.java
package cn;
public class Province {
private int id;
private String name;
public Province() {
}
public Province(int id,String name) {
this.id = id;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
本文直接在servlet中生成数据，并且通过json包中的函数转化为json格式，异步传输到前台。
注：需要引入json的包
