1.JSON 仅仅是一种文本字符串。它被存储在 responseText 属性中
2.利用第三方工具解析JSON
servlet服务处理:
jsp界面获取json数据:
为了读取存储在 responseText 属性中的 JSON 数据，须要依据 JavaScript 的 eval 函数。函数 eval 会把一个字符串当作它的參数。
然后这个字符串会被当作 JavaScript 代码来运行。由于 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可运行的
比如例如以下方式:
String json = "{username:'一叶扁舟',age:22}";
var json = xhr.responseText;
json = eval("("+json+")");
alert(json.name);2.利用第三方工具解析JSON
(1).须要导入的jar包
(2)代码实战:
domain实体类：
package com.wenhao.web.ajax.domain;
/**
*类的作用：City实体类
*
*
*@author 一叶扁舟
*@version 1.0
*@创建时间： 2014-10-28 下午05:57:18
*/
//城市[JavaBean]
public class City {
private int id;
private String cityName;
public City(){}
public City(int id, String cityName) {
super();
this.id = id;
this.cityName = cityName;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getCityName() {
return cityName;
}
public void setCityName(String cityName) {
this.cityName = cityName;
}
}
servlet服务处理:
package com.wenhao.web.ajax.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 net.sf.json.JSONArray;
import net.sf.json.JsonConfig;
import com.wenhao.web.ajax.domain.City;
/**
*类的作用：JavaBean直接转成JSON对象
*这个是json传输
*
*
*@author 一叶扁舟
*@version 1.0
*@创建时间： 2014-10-28 下午05:58:20
*/
public class CityServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String province = request.getParameter("province");
byte[] buf = province.getBytes("ISO8859-1");
province = new String(buf,"UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
List<City> cityList = new ArrayList<City>();
String jsonString = null;
if(province.equals("河南省")){
cityList.add(new City(1,"郑州"));
cityList.add(new City(2,"洛阳"));
cityList.add(new City(3,"开封"));
cityList.add(new City(4,"信阳"));
}else if(province.equals("福建省")){
cityList.add(new City(1,"福州"));
cityList.add(new City(2,"厦门"));
cityList.add(new City(3,"莆田"));
cityList.add(new City(4,"漳州"));
cityList.add(new City(5,"龙岩"));
}else if(province.equals("云南省")){
cityList.add(new City(1,"大理"));
cityList.add(new City(2,"昆明"));
cityList.add(new City(3,"香格里拉"));
}
JsonConfig jsonConfig = new JsonConfig();
//json数据中不包括id属性
jsonConfig.setExcludes(new String[]{"id"});
//将cityList转成json数组
JSONArray jsonArray = JSONArray.fromObject(cityList,jsonConfig);
jsonString = jsonArray.toString();
System.out.println("jsonString="+jsonString);
pw.write(jsonString);
}
}
jsp界面获取json数据:
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="provinceID">
<option>选择省份</option>
<option>河南省</option>
<option>福建省</option>
<option>云南省</option>
</select>
<select id="cityID">
<option>选择城市</option>
</select>
<script type="text/javascript">
document.getElementById("provinceID").onchange=function(){
//清空原city列表框
var citySelectElement = document.getElementById("cityID");
var cityElementArray = citySelectElement.options;
var size = cityElementArray.length;
if(size > 1){
//从后向前删除下拉列表框中的东西
for(var i=size-1;i>0;i--){
citySelectElement.removeChild(cityElementArray[i]);
}
}
var province = this[this.selectedIndex].innerHTML;
province = encodeURI(province);
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
//取得json字符串
var jsonString = xhr.responseText;
//将json字符串转成json对象
var jsonObject = eval("("+jsonString+")");
var size = jsonObject.length;
for(var i=0;i<size;i++){
var city = jsonObject[i].cityName;
var optionElement = document.createElement("option");
optionElement.innerHTML = city;
document.getElementById("cityID").appendChild(optionElement);
}
}
}
}
xhr.open("get","/FirstAjax/CityServlet?time="+new Date().getTime()+"&province="+province);
xhr.send(null);
};
//创建一个ajax对象
function createXHR(){
var xhr = null;
//假设是IE浏览器
if(window.ActiveXObject){
xhr = new ActiveXObject("microsoft.xmlhttp");
}else{
//非IE浏览器
xhr = new XMLHttpRequest();
}
return xhr;
}
</script>
</body>
</html>