JavaWeb学习——AJAX&JSON-CSDN博客

本文链接：https://blog.csdn.net/liu865033503/article/details/89732847

一、AJAX概述

1.1 什么是AJAX

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

1.2 同步交互与异步交互

同步交互：
客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；刷新的是整个页面。
异步交互：
客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求；局部刷新。

1.3 AJAX的特点

AJAX最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

与服务器异步交互；
浏览器页面局部刷新；

1.4 AJAX的优缺点

优点：

异步交互：
AJAX使用Javascript技术向服务器发送异步请求，增强用户体验。
性能高：
AJAX无须刷新整个页面，因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

缺点：

AJAX并不适合所有场景，很多时候还是要使用同步交互；
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
存在浏览器兼容问题，因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

1.5 AJAX常见应用情景

联动下拉框
文本框失去焦点自动验证文本内容
搜索框失去焦点自动加载显示关键词相关信息等

1.6 使用AJAX向服务器发送异步请求

使用AJAX向服务器发送异步请求分为四步：

第一步：得到XMLHttpRequest
ajax的所有异步交互是使用XMLHttpRequest对象完成的，但各个浏览器对XMLHttpRequest的支持是不同的：

大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();
IE6.0：var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

我们可以编写一个函数来负责创建XMLHttpRequest对象：

function createXMLHttpRequest() {
	try {
    	return new XMLHttpRequest();
   	} catch(e) {
    	try {
	    	return new ActiveXObject("Msxml2.XMLHTTP");
	  	} catch(e) {
	    	try {
	        	return new ActiveXObject("Microsoft.XMLHTTP");
	      	} catch(e) {
	        	alert("哥们儿，你用的是什么浏览器啊？");
	        	throw e;
	     	}
	  	}
   	}
}

第二步：开启与服务器的连接
当得到XMLHttpRequest对象后，就可以调用该对象的open()方法打开与服务器的连接了,open()方法的参数如下：

open(method, url, async)：

method：请求方式，通常为GET或POST；
url：请求的服务器地址，例如：/ajaxdemo1/AServlet，若为GET请求，还可以在URL后追加参数；
async：这个参数可以不给，默认值为true，表示异步请求；

var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajaxdemo1/AServlet", true);

第三步：发送请求
当使用open开启连接后，就可以调用XMLHttpRequest对象的send()方法发送请求了。

send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。

xmlHttp.send(null)；

注意: 若是GET请求或POST请求无参数时，需要给出null为参数！若不给出null为参数，可能会导致FireFox浏览器不能正常发送请求！

第四步：注册事件监听，来接受服务器的响应
XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用。XMLHttpRequest对象有5种状态：

0状态：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
1状态：请求已开始，open()方法已调用，但还没调用send()方法；
2状态：请求发送完成状态，send()方法已调用；
3状态：服务器响应已开始，但不表示响应结束了；
4状态：服务器响应结束（通常我们只关心这个状态）

onreadystatechange事件会在状态为1、2、3、4时触发，但通常我们只关心最后一种状态，即读取服务器响应结束时，客户端才会做出改变。
我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

得到xmlHttp对象的状态：
var state = xmlHttp.readyState;//可能是0、1、2、3、4
得到服务器响应的状态码：
var status = xmlHttp.status;//例如为200、404、500

得到服务器响应的内容：

var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容

最后实现利用双重判断并获取服务器的响应内容：

xmlHttp.onreadystatechange = function() {
	if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
		alert(xmlHttp.responseText);	
	}
};

1.8 AJAX发送POST请求

发送POST请求时需设置如下请求头：
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
然后调用send方法发送请求。

因为表单的enctype默认值为application/x-www.form-encoded，所以form表单提交给服务器时等同与设置了Cotnent-Type请求头，大家可能会忽略这个请求头。
但在使用AJAX发送请求时，就没有默认值了，这需要我们自己来设置请求头，若没有设置Content-Type请求头为application/x-www-form-urlencoded时，Web容器会忽略请求体的内容。

二、XStream

2.1 XStream的作用

XStream可以把JavaBean对象转换成XML。

通常服务器向客户端响应的数据都是来自数据库的一组对象，而我们不能直接把对象响应给响应端，所以我们需要把对象转换成XML再响应给客户端，这时就需要使用XStream组合了。

2.2 XStream的相关jar包

核心JAR包：xstream-1.4.7.jar；
必须依赖包：xpp3_min-1.1.4c（XML Pull Parser，一款速度很快的XML解析器）；

2.3 使用XStream把Java对象转换成XML

XStream的用法很简单：

 XStream xstream = new XStream();//创建XStream对象
 String xmlStr = xstream.toXML(javabean);//调用toXML方法将bean对象转化为XML格式字符串

为了演示XStream的作用，我们需要先写两个类，Province和City。

//城市类：包含城市名、描述等属性
public class City {
	private String name;
	private String description;
	……
}

//省份类：包含省份名、城市列表等属性
public class Province {
	private String name;
	private List<City> cities = new ArrayList<City>();
	//向城市List属性中添加元素的方法
	public void addCity(City city) {
		cities.add(city);
	}
	……
}

接下来，我们需要写一个main()，创建一个List，List中存放两个Province对象！最终我们把List转换成XML。

Province p1 = new Province("辽宁省");
p1.addCity(new City("沈阳", "shenyang"));
p1.addCity(new City("大连", "dalian"));

Province p2 = new Province("吉林省");
p2.addCity(new City("长春", "changchen"));
p2.addCity(new City("白城", "baicheng"));

List<Province> list = new ArrayList<Province>();
list.add(p1);
list.add(p2);

下面是使用XStream转换list为XML的代码：

XStream xstream = new XStream();//创建XStream对象
String s = xstream.toXML(list);//调用toXML方法将省份List转化为XML
System.out.println(s);

转化结果如下：

<list>
	<cn.itcast.xstream.demo1.Province>
    	<name>辽宁省</name>
    	<cities>
    		<cn.itcast.xstream.demo1.City>
        		<name>沈阳</name>
        		<description>shenyang</description>
      		</cn.itcast.xstream.demo1.City>
      		<cn.itcast.xstream.demo1.City>
        		<name>大连</name>
        		<description>dalian</description>
      		</cn.itcast.xstream.demo1.City>
    	</cities>
 	</cn.itcast.xstream.demo1.Province>
 	<cn.itcast.xstream.demo1.Province>
    	<name>吉林省</name>
    	<cities>
      		<cn.itcast.xstream.demo1.City>
        		<name>长春</name>
        		<description>changchen</description>
      		</cn.itcast.xstream.demo1.City>
      		<cn.itcast.xstream.demo1.City>
        		<name>白城</name>
        		<description>baicheng</description>
      		</cn.itcast.xstream.demo1.City>
    	</cities>
  	</cn.itcast.xstream.demo1.Province>
</list>

2.4 使用细节

设置别名：修改类型对应的元素名

xstream.alias("china", List.class);//让List类型生成的元素名为china
xstream.alias("province", Province.class);//让Province类型生成的元素名为province

把子元素变为元素的属性：默认类的成员，生成的是元素的子元素！我们希望让类的成员生成元素的属性。

例如：把<province>子元素<name>变成：<province name=””>样式

xstream.useAttributeFor(Province.class, "name");//把Province类的名为name成员，生成<province>元素的name属性

去除Collection类型的成名：我们只需要Collection的内容，而不希望Collection本身也生成一个元素

例如：Pronvice类有一个cities成员，所以生成了元素，但这个元素对XML文档而言没有什么意义，所以我们希望把它去除

xstream.addImplicitCollection(Province.class, "cities");//让Province类的名为cities(它是List类型的，它的内容还会生成元素)的成名不生成元素

让类的成员不生成对应XML元素

例如：我们不希望City类的description成员出现在XML文档中

xstream.omitField(City.class, "description");//在生成的xml中不会出现City类的名为description的对应的元素！

三、JSON

3.1 什么是JSON

JSON(JavaScript Object Notation) 是JavaScript提供的一种轻量级的数据交换格式。

JSON是用字符串来表示Javascript对象，例如可以在Servlet中发送一个JSON格式的字符串给客户端Javascript，Javascript可以执行这个字符串，得到一个Javascript对象。

3.2 JSON对象的语法

JSON语法：

数据在名称/值对中
属性名称(key)必须使用双引号括起来
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON值的类型：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）

//普通json对象
var person = {"name":"zhangSan", "age":18, "sex":"male"};
alert(person.name + ", " + person.age + ", " + person.sex);

//包含数组属性的json对象
var person = {"name":"zhangSan", "age":18, "sex":"male", "hobby":["cf", "sj", "ddm"]};
alert(person.name + ", " + person.age + ", " + person.sex + ", " + person.hobby);

//带有方法的json对象
var person = {"name":"zhangSan", "getName":function() {return this.name;}};
alert(person.name);
alert(person.getName());

3.3 JSON与XML比较

可读性：XML胜出；
解码难度：JSON本身就是JS对象（主场作战），所以简单很多；
流行度：XML已经流行好多年，但在AJAX领域，JSON更受欢迎。

3.4 JS解析服务器发送过来的JSON字符串

服务器发送过来JSON字符串后，客户端需要对其进行解析。这时客户端需要使用eval()方法对JSON字符串进行执行！但要注意，eval()方法在执行JSON时，必须把JSON字符串使用一对圆括号括起来。

var json = "{\"name\":\"zhangSan\", \"age\":\"18\", \"sex\":\"male\"}";
var person = eval("(" + json + ")");
alert(person.name + ", " + person.age + ", " + person.sex);

四、json-lib(Java对象与JSON对象的转化)

4.1json-lib介绍

apache提供的json-lib小工具，它可以方便的使用Java语言来创建JSON字符串。也可以把JavaBean转换成JSON字符串。

4.2 json-lib所需的jar包

json-lib的核心jar包：
json-lib.jar
json-lib的依赖jar包有：
commons-lang.jar
commons-beanutils.jar
commons-logging.jar
commons-collections.jar
ezmorph.jar

4.2 json-lib中的核心类

在json-lib中只有两个核心类：JSONObject、JSONArray

JSONObject：
JSONObject类本身是一个Map，所以学习它很方便。

//创建JSONObject对象并向其添加属性
JSONObject jo = new JSONObject();
jo.put("name", "zhangSan");
jo.put("age", "18");
jo.put("sex", "male");
System.out.println(jo.toString());

//将Java对象转化为JSONObject对象
Person person = new Person("liSi", 18, "female");
JSONObject jo = JSONObject.fromObject(person);
System.out.println(jo.toString());

//将Map集合转化为JSONObject对象
Map map = new HashMap();
map.put("name", "wangWu");
map.put("age", "81");
map.put("sex", "male");

JSONObject jo = JSONObject.fromObject(map);
System.out.println(jo.toString());

//将xml格式字符串转化为JSONObject对象
String xml = "<person><name>zhaoLiu</name><age>59</age><sex>female</sex></person>";
XMLSerializer serial = new XMLSerializer();
JSONObject jo = (JSONObject)serial.read(xml);
System.out.println(jo.toString());

JSONArray
JSONArray本身是一个List，所以使用起来很方便。

//将JAVA对象转化为JSONArray对象
JSONArray ja = new JSONArray();
Person p1 = new Person("zhangSan", 18, "male");
Person p2 = new Person("liSi", 23, "female");
ja.add(p1);
ja.add(p2);

System.out.println(ja.toString());

//将List集合转化为JSONArray对象
Person p1 = new Person("zhangSan", 18, "male");
Person p2 = new Person("liSi", 23, "female");
List<Person> list = new ArrayList<Person>();
list.add(p1);
list.add(p2);
JSONArray ja = JSONArray.fromObject(list);
System.out.println(ja.toString());

//将Java对象数组转化成JSONArray对象
Person p1 = new Person("zhangSan", 18, "male");
Person p2 = new Person("liSi", 23, "female");
Person[] persons = {p1, p2};
JSONArray ja = JSONArray.fromObject(persons);
System.out.println(ja.toString());