JavaWeb之Ajax快速入门(十九)

AJAX

1. AJAX简介

1. AJax是什么
	允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做AJax,AJax不是新的编程语言是多种技术的结合形成一门新技术
	AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest对象
2. AJax的特点
	不适用于任何应用场景
	导致逻辑处理混乱
	Ajax是实现BS模式下的异步交互
	在实现同样的功能时，Ajax的性能更好
3. AJax的优点
	1). 传统web交互模型，浏览器直接将请求发送给服务器，服务器回送响应，直接发给浏览器，Ajax交互模型，浏览器首先将请求 发送 Ajax引擎（以XMLHttpRequest为核心），AJax引擎再将请求发送给 服务器，服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示 
	2). 目的提高用户的体验

2. 同步交互和异步交互

同步交互：客户端向服务器端发送请求——>服务器端进行响应，这个过程中，
客户端不能做任何其他事情的模式
异步交互：客户端向服务器端发送请求——>服务器端进行响应，这个过程中，客户端可以做任何其他事情的模式

3. 实现Ajax的步骤

1.创建XMLHttpRequest对象
2.将状态触发器绑定到函数（回调函数）
3.使用open方法建立与服务器的连接
4.向服务器端发送数据
5.在回调函数中对返回数据进行处理

4. 常用对象XMLHttpRequest

方法： 
	open 
	send 
属性： 
	onreadystatechange ：状态回调函数
	responseText/responseXML ：服务器的响应字符串
	status：服务器返回的HTTP状态码
	statusText:  服务器返回的HTTP状态信息  
	readyState ：对象状态  (0,1,2,3,4)
事件：
	onreadystatechange：对应一个函数。回调函数。每一次的readyState的值发生变化，都会调用它指定的函数。


---------------------------------------------------------
readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
	0 代表未初始化。 还没有调用 open 方法
	1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
	2 代表已加载完毕。send 已被调用。请求已经开始
	3 代表交互中。服务器正在发送响应
	4 代表完成。响应发送完毕
	
status常用状态码及其含义：
	404 没找到页面(not found)
	403 禁止访问(forbidden)
	500 内部服务器出错(internal service error)
	200 一切正常(ok)
	304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 

5. 客户端向服务器提交数据

1、get方式发送数据
	xmlHttp.open("GET","url?key=value"); // 参数已经在url上
	xmlHttp.send(null); 
2、post方式发送数据
	xmlHttp.open("POST","url"); // 不需要写参数
	xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); // post发送参数前，需要设置编码格式
	xmlHttp.send("name=xxx&pwd=xxx"); // 发送post数据 

 

不同响应数据类型

1. JSON简介

1. JSON(JavaScript Object Notation), 是一种javascript轻量级数据交互格式，主要应用于Ajax编程。去掉多余 HTML标签元素，只返回有效数据部分，是一种更优的方案
2. JSON特点: 
	1). 易于程序员阅读和编写
	2). 易于计算机解析和生成
3. JSON结构: Map集合结构,数组结构
4. JSON格式:
	1). {key:value,key:value,key:value } 键值对直接用 , 分开，键值之间用 : 键 本身必须是字符串常量 
	2). [值1, 值2 ,值3 ] 数组结构
5. 应用场景: AJAX请求参数 和响应数据

2. JSON-lib使用

1. json-lib是 java类库 ，支持 javabean map list array 转换 json格式字符串， 支持将json字符串转换 javabean对象
2. 导包
	commons-beanutils-1.8.3.jar
	commons-collections-3.2.1.jar
	commons-lang-2.6.jar
	commons-logging-1.1.1.jar
	ezmorph-1.0.6.jar
	json-lib-2.4-jdk15.jar
3. 如何使用JSON-lib
	1). 转换数组 、List集合 到json格式字符串  - 使用JSONArray
		String[] arr = {"sada","fdssd","dfsd","sadas"};
		JSONArray jsonArray =  JSONArray.fromObject(arr);
	2). 将JavaBean/Map解析成JSON串：－  使用JSONObject
		JSONObject jsonObject = JSONObject.fromObject(new Person());
	3). 通过JsonConfig对象 配置对象哪些属性不参与转换
		JsonConfig jsonConfig = new JsonConfig();
		jsonConfig.setExcludes(new String[]{"price"});
		JSONObject jsonObject = JSONObject.fromObject(p1, jsonConfig);

3. 其他第三方工具：xStream

1. 如何将javabean、List、Array和Map集合转换成XML格式
	需要第三方类库支持 XStream,导包:xstream-1.3.1.jar 、xpp3_min-1.1.4c.jar
	核心方法 
	xSteam.alias(name,Class); 将类型解析或者序列化 定义一个别名
	toXML(obj) 将对象序列化XML 
	fromXML(inputStream/xml片段)  将xml信息解析对象 

	提供便捷注解
	@XStreamAlias(别名) 对类和变量设置别名
	@XStreamAsAttribute  设置变量生成属性
	@XStreamOmitField  设置变量 不生成到XML
	@XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量 别名

	使注解生效 
	xStream.autodetectAnnotations(true);

	使用 xmlHttp.responseXML 接收解析成为 document对象	

AJAX案例

工具类用于返回XmlHttpRequest对象,以供案例获取该对象

function getXmlHttpRequest() {
	var xmlHttp;

	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {

		// Internet Explorer
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {

			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				alert("您的浏览器不支持AJAX！");
				return false;
			}
		}
	}
	
	return xmlHttp;
}

1. 用户注册提示

引入util.js工具,方便获取XmlHttpRequest对象
1. 页面设计：
	提供用户名输入框设置id和name值
	span区域设置id值
2. 页面加载，创建Ajax引擎，针对服务器响应的数据进行处理
	1). 利用window.onload页面一加载就进行响应操作
	2). 先通过文本输入框document对象获取该节点对象，onblur方法,产生离焦事件
	3). 获取Ajax引擎,XmlHttpRequest对象
	4). 监听状态绑定一个回调函数,用引擎对象中onreadystatechange方法进行监听，判断状态是否是服务器返回完成readyState(4)，再判断是否响应成功status(200)
	5).如果条件都满足，对服务器响应的结果进行处理
	xmlHttp.responseText; 获取响应的一般数据
	xmlHttp.responseXMl:获取响应的XML文本数据
	6). 建立连接,使用引擎中open方法
	7). 发送数据,xmlHttp.send("");
3. 服务器响应类XmlHttpRequestServlet
	1). 设置编码
	2). 获取请求的参数
	3). 针对请求的参数进行处理,将结果发送出去

2. 显示商品信息

引入util.js工具,以便获取XmlHttpRequest引擎
1. 页面设计
	定义一个超链接商品列表,href = "javascript:void(0);" 设置id
	定义div显示表格区域

2. 页面加载定义
	1). window.onload加载页面
	2). 获取超链接节点对象中的onclick方法
	3). 获取XmlHttpRequest对象
	4). 将状态绑定到事件触发器上xmlHttp.onreadystatechange方法上
	5). 对服务器响应的数据进行处理
	6). 建立连接,使用open方法
	7). 发送请求信息send方法
3. 响应类
	设置编码
	将商品列表设置到request域中
	转发到商品列表页面list.jsp
4. 商品列表页面设计
	1). 导入jstl标签库
	2). 建立表格标签,设置标题，遍历request域中的对象，使用el表达式获取数据

3. JSON实现显示商品信息

一、 建立JavaBean类
	private String name;
	private double price;
	存储类ProductDB
	List<Product> products = new ArrayList<Product>();
	products.add(new Product("洗衣机",1000));
	products.add(new Product("冰箱",1500));
	products.add(new Product("电视机",5000));
	
二、 页面显示
		提供商品列表链接,设置href属性值javascript:void(0);,设置id
		div显示区域
		
三、 Ajax引擎编写
	0. 引入工具标签，以便获取XmlHttpRequest对象
	1. 执行页面加载方法window.onload
	2. 获取Ajax引擎对象
	3. 将返回的状态绑定到事件触发器方法上
	4. 判断AJax请求的当前状态是否响应完毕(4)，再判断响应状态码是否成功响应(200)
	5. 获取服务器响应的结果，因为是json对象，可以使用eval函数进行生成相应的对象
	6. 创建表格,设置属性值
	7. 遍历json对象,表格中插入行，单元格，在单元格中设置值
	8. 最后将表格添加到div区域中
	9. 建立连接，发送
	
四、 编写服务端Servlet类
	1. 建立JsonTableServlet类
	2. 设置输出编码
	3. 获取商品数据封装成json对象
	4. 将json对象输出

4. XStream封装省市名称实现二级联动

一、建立City/Province
	City类
		private String name;
		private String description;
	Province类
	private String name;
	private String prefix;
	private List<City> cities = new ArrayList<City>();

	ProvinceDB类
	private List<Province> ps = new ArrayList<Province>();

	Province sd = new Province("山东省", "SD");
	sd.getCities().add(new City("济南市", "省会"));
	sd.getCities().add(new City("青岛市", "海滨城市"));
	sd.getCities().add(new City("淄博市", "重工业"));
	
	Province hb = new Province("湖北省", "HB");
	hb.getCities().add(new City("武汉市", "省会"));
	hb.getCities().add(new City("黄冈市", "教学很好"));
	hb.getCities().add(new City("荆州市", "三国古城"));
	ps.add(sd);
	ps.add(hb);
	
二、 建立服务端响应的Servlet类
	1. 设置输出编码
	2. new一个XStream用作生成XML对象
	3. 开启自动探测注解
	4. 将对象转换成XML
	5. 将对象输出
	
三、 页面设计
	省市选项下拉菜单，其中省设置onchange事件
	
四、 编写AJax引擎
1. 实现省份下拉菜单选取
	1). 导入util.js
	2). 页面加载方法window.onload
	3). 获取Ajax引擎，绑定状态返回监听事件方法xhr.onreadystatechange方法
	4). 判断当前状态是否响应完毕(4),在判断响应是否成功，状态码(200)
	5). 获取xml响应的对象responseXML
	6). 得到省份下拉菜单节点对象
	7). 从响应对象中获取province节点，得到一组省份值
	8). 遍历获得的provinceArr节点对象
	9). 读取每个节点的name属性的值
	10). 生成Option对象,并赋读取到的值
	11). 将option对象添加到省份节点中
	
2. 选择省份改变城市列表(省份选取触发onchange事件)
	1). 获取省份下拉列表节点对象
	2). 得到省份下拉列表对象的value值provinceSel.options[provinceSel.selectIndex].text
	3). 获取城市下拉列表节点对象
	4). 通过服务端响应的XML对象获取省份的所有节点
	5). 判断省份对象的值是否和初始值相等,
	6). 如果相等，新建Option对象,赋值option初始值,清空城市的原有节点，将opt添加到城市列表中
	7). 否则，先执行第6布(需不需要初始值，看是否执行第6布)
	8). 遍历省份的节点对象
	9). 取出省份属性的值
	10). 判断选取的是否和响应省份的值是否相等
	11). 如果相等说明找到这个省份,通过响应省份的节点对象获取所有孩子节点
	12). 遍历孩子节点对象(就是所有城市的节点)
	13). 首先先判断是否是节点对象,通过nodeType==1
	14). 获取每隔城市节点的值
	15). 新建一个option对象，将城市节点的值赋给该对象
	16). 最后将option添加到城市中去