一、Ajax简介
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态应用的网页开发技术,无需重新加载整个网页的情况下,能够更新页面局部数据的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下,对页面的某部分进行更新。
二、Ajax的使用
1、XMLHttpRequest 对象
XMLHttpRequest 是浏览器接口对象,该对象的 API 可被 JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用,通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互,而无需让整个页面刷新,因此成为 Ajax 编程的核心对象。
2、Ajax的使用步骤
2.1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2.2、 给定请求方式以及请求地址
xhr.open("get","http://www.example.com");
2.3、 发送请求
xhr.send();
2.4、 获取服务器端给客户端的响应数据
xhr.onreadystatechange = function(){
//0:open()没有被调用
//1:open()正在被调用
//2:send()正在被调用
//3:服务端正在返回结果
//4:请求结束,并且服务端已经结束发送数据到客户端
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("span").innerHTML=xhr.responseText;
alert(xhr.responseText);
}
}
案例:
index.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function but() {
var xhr = new XMLHttpRequest();
xhr.open("get","ajax.do");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
document.getElementById("span").innerHTML = xhr.responseText;
}
}
}
</script>
</head>
<body>
<h3>AJAX异步请求</h3>
<hr/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
AjaxServlet.java:
@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter pw = resp.getWriter();
pw.println("Hello Ajax");
pw.flush();
pw.close();
}
}
运行结果:
3、Ajax的运行原理
三、 JSON详解
1、JSON简介
JSON(JavaScript Object Notation) 是一种基于字符串的轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。JSON 是 JavaScript 数据类型的子集。
2、为什么要使用JSON
在 JSON 未出现之前在 Ajax 中对于数据传递方式,会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更快,更易解析。
3、JSON的语法规则
JSON 是按照特定的语法规则所生成的字符串结构。
大括号表示 JSON 的字符串对象。{ }
属性和值用冒号分割。{“属性”:“value”}
属性和属性之间用逗号分割。{“属性”:“value”,“属性”:“value”,…}
中括号表示数组。[{“属性”:“value”…},{“属性”:“value”…}]
JSON 字符串对象:
数组:
4、JSON的6种数据类型
5、Jackson的使用
在 JDK 中并没有内置操作 JSON 格式数据的 API,因此使用处理 JSON 格式的数据需要借助第三方类库。
几个常用的 JSON 解析类库:
Gson: 谷歌开发的 JSON 库,功能十分全面。
FastJson: 阿里巴巴开发的 JSON 库,性能十分优秀。
Jackson: 社区十分活跃且更新速度很快。被称为“最好的 Json 解析器“
5.1、Jackson简介
Jackson 是一种解析 JSON 格式数据的 API,也是最流行,速度最快的 JSON API。在SpringMVC 中默认使用 Jackson API 处理 JSON 格式的数据。
Jackson 下载地址:
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
5.2、在响应中通过 JSON 格式传递
对象
5.3、通过 JSON 格式在响应中传递单个对象
需求:
定义一个 Users 类,包含 userid、username 属性。
实例化一个 Users 对象,通过 JSON 格式将 Users 对象响应到客户端浏览器。
将 Users 对象中的数据插入到页面中。
singleDemo.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function but() {
var xhr = new XMLHttpRequest();
xhr.open("get","single.do");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
//通过JavaScript的内置对象JSON中的parse函数将JSON格式的字符串转换成JavaScript对象
var obj = JSON.parse(xhr.responseText);
alert(obj.userid+" "+obj.username);
document.getElementById("span").innerHTML = obj.userid+"<br/>"+obj.username;
}
}
}
</script>
</head>
<body>
<h3>JSON格式的单个对象响应</h3>
<hr/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>
SingleObjectServlet.java:
//通过JSON格式响应单个对象
@WebServlet("/single.do")
public class SingleObjectServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//创建Users对象
Users users = new Users();
users.setUserid(1);
users.setUsername("Corey");
//使用jackson的API将Users对象转换为JSON格式的字符串对象
ObjectMapper objectMapper = new ObjectMapper();
//将Users对象转换为JSON格式的字符串对象
String string = objectMapper.writeValueAsString(users);
System.out.println(string);
//设置响应类型为application/json
resp.setContentType("application/json");
PrintWriter pw = resp.getWriter();
pw.print(string);
pw.flush();
pw.close();
}
}
运行结果:
5.4、通过 JSON 格式在响应中传递多个对象
需求:
定义一个 Users 类,包含 userid、username 属性。
实例化多个 Users 对象,通过 JSON 格式将 Users 对象响应到客户端浏览器。
将 Users 对象中的数据插入到页面中。
MultipleObjectServlet.java
//通过 JSON 格式在响应中传递多个对象
@WebServlet("/multiple.do")
public class MultipleObjectServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Users users1 = new Users();
users1.setUserid(1);
users1.setUsername("Corey");
Users users2 = new Users();
users2.setUserid(2);
users2.setUsername("kang");
//将多个对象放入到集合中
List<Users> list = new ArrayList<>();
list.add(users1);
list.add(users2);
//通过jackson将List转换为JSON格式的字符串对象
ObjectMapper objectMapper