Ajax总结

Posted 2020-09-27

1.ajax概念

2.ajax原理
3.ajax开发步骤
4.示例
5.优化问题？
返回json数据进行优化
返回xml进行优化
javabean对象--------------> XML-----------------(XStream)

一、AJAX是什么？
AJAX ： 异步 javascript和 XML
AJAX ：带来用户体验改变，是web优化一种主要手段

AJAX = Dhtml (HTML、CSS、JavaScript ) + XMLHttpRequest 对象

二、它的优点？
传统web交互模型，浏览器直接将请求发送给服务器，服务器回送响应，直接发给浏览器，
Ajax交互模型，浏览器首先将请求 发送 Ajax引擎（以XMLHttpRequest为核心），
AJax引擎再将请求发送给 服务器，服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示

1、同步交互模式，客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作
2、异步交互模型，客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务器端通信，
当响应回来后，Ajax引擎（javascript 调用 DOM）会更新客户页面，在客户端提交请求后，用户可以继续操作，
而无需等待 。

三、用在哪些地方？
Google ： suggest建议、邮件定时保存、map地图

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

五、常用对象XMLHttpRequest
方法：
open
send
属性：
onreadystatechange ：状态回调函数
responseText/responseXML ：服务器的响应字符串
status：服务器返回的HTTP状态码
statusText: 服务器返回的HTTP状态信息
readyState ：对象状态 (0,1,2,3,4)

六、客户端向服务器提交数据
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请求，验证用户名是否存在
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState ==4 ){
if(xmlHttp.status == 200){
...
}
}
};
xmlHttp.open("GET","checkUsername?username="+username);
xmlHttp.send(null);

练习二：通过链接 获得table数据，显示 --- 返回HTML片段
* 通过product.jsp 生成 HTML片段，返回客户端，客户端Ajax引擎接收，
通过innerHTML 将tbale元素 嵌入到页面内部

2、 返回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格式数据 ---- 依赖第三方开源类库

3、 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);

练习三：重写练习二 返回结果数据是json格式数据
* 客户端获得json格式字符串后，转换为 javascript对象 ------- eval("("+jsonstr+")");

八、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 (PULL Manifest.xml)

将 xstream-1.3.1.jar 、xpp3_min-1.1.4c.jar 复制工程lib 目录下

核心方法
xSteam.alias(name,Class); 将类型解析或者序列化 定义一个别名
toXML(obj) 将对象序列化XML
fromXML(inputStream/xml片段) 将xml信息解析对象

提供便捷注解 @Override @Test
@XStreamAlias(别名) 对类和变量设置别名
@XStreamAsAttribute 设置变量生成属性
@XStreamOmitField 设置变量 不生成到XML
@XStreamImplicit 不会生成集合结点

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

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