Ajax学习（三）：XML及Json与Ajax配合使用
目录：
1、XML的序列化与反序列化定义：
2、XStream的作用：
3、XStream的必导jar包：
4、XStream使用步骤：
5、XStream常用方法：
6、Json定义：
7、eval函数转化Json字符串的时候外面为什么要包装一层圆括号？
8、Json的语法：
9、将Ajax打包生成小工具进行Json测试：
10、服务器端将Java对象转换为Json字符串：
11、JSON-lib常用方法测试：
12、Json与XML比较：
13、java.lang.NoClassDefFoundError解决：
1、XML的序列化与反序列化定义：
序列化：将对象状态转换为可保持或传输的格式的过程。
比如：Json序列化、XML序列化、二进制序列化、SOAP序列化等等。
反序列化：将流转换为对象。
2、XStream的作用：
把JavaBean转换为（序列化为）xml。
3、XStream的必导jar包：
①核心jar包：xstream-1.4.9.jar
②必须依赖包：xpp_3min-1.1.4c(XML Pull Parser，一款速度很快的XML解析器)
4、XStream使用步骤：
XStream xstream = new XStream();
String xmlStr = xstream.toXML(JavaBean);
5、XStream常用方法：
①xstream.alias("China",List.class);
//让List类型生成的元素名为China
②xstream.alias(“Province”,Province.class);
//让Province类型生成的元素名为Province
③xstream.useAttributeFor(Province.class,“ProvinceName”);
//把Province类中的名为ProvinceName的成员变量，生成<Province>元素的ProvinceName属性
④xstream.addImplicitCollection(Province.class,“cityList”);
//让Province类的名为cityList的成员变量不生成元素，但是List中的内容还会生成元素
⑤xstream.omitField(City.class,“description”);
//在生成的xml中不会出现City类的名为description的对应元素。
示例代码：
（a）Province.java实体类
package com.remoa.XStreamTest;
import java.util.ArrayList;
import java.util.List;
public class Province {
private String provinceName;
private List<City> cityList = new ArrayList<City>();
public String getProvinceName() {
return provinceName;
}
public void setProvinceName(String provinceName) {
this.provinceName = provinceName;
}
public List<City> getCityList() {
return cityList;
}
public void setCityList(List<City> cityList) {
this.cityList = cityList;
}
@Override
public String toString() {
return "Province [provinceName=" + provinceName + ",cityList=" + cityList + "]";
}
public void addCity(City city){
cityList.add(city);
}
}
（b）City.java实体类：
package com.remoa.XStreamTest;
public class City {
private String cityName;
private String description;
public String getCityName() {
return cityName;
}
public void setCityName(String cityName) {
this.cityName = cityName;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
@Override
public String toString() {
return "City [cityName=" + cityName + ",description=" + description + "]";
}
public City(String cityName,String description) {
super();
this.cityName = cityName;
this.description = description;
}
}
（c）Demo.java演示类
package com.remoa.XStreamTest;
import java.util.ArrayList;
import java.util.List;
import com.thoughtworks.xstream.XStream;
public class Demo {
public List<Province> getProvinceList(){
Province p = new Province();
p.setProvinceName("广东省");
p.addCity(new City("广州市","GuangZhou City"));
p.addCity(new City("深圳市","Shenzhen City"));
Province p2 = new Province();
p2.setProvinceName("江西省");
p2.addCity(new City("南昌市","NanChang City"));
p2.addCity(new City("景德镇市","JingDeZhen City"));
List<Province> list = new ArrayList<Province>();
list.add(p);
list.add(p2);
return list;
}
public static void main(String []args){
Demo demo = new Demo();
List<Province> list = demo.getProvinceList();
XStream xstream = new XStream();
//1、基本输出：
String xmlStr = xstream.toXML(list);
System.out.println("1、基本输出结果为：");
System.out.println(xmlStr);
//2、使用别名：
xstream.alias("China",List.class);
xstream.alias("Province",Province.class);
xstream.alias("City",City.class);
xmlStr = xstream.toXML(list);
System.out.println("2、使用别名输出结果为：");
System.out.println(xmlStr);
//默认JavaBean的属性都会生成子元素，现在希望生成元素的属性
//3、把Province元素的属性，生成<Province>的属性
System.out.println("3、生成元素的属性：");
xstream.useAttributeFor(Province.class,"provinceName");//把指定类的指定属性改为xml标签的属性
xmlStr = xstream.toXML(list);
System.out.println(xmlStr);
//4、集合属性不显示
System.out.println("4、集合属性不显示：");
xstream.addImplicitCollection(Province.class,"cityList");//去除指定类中的指定Collection属性，只把List中的元素生成xml文档。implicit：隐含其中的
xmlStr = xstream.toXML(list);
System.out.println(xmlStr);
//5、一个JavaBean中含有不想显示在xml中的属性，将那些属性不生成xml元素
System.out.println("5、将某些JavaBean属性不生成xml元素");
xstream.omitField(City.class,"description");
xmlStr = xstream.toXML(list);
System.out.println(xmlStr);
}
}
运行结果部分截图：
图5.1 运行结果
说明：
①list：List类型显示list
②com.remoa.XStreamTest.Province：javaBean的类型为Province，显示的元素名称为类的完整名
③cityList：JavaBean的属性名
④com.remoa.XStreamTest.City：类名
⑤cityName：属性名
图5.2 得到想要的最终结果
6、Json定义：
Json（JavaScript Object Notation，JS对象标记）是一种轻量级的数据交换格式。
Json是用字符串来表示字符串对象，例如可以在Servlet中发送一个Json格式的字符串给客户端JavaScript，JavaScript可以执行这个字符串，得到一个JavaScript对象。
7、eval函数转化Json字符串的时候外面为什么要包装一层圆括号？
将服务器端构建好的Json数据转化为可用的JavaScript对象，利用eval函数在转化的时候需要将Json字符串的外面包装一层圆括号。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式转化为对象，而不是作为语句来执行。例如对象字面量{}，如果不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。
alert(eval("{}");// return undefined
alert(eval("({})");// return object[Object]
8、Json的语法：
（1）{}：对象
（2）属性名必须用双引号括起来，单引号不可以。
（3）属性值：
①null
②数值：不用添加修饰
③字符串：使用双引号””括起来
④数组：使用方括号[]括起来
⑤boolean值：true和false
9、将Ajax打包生成小工具进行Json测试：
（1）未打包前基础测试：
①测试代码：
（a）JsonServlet.java
package com.remoa.JsonTest;
import java.io.IOException;
import javax.servlet.servletexception;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/JsonServlet")
public class JsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException {
response.setContentType("text/html;charset=utf-8");
String jsonStr = "{\"name\": \"张三\",\"age\":18,\"sex\":\"male\"}";
response.getWriter().print(jsonStr);
System.out.println(jsonStr);
}
protected void doPost(HttpServletRequest request,IOException {
doGet(request,response);
}
}
（b）前端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>json学习</title>
<script type="text/javascript">
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
throw e;
}
}
}
};
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
//使用ajax得到服务器端响应，将结果响应到h3中
var request = createXMLHttpRequest();
request.open("GET","/Learn201705/JsonServlet",true);
request.send(null);
request.onreadystatechange = function(){
if(request.status == 200 && request.readyState == 4){
var text = request.responseText;//得到返回的Json字符串
var person = eval("(" + text + ")");
var s = "<table border=\"1\">" + "<tr><td>姓名</td><td>年龄</td><td>性别</td>" + "<tr><td>" + person.name + "</td><td>"+ person.age + "</td><td>" + person.sex + "</td></tr></table>";
document.getElementById("show").innerHTML = s;
}
}
};
};
</script>
</head>
<body>
<h1>json测试</h1>
<button type="button" id="btn">click here</button>
<h3 id="show"></h3>
</body>
</html>
②运行结果：
图9.1 运行结果1
（2）将Ajax打包成小工具后重复测试：
①代码修改部分：
（a）在web-content中创建ajax-lib目录，在目录下创建ajaxutil.js
//创建request方法
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
//IE6.0
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5.5及更早版本
return new ActiveObject("Microsoft.XMLHTTP");
}catch(e){
throw e;
}
}
}
};
//请求方式、请求url，是否异步，请求体内容，回调方法，服务器响应结果类型(json数据？xml数据？text数据？)
function ajax(option){
var request = createXMLHttpRequest();
if(!option.method){
option.method = "GET";//设置不传则请求方式默认值为get
}
if(option.asyn == undefined){
option.asyn = true;//默认使用异步
}
request.open(option.method,option.url,option.asyn);
if(option.method == "POST"){
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
request.send(option.params);
request.onreadystatechange = function(){
if(request.status == 200 && request.readyState == 4){
var data;
if(!option.dataType){
data = request.responseText;//默认为文本
}else if(option.dataType == "xml"){
data = request.responseXML;
}else if(option.dataType == "json"){
var text = request.responseText;
data = eval("(" + text + ")");
}else if(option.dataType == "text"){
data = request.responseText;
}
//调用回调方法
option.callback(data);
}
}
};
（b）将页面其他的js封装成单独文件json2.js
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
ajax({
url:"/Learn201705/JsonServlet",dataType:"json",callback:function(data){
document.getElementById("show").innerHTML = "<table border=\"1\">" + "<tr><td>姓名</td><td>年龄</td><td>性别</td>" + "<tr><td>" + data.name + "</td><td>"+ data.age + "</td><td>" + data.sex + "</td></tr></table>";
}
});
};
};
（c）修改后页面代码，清晰多了<%@ 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>
<script type="text/javascript" src="<%=request.getcontextpath() %>/ajax-lib/ajaxutil.js"></script>
<script type="text/javascript" src="<%=request.getcontextpath() %>/js/json2.js"></script>
</head>
<body>
<h1>json测试</h1>
<button type="button" id="btn">click here</button>
<h3 id="show"></h3>
</body>
</html>
②可以看到相同的运行结果：
图9.2 运行结果2
10、服务器端将Java对象转换为Json字符串：
（1）使用json-lib的jar包：
①核心jar包：json-lib.jar（本案例使用版本2.4）
②依赖jar包：
Json-lib requires (at least) the following dependencies in your classpath:
jakarta commons-lang 2.5（本案例使用版本3.5）
jakarta commons-beanutils 1.8.0（本案例使用版本1.9.3）
jakarta commons-collections 3.2.1（本案例使用版本4.1）
jakarta commons-logging 1.1.1（本案例使用版本1.2）
ezmorph 1.0.6
11、JSON-lib常用方法测试：
（1）JSONObject：把它看成map来使用
①JSONObject map = new JSONObject();
map.put(key值,value值);
map.toString();//返回json字符串
②JSONObject map = JSONObject.fromObject(person);//把对象转换为JSONObject对象
（2）JSONArray：把它看成List来使用
①JSONArray array = new JSONArray();
array.add(JavaBean对象);
array.toString();//返回json字符串
②JSONArray jsonArray = JSONObject.fromObject(array);//把list转换成JSONArray对象
（3）测试代码：
package com.remoa.JsonTest;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class JsonLibTest {
//当成map来用
public String test1(){
JSONObject map = new JSONObject();
map.put("name","张三");
map.put("age",18);
map.put("sex","男");
String jsonStr = map.toString();
return jsonStr;
}
//当已经有一个Person对象时，可以把Person转换为JSONObject对象。
public String test2(){
Person p = new Person("李四",22,"女");
JSONObject map = JSONObject.fromObject(p);
return map.toString();
}
//Json的Array
public String test3(){
Person p1 = new Person("李四","女");
Person p2 = new Person("张三",24,"男");
JSONArray array = new JSONArray();
array.add(p1);
array.add(p2);
return array.toString();
}
//把List转换为Array
public String test4(){
Person p1 = new Person("李四","男");
Person p3 = new Person("王五",26,"男");
List<Person> list = new ArrayList<Person>();
list.add(p1);
list.add(p2);
list.add(p3);
return JSONArray.fromObject(list).toString();
}
public static void main(String[] args) {
JsonLibTest test = new JsonLibtest();
System.out.println(test.test1());
System.out.println(test.test2());
System.out.println(test.test3());
System.out.println(test.test4());
}
}
（4）运行结果：
图11.1 运行结果截图
12、Json与XML比较：
①可读性：XML好
②解析难度：Json本身就是js对象，简单很多
③流行度：XML更流行，但在Ajax领域，Json更流行
13、java.lang.NoClassDefFoundError解决：
（1）问题描述：
图13.1 问题描述
（2）解决方案：
NoClassDefFoundError：在运行时类加载器在classpath下找不到需要加载的类，所以我们需要把对应的类加载到classpath中，或者检查为什么类在classpath下是不可用的
本案例是由于commons-lang3-3.1.jar、commons-collections 4.1出现异常：
需要完成①②两步：
①因为新版的commons-lang的jar包对旧版的不兼容了，将jar包从新版本替换为老版本2.6；
②本案例使用的commons-collections 4.1对旧版的不兼容了，将jar包从新版本替换为老版本3.2，问题得到解决。
jar包下载地址：
http://commons.apache.org/proper/commons-lang/download_lang.cgi
http://commons.apache.org/proper/commons-collections/download_collections.cgi