Ajax学习（三）：XML及Json与Ajax配合使用

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;}@Overridepublic 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;}@Overridepublic 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, HttpServletResponse response) throws ServletException, 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.0return 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的Arraypublic String test3(){Person p1 = new Person("李四", 22, "女");Person p2 = new Person("张三", 24, "男");JSONArray array = new JSONArray();array.add(p1);array.add(p2);return array.toString();}//把List转换为Arraypublic String test4(){Person p1 = new Person("李四", 22, "女");Person p2 = new Person("张三", 24, "男");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