Ajax && JSON
一 Ajax概述
AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML
本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术
一般的网页如果需要更新内容，必需重新加载个页面
而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新
同步与异步方式的区别
同步方式发送请求
由浏览器发送请求给服务器，它们之间是串行操作，如果服务器没有响应回来，我们不能进行下一步的操作，这期间浏览器只能等待
异步方式发送请求
由 JavaScript 生成一个对象，这个对象 XMLHttpRequest，由这个对象去发送请求给服务器，并且是后台发送的，不会影响用户操作体验。而且浏览器与服务器之间是并行操作的。
二 原生 JavaScript 实现 AJAX
什么是原生的ajax
所有的 AJAX 的操作代码都使用纯 JS 去完成，不使用任何框架。开发效率相对低，代码量会更大一些
核心对象XMLHttpRequest
用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象说明
new XMLHttpRequest()创建一个请求对象
XMLHttpRequest 对象的事件说明
onreadystatechange当这个请求对象的准备状态发生改变时，激活这个事件如：后台操作的时候，发送请求给服务器，这个状态就会发生变化。如：响应回来，这个状态也会发生变化
XMLHttpRequest 对象的属性说明
readyState这个属性用来得到准备状态的值，如果这个值等于 4 表示请求结束并且服务器已经响应回来。status状态码，服务器状态码是 200，表示响应正确responseText取得从服务器发送回来的数据，文本格式
XMLHttpRequest 对象的方法说明
open(“GET”,“URL”,true)作用： 打开与服务器的连接参数：1. GET 或 POST，以什么方式打开连接。GET 方式的参数在 URL 上传递。2. URL 服务器的访问地址3. true 代码异步执行，false 代码同步执行send()作用： 发送请求给服务器
案例
姓名文本框失去焦点事件 验证用户是否可用
环境准备
<body>
<form autocomplete
="off">
姓名：
<input type
="text" id
="username">
<span id
="uSpan"></span
>
<br>
密码：
<input type
="password" id
="password">
<br>
<input type
="submit" value
="注册">
</form
>
</body
>
<script>
document
.getElementById("username").onblur
= function
() {
let xmlHttp
= new XMLHttpRequest();
let username
= document
.getElementById("username").value
;
xmlHttp
.open("GET","userServlet?username="+username
,true)
xmlHttp
.send();
xmlHttp
.onreadystatechange
= function
() {
if (xmlHttp
.readyState
== 4 && xmlHttp
.status
== 200) {
document
.getElementById("uSpan").innerHTML
= xmlHttp
.responseText
;
}
}
}
三 jQuery 的 方式实现 AJAX
3.1 jQuery 的 GET 方式实现 AJAX
核心语法
$
.get(url
,[data
],[callback
],[type
]);
url：请求的资源路径。
data：发送给服务器端的请求参数，格式可以是key
=value，也可以是 js 对象。
callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
type：预期的返回数据的类型，取值可以是 xml
, html
, js
, json
, text等。
$
("#username").blur(function
() {
let username
= $
("#username").val();
$
.get(
"userServlet",
"username=" + username
,
function
(data
) {
$
("#uSpan").html(data
);
},
"text"
);
});
3.2 jQuery 的 POST 方式实现 AJAX
核心语法
$
.post(url
,[data
],[callback
],[type
]);
url：请求的资源路径。
data：发送给服务器端的请求参数，格式可以是key
=value，也可以是 js 对象。
callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
type：预期的返回数据的类型，取值可以是 xml
, html
, js
, json
, text等。
<script>
$
("#username").blur(function
() {
let username
= $
("#username").val();
$
.post(
"userServlet",
"username=" + username
,
function
(data
) {
$
("#uSpan").html(data
);
},
"text"
);
});
</script
>
3.3 jQuery 的通用方式实现 AJAX
核心语法
$
.ajax({name
:value
,name
:value
,…
});
url：请求的资源路径。
async：是否异步请求，
true-是，
false-否
(默认是
true)。
data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
name
=value
&name
=value
&...
{key
:value
, key
:value
,...}
type：请求方式，POST 或 GET
(默认是 GET
)。
dataType：预期的返回数据的类型，取值可以是xml
, html
, js
, json
, text等。
success：请求成功时调用的回调函数。
error：请求失败时调用的回调函数。
$
("#username").blur(function
() {
let username
= $
("#username").val();
$
.ajax({
url
:"userServlet",
async
:true,
data
:"username="+username
,
type
:"POST",
dataType
:"text",
success
:function
(data
) {
$
("#uSpan").html(data
);
},
error
:function
() {
alert("操作失败...");
}
});
JSON
一 JSON 回顾
概述
JSON(JavaScript Object Notation
)：是一种轻量级的数据交换格式
它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率。
API
类型语法说明
对象类型{name:value,name:value,…}name是字符串类型，value可以是任意类型数组/集合类型[{name:value,…},{name:value,…}]同上混合类型{name:[{name:value,…},{name:value,…}]}同上
常用方法
成员方法说明
stringify(对象)将指定对象转换为json格式字符串parse(字符串)将指定json格式字符串解析成对象
二 JSON 转换工具
介绍
JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包
可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象
Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使Jackson。
1. 导入 jar 包。
2. 创建核心对象。
3. 调用方法完成转换。
常用类
类名说明
ObjectMapper是Jackson工具包的核心类, 它提供一些方法来实现 JSON 字符串和对象之间的转换TypeReference对集合泛型的反序列化，使用TypeReference可以明确的指定反序列化的对象类型
ObjectMapper 常用方法
方法名说明
String writeValueAsString(Object obj)将Java对象转换成JSON字符串 T readValue(String json, Class valueType)将JSON字符串转换成Java对象 T readValue(String json, TypeReference valueTypeRef)将JSON字符串转换成Java对象,多用于含有自定义类的转换
三 JSON 工具转换练习
环境准备 创建一个User类
public class User {
private String name
;
private Integer age
;
..构造方法
..
set和get
...
private ObjectMapper mapper
= new ObjectMapper();
1. java 对象转 JSON
, JSON 转 java对象
User user
= new User("张三",23);
String json
= mapper
.writeValueAsString(user
);
System
.out
.println("json字符串：" + json
);
User user2
= mapper
.readValue(json
, User
.class);
System
.out
.println("java对象：" + user2
);
输出结果
:
json字符串：
{"name":"张三","age":23}
java对象：User
{name
='张三', age
=23}
2. Map
<String,String>转 JSON
, JSON 转 Map
<String,String>。
HashMap
<String,String> map
= new HashMap<>();
map
.put("姓名","张三");
map
.put("性别","男");
String json
= mapper
.writeValueAsString(map
);
System
.out
.println("json字符串：" + json
);
HashMap
<String,String> map2
= mapper
.readValue(json
, HashMap
.class);
System
.out
.println("java对象：" + map2
);
3. Map
<String,User>转 JSON
, JSON 转 Map
<String,User>。
HashMap
<String,User> map
= new HashMap<>();
map
.put("黑马一班",new User("张三",23));
map
.put("黑马二班",new User("李四",24));
String json
= mapper
.writeValueAsString(map
);
System
.out
.println("json字符串：" + json
);
HashMap
<String,User> map2
= mapper
.readValue(json
,new TypeReference<HashMap
<String,User>>(){});
System
.out
.println("java对象：" + map2
);
4. List
<String>转 JSON
, JSON 转 List
<String>。
ArrayList
<String> list
= new ArrayList<>();
list
.add("张三");
list
.add("李四");
String json
= mapper
.writeValueAsString(list
);
System
.out
.println("json字符串：" + json
);
ArrayList
<String> list2
= mapper
.readValue(json
,ArrayList
.class);
System
.out
.println("java对象：" + list2
);
5. List
<User>转 JSON
, JSON 转 List
<User>。
ArrayList
<User> list
= new ArrayList<>();
list
.add(new User("张三",23));
list
.add(new User("李四",24));
String json
= mapper
.writeValueAsString(list
);
System
.out
.println("json字符串：" + json
);
ArrayList
<User> list2
= mapper
.readValue(json
,new TypeReference<ArrayList
<User>>(){});
System
.out
.println("java对象：" + list2
);
综合练习 一 搜索联想
分析
页面
1. 为用户名输入框绑定鼠标点击事件。
2. 获取输入的用户名数据。
3. 判断用户名是否为空。
4. 如果为空，则将联想提示框隐藏。
5. 如果不为空，则发送 AJAX 请求，并将响应的数据显示到联想框
控制层
1. 获取请求参数。
2. 调用业务层的模糊查询方法。
3. 将返回的数据转成 JSON，并响应给客户端
综合练习 二 分页
分析
如何确定当前显示的数据已经浏览完毕
公式：
(滚动条距底部的距离
+ 滚动条上下滚动的距离
+ 当前窗口的高度
) >= 当前文档的高度
当前文档高度：存储
10条数据，
100px。
滚动条距底部的距离：
1px。
当前窗口的高度：
80px。
滚动条上下滚动的距离：
>=19px。
方法说明
$(function(){})页面加载事件$(window)获取当前窗口对象scroll()鼠标滚动事件$(window).height()当前窗口的高度$(window).scrollTop()滚动条上下滚动的距离$(document).height()当前文档的高度
实现 - ->服务器
1. 获取请求参数。
2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象。
3. 封装 PageInfo 对象。
4. 将得到的数据转为 json。
5. 将数据响应给客户端。
实现 - ->页面
1. 引入分页插件的样式文件和 js 文件。
2. 定义当前页码和每页显示的条数。
3. 调用查询数据的函数。
4. 定义请求查询分页数据的函数，发起 AJAX 异步请求。
5. 为分页按钮区域设置页数参数
(总页数和当前页
)。
6. 为分页按钮绑定单击事件
,完成上一页下一页查询功能。
