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页面

@H_403_605@<%@ 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

原文链接：https://www.f2er.com/ajax/161113.html