ajax简单介绍
Ajax
ajax介绍
AJAX ： 异步 javascript和 XML
AJAX ：带来用户体验改变，是web优化一种主要手段
AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 对象
传统web交互模型，浏览器直接将请求发送给服务器，服务器回送响应，直接发给浏览器， Ajax交互模型，浏览器首先将请求 发送 Ajax引擎（以XMLHttpRequest为核心），AJax引擎再将请求发送给 服务器，服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示
1、同步交互模式，客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作
2、异步交互模型，客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待 。
Google ： suggest建议、邮件定时保存、map地图
ajax快速入门
1.创建XMLHttpRequest对象
2.将状态触发器绑定到一个函数
3.使用open方法建立与服务器的连接
4.向服务器端发送数据
5.在回调函数中对返回数据进行处理
XMLHttpRequest
方法： open send
属性：
onreadystatechange ：状态回调函数
responseText/responseXML ：服务器的响应字符串
status：服务器返回的HTTP状态码
statusText: 服务器返回的HTTP状态信息
readyState ：对象状态
客户端向服务器提交数据
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数据
回调函数编写
if(xmlHttp.readyState == 4){
// 判断数据是否正确
if(xmlHttp.status == 200){
// 响应有效
...
}
}
针对Ajax 不同三种服务器响应数据类型，进行编程
1、 HTML片段的响应数据
将返回HTML片段 通过 innerHTML 属性，插入指定元素内部
ajax案例
1通过离焦发送Ajax请求，验证用户名是否存在
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState ==4 ){
if(xmlHttp.status == 200){
...
}
}
};
xmlHttp.open("GET","checkUsername?username="+username);
xmlHttp.send(null);
2通过链接 获得table数据
显示 --- 返回HTML片段
* 通过product.jsp 生成 HTML片段，返回客户端，客户端Ajax引擎接收，通过innerHTML 将tbale元素 嵌入到页面内部
Json介绍
返回JSON格式数据
去掉多余 HTML标签元素，只返回有效数据部分，是一种更优的方案
什么是json， 是一种javascript轻量级数据交互格式，主要应用于Ajax编程
格式一： {key:value,key:value,key:value } 键值对直接用 , 分开，键值之间用 :
键 本身必须是字符串常量
{name : '张三'}
{'name':'张三'}
是等价的
值 加不加引号，是有区别的，不加引号是变量，加引号常量字符串
格式二： [值1, 值2 ,值3 ] 数组结构
组合后复杂格式
[{name:'aaa'}, {name:'bbb'}, {name:ccc}] 表示三个对象数组
JSON应用场景： AJAX请求参数 和响应数据
json-lib使用
是 java类库 ，支持 javabean map list array 转换 json格式字符串， 支持将json字符串转换 javabean对象
导入jar包（6个）
1) 转换数组 、List集合 到json格式字符串 - 使用JSONArray
String[] arr = {"sada","fdssd","dfsd","sadas"};
JSONArray jsonArray = JSONArray.fromObject(arr);
System.out.println(jsonArray.toString());
2） 将JavaBean/Map解析成JSON串：－ 使用JSONObject
Product p1 = new Product();
p1.setName("三星手机");
p1.setPrice(3999);
JSONObject jsonObject = JSONObject.fromObject(p1);
System.out.println(jsonObject);
3) 通过JsonConfig对象 配置对象哪些属性不参与转换
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[]{"price"});
JSONObject jsonObject = JSONObject.fromObject(p1, jsonConfig);
System.out.println(jsonObject);
l 重写练习二 返回结果数据是json格式数据
* 客户端获得json格式字符串后，转换为 javascript对象 ------- eval("("+jsonstr+")");
基于xml返回数据Ajax省市联动
XML结果数据生成
问题：服务器端如何将java对象，生成XML格式数据 ？ 需要第三方类库支持 XStream
XStream is a simple library to serialize objects to XML and back again.
如果实现 对象 --- xml 只需要 xstream-1.3.1.jar
如果实现 xml ---- 对象 需要 xstream-1.3.1.jar 、xpp3_min-1.1.4c.jar
将 xstream-1.3.1.jar 、xpp3_min-1.1.4c.jar 复制工程lib 目录下
核心方法
xSteam.alias(name,Class); 将类型解析或者序列化 定义一个别名
toXML(obj) 将对象序列化XML
fromXML(inputStream/xml片段) 将xml信息解析对象
提供便捷注解
@XStreamAlias(别名) 对类和变量设置别名
@XStreamAsAttribute 设置变量生成属性
@XStreamOmitField 设置变量 不生成到XML
@XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量 别名
使注解生效
xStream.autodetectAnnotations(true);
使用 xmlHttp.responseXML 接收解析成为 document对象