一、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());
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
