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;
}
@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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |