Ajax学习(三):XML及Json与Ajax配合使用

前端之家收集整理的这篇文章主要介绍了Ajax学习(三):XML及Json与Ajax配合使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_0@Ajax学习(三):XML及Json与Ajax配合使用

目录:

1、XML的序列化与反序列化定义:

2XStream的作用:

3XStream的必导jar包:

4XStream使用步骤:

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

猜你在找的Ajax相关文章