Ajax的使用详解
什么是Ajax？
简单说就是页面发送请求时，用户能够看到页面，不是空白的而传统的web应用是同步的，发送请求，未响应回来（页面上白色的，体验不好）Ajax能解决这个问题。页面不重新加载能完成局部页面更新
- Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。
Ajax使用
XMLHttp对象
XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript、VBScript 以及其它 web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为Ajax编程的核心对象。
使用的方法
- 创建XMLHttpRequest对象
var xhr =new XMLHttpRequest();
- 给指定请求方式以及请求地址
xhr.open("get","请求的url");
- 发送请求
xhr.send()
- 获取服务器给客户端的响应数据
//给onreadystatechange这个属性附一个函数地址（回调）
xhr.onreadystatechange = function () {
// 做状态判断,4表示响应结束,以及状态是200
if(xhr.readyState == 4 && xhr.status==200){
//取响应内容，这个就是服务端响应的内容
alert(xhr.responseText);
//添加到span标签中
document.getElementById("span").innerHTML=xhr.responseText;
}
}
案例实现
首先创建新的项目，依旧需要进行导包（servletjar包），其次就是在servlet进行响应时不能使用重定向和请求转发的方式进行（需要使用字符输出流进行）
//jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function but() {
// 创建对象
var xhr = new XMLHttpRequest();
//给定请求方式和url
xhr.open("get","ajax.do");
//发送异步请求
xhr.send();
//给onreadystatechange这个属性附一个函数地址（回调）
xhr.onreadystatechange = function () {
// 做状态判断,4表示响应结束,以及状态是200
if(xhr.readyState == 4 && xhr.status==200){
//取响应内容，这个就是服务端响应的内容
alert(xhr.responseText);
//添加到span标签中
document.getElementById("span").innerHTML=xhr.responseText;
}
}
}
</script>
</head>
<body>
<h3>北京你好</h3>
<hr/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()">
</body>
</html>
//创建servlet
package com.hhxx.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@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();
}
}
实现原理
实现异步的主要原理
- 我们需要通过一个事件来触发异步请求，从而会实例化xhr（ajax核心对象），通过这个对象调用send()方法发送请求，服务端收到请求进行响应（通过字符输出流的方式。谁来处理我们响应的内容？xhr通过回调的方式，调用xhr.onreadystatechage（调用onreadystatechage的函数，而我们的函数就在它调用的这个函数里）从而完成请求的实现
json使用
什么是json
是基于字符串的轻量级的数据交互格式，json是JavaScript数据类型的子集。在json之前会使用xml进行数据格式传输数据，而json出现之后则使用json传输，因为json比xml更小更快，易于解析
json格式特点
JSON 是按照特定的语法规则所生成的字符串结构。
- 大括号表示 JSON 的字符串对象。
- 属性和值用冒号分割。{"属性":"value"} 若value是数字不用加双引号
- 属性和属性之间用逗号分割。{"属性":"value","属性":"value",...} - 中括号表示数组。[{"属性":"value"...},{"属性":"value"...}]
json对象
{"userid":1,"username":"admin","sex":"male"}
[{"userid":1,"username":"admin"},{"userid":2,"username":"oldlu"}]
json数据类型
- string:字符串，必须要用双引号引起来。
- number:数值，与 JavaScript 的 number 一致，
- object:JavaScript 的对象形式，{ key:value }表示方式，可嵌套。
- array:数组，JavaScript 的 Array 表示方式[ value ]，可嵌套。
- true/false:布尔类型，JavaScript 的 boolean 类型。
- null:空值，JavaScript 的 null。
Jackson使用
jdk没有内置操作JSON格式的数据API，因此需要借助第三方类库来处理json数据
这里以Jacson为例，使用之前需要下载3个jar包
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
在响应中通过json格式传递数据
在响应中使用jackson处理json步骤
1.添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
2.通过 jackson API 将 Java 对象转换 JSON 格式
3.修改响应头，响应类型为 application/json
4.将结果基于字符输出流推回客户端浏览器
5.在页面的中通过 JavaScript 的 JSON.parse()函数将 JSON 格式的数据转换为 JavaScript对象，json属于特殊格式的字符串结构，通过解析来操作js对象，从而方便的获取响应数据
通过json格式响应传递单个对象
需求:
定义一个 Users 类，包含 userid、username 属性。
实例化一个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器。 将 Users 对象中的数据插入到页面中。
省略Users类
/**
* 通过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("jack");
//user对象不能用字符流进行输出（输出是对象的引用）
//使用jackson的api将users对象转换为json格式的字符串对象
ObjectMapper objectMapper =new ObjectMapper();
String string = objectMapper.writeValueAsString(users);
System.out.println(string);
//设置响应类型为application/json
resp.setContentType("application/json");
PrintWriter pw = resp.getWriter();
pw.println(string);
pw.flush();
pw.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function but() {
// 创建对象
var xhr = new XMLHttpRequest();
//给定请求方式和url
xhr.open("get","single.do");
//发送异步请求
xhr.send();
//给onreadystatechange这个属性附一个函数地址（回调）
xhr.onreadystatechange = function () {
// 做状态判断,4表示响应结束,以及状态是200
if(xhr.readyState == 4 && xhr.status==200){
//取响应内容，这个就是服务端响应的内容
alert(xhr.responseText);
//通过javascript的内置对象Jason的parse函数将json格式的字符串对象转换成JavaScript对象
//添加到span标签中
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>
- 对于多个对象使用json格式响应，其实和单个大同小异，这里list是存储多个对象的集合，只需要注意：
1.依旧是通过创建ObjectMapper对象和调用writeValueAsString()方法
ObjectMapper objectMapper =new ObjectMapper();
//不管什么对象，都能转换成字符串
String string = objectMapper.writeValueAsString(list);
2.在结果输出的时候使用循环和拼接进行输出
if (xhr.readyState == 4 && xhr.status==200){
alert(xhr.responseText);
var obj = JSON.parse(xhr.responseText);
var temp ="";
//由于是一个list对象需要进行遍历
for(i=0;i<obj.length;i++){
alert(obj[i].userid+" "+obj[i].username);
temp += obj[i].userid+" "+obj[i].username+"<br/>"
}
document.getElementById("span").innerHTML = temp;
}
在json中通过map传递数据
map属于通用型的数据，本身就有key和value的结构和json格式对象模型完全匹配，我们可以直接将一个Map对象转换为json字符对象。
public class MapModelServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//一个Map对象表示的是一个Jason格式对象
Map<String,Object> map =new HashMap<>();
map.put("userid",1);
//不改变实体类
map.put("url","map.do");
ObjectMapper objectMapper =new ObjectMapper();
String string =objectMapper.writeValueAsString(map);
resp.setContentType("application/json");
PrintWriter pw = resp.getWriter();
System.out.println(string);
pw.println(string);
pw.flush();
pw.close();
}
}
请求中通过json格式传递数据
请求中传递数据，提交方式需要使用Post
请求中使用JackSon处理JSON格式数据步骤
- 添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
- 在页面的 JavaScript 中通过 JSON.stringify()函数将 JavaScript 对象转换为 JSON 格式的数据
js对象{属性名:值，属性名:值}
json对象 - 将请求方式修改为 POST 方式 （tomcat不会处理）
- 通过 send()函数将 JSON 格式的数据提交到服务端。
- 在 Servlet 中通过字符输入流读取请求体中 JSON 格式的数据
- 通过 jackson API将获取到的 JSON 格式的数据转换为 Java 对象
具体实现
servelt:
**
* 在请求中通过json格式传递数据
* */
@WebServlet("/json.do")
public class RequestJSONServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//通过字符输入流从请求体中获取提交的json格式数据
req.setCharacterEncoding("utf-8");
String s = req.getReader().readLine();
//使用Jackson将JSON格式字符串对象转换成java对象
ObjectMapper objectMapper =new ObjectMapper();
//json对象有哪些属性，返回Users对象
Users users = objectMapper.readValue(s, Users.class);
System.out.println(users.getUserid()+""+users.getUsername());
resp.setContentType("application/json");
PrintWriter pw = resp.getWriter();
pw.print("ok");
pw.flush();
pw.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function but() {
//取请求的值
var id = document.getElementById("userid").value;
var name =document.getElementById("username").value;
//定义js对象，属性名要和对应属性的名字相同（这里是Users类）
var obj ={userid:id,username:name}
//将js对象转换成json格式的对象
var content =JSON.stringify(obj);
alert(content);
// 创建对象
var xhr = new XMLHttpRequest();
//给定请求方式和url
xhr.open("post","json.do");
//发送异步请求，传递到servlet中
xhr.send(content);
//给onreadystatechange这个属性附一个函数地址（回调）
xhr.onreadystatechange = function () {
// 做状态判断,4表示响应结束,以及状态是200
if(xhr.readyState == 4 && xhr.status==200){
//取响应内容，这个就是服务端响应的内容
alert(xhr.responseText);
document.getElementById("span").innerHTML=xhr.responseText;
}
}
}
</script>
</head>
<body>
<h3>在请求中通过json格式传递数据</h3>
<hr/>
用户ID：<input name="userid" id="userid"/><br/>
用户姓名：<input name="username" id="username"/><br/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()">
</body>
</html>
常用注解
- @JsonProperty
此注解用于属性上，作用是把该属性的名称序列化为另外一个名称，如把 username 属 性序列化为 name，@JsonProperty("name")。其实就是给json改名 - @JsonIgnore
此注解用于属性或者方法上(一般都是定义在属性上)，用来完全忽略被注解的字段和 方法对应的属性，返回的 json 数据即不包含该属性。多个注解时有@JsonIgnore则会忽略所有注解 - @JsonFormat
此注解用于属性或者方法上(一般都是定义在属性上)，可以方便的把 Date 类型属性的值直接转化为我们想要的样式。如:@JsonFormat(pattern="yyyy-MM-dd hh:mm:ss")
jackson工具类使用
我们在使用jackson时，每次都需要调用一些对象如：ObjectMapper，因此将重复对象做工具类的封装方便每次的调用
/**
* JSON转换工具类
*/
public class JsonUtils {
// 定义jackson对象
private static final ObjectMapper MAPPER = new ObjectMapper();
/**
* 将对象转换成json字符串。
*/
public static String objectToJson(Object data) {
try {
String string = MAPPER.writeValueAsString(data);
return string;
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return null;
}
/**
* 将json结果集转化为对象
*/
public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {
try {
T t = MAPPER.readValue(jsonData, beanType);
return t;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* 将json数据转换成pojo对象list
*/
public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {
JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
try {
List<T> list = MAPPER.readValue(jsonData, javaType);
return list;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
Jquery的Ajax使用
JQuery中提供了ajax封装，可以让我们使用ajax技术更加方便。
$.ajax()使用
常用的语法结构$({})
data: 规定发送到服务器的数据
success():当请求成功运行的函数
type： 规定请求类型（post或get）
url：规定发送请求的的url，默认是当前页面
$.ajax()异步中请求提交数据
$.ajax()方法中通过data属性来存放提交的数据，支持JSON格式的数据
在date属性中有两种方式提交数据数据，标准格式和js对象来指定提交数据。无论使用哪种方式在Servlet中通过request.getParameter方式获取name来获取value
- 通过标准格式指定提交数据
data:”name=value&name=value.....” - 通过JavaScript对象指定提交数据
data:{
userid:100
username:jay
}
代码实例
/**
* 在$.ajax()方法提交数据
* */
@WebServlet("/data.do")
public class DataServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取Date提交的数据
String userid =req.getParameter("id");
String username =req.getParameter("name");
PrintWriter pw = resp.getWriter();
pw.print("userid="+userid+" username="+username);
pw.flush();
pw.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function but() {
//获取浏览器输入的值
var userid =$("#userid").val();
var username =$("#username").val();
$.ajax({
type:"get",
url:"data.do",
//标准方式
//data:"id="+userid+"&name="+username,
//js对象
data:{
id:userid,
name:username
},
success:function (result) {
$("#span").html(result);
}
});
}
</script>
</head>
<body>
用户ID：<input type="text" id="userid"/><br/>
用户名：<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>
提交json格式数据
在$.ajax()中提交 JSON 格式的数据需要使用post方式提交，通过 JSON.stringify()函数将 JavaScript 对象转换成 JSON 格式的字符串。在 Servlet 中通过字符输入获取提交的 JSON 格式 的数据。
data:JSON.stringify({name:value,name:value......})
在 Servlet 中通过 req.getReader().readLine()来获取提交的数据。
- 需要修改jsp中的type：post
- 将js格式转换为json格式，以上面的案例为例，将date：后面的内容放入函数中 JSON.stringify()
data:JSON.stringify({
id:userid,
name:username
}),
$ajax()处理响应中JSON格式数据
js格式对象：{userid=aa username=111}
json格式对象：{"id":"aa","name":"111"}
通过添加dataType：“json”，将json格式转换为js格式对象
- $.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型处理。如果响应的是一个 JSON 格式的数据，那么 dataType 的值为“JSON”,在回调函数中我们得到的直接就是JSON 字符串转换完的 JavaScript 对象。不需要在使用 JSON.parse()做格式的转换处理。
/**
* 提交json格式数据在页面中自动转换类型
*以json格式提交数据需要通过字符输入流进行接收
* 若是以标准类型或者js对象提交的话直接获取相应的值
* */
@WebServlet("/jsonConvert.do")
public class jsonConvertServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json");
//字符输入流获取的就是json的数据
req.setCharacterEncoding("utf-8");
String s = req.getReader().readLine();
resp.setCharacterEncoding("utf-8");
PrintWriter pw =resp.getWriter();
pw.print(s);
pw.flush();
pw.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function but() {
//获取浏览器输入的值
var userid =$("#userid").val();
var username =$("#username").val();
$.ajax({
//必须使用post提交
type:"post",
url:"jsonConvert.do",
//json格式转换成js对象
dataType:"json",
//标准方式
//data:"id="+userid+"&name="+username,
//js对象转换成Json格式进行提交
data:JSON.stringify({
id:userid,
name:username
}),
success:function (result) {
alert(result.id+" "+result.name);
$("#span").html(result.id+" "+result.name);
}
});
}
</script>
</head>
<body>
用户ID：<input type="text" id="userid"/><br/>
用户名：<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
$.get()的使用
该方法是$.ajax()方法基于 get 方式发送异步请求的简化版。
语法结构 $.get(url,function(result))，不需要再使用$.ajax()
$.get(url,data,function(result))
通过标准格式指定提交数据 $.get(url,”name=value&name=value”,function(result))
通过 JavaScript 对象指定提交数据 $.get(url,{userid:1,username:”oldlu”,......},function(result))
function but() {
//获取浏览器输入的值，data存放提交的数据
var userid = $("#userid").val();
var username = $("#username").val();
//标准格式数据提交
// $.get("data.do", "id="+userid+"&name="+username,function (result) {
// $("#span").html(result);
// });
//js对象格式,提交数据
$.get("data.do", {id:userid,name:username},function (result) {
$("#span").html(result);
});
}
$.post()的使用
$.post()方法是$.ajax()方法基于 post 方式发送异步请求的简化版。
语法结构 $.post(url,function(result))
$.post(url,data,function(result))
通过标准格式指定提交数据 $.post(url,”name=value&name=value”,function(result))
通过 JavaScript 对象指定提交数据 $.post(url,{userid:1,username:”oldlu”,......},function(result))
$.getJSON()的使用
相当于简化了dateType设置
$.getJSON()方法是$.ajax()方法基于 get 方式发送异步请求，并将响应结果中 JSON 格式 的字符串对象自动转换为 JavaScript 对象。在使用该方法时要求返回的数据必须是JSON格式类型。$.getJSON()方法和 resp.setContentType(“application/json”)是一起使用的。
语法结构 $.getJSON(url,function(result))
$.getJSON(url,data,function(result))
通过标准格式指定提交数据 $.getJSON(url,”name=value&name=value”,function(result))
要求返回的数据格式必须是 JSON 格式。
通过 JavaScript 对象指定提交数据
$.getJSON(url,{userid:1,username:”oldlu”,......},function(result)) 要求返回的数据格式必须是 JSON 格式。
/**
* getJSON方法传递数据并返回JSON格式数据
* */
@WebServlet("/getJson.do")
public class GetJSONServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
//这里的名称要与jsp中date存放的名称保持一致
String userid =req.getParameter("id");
String username =req.getParameter("name");
Map<String ,String> map =new HashMap<>();
map.put("userid",userid);
map.put("username",username);
//转换成Json格式字符串对象
String s=JsonUtils.objectToJson(map);
resp.setContentType("appliction/json");
PrintWriter pw =resp.getWriter();
pw.print(s);
pw.flush();
pw.close();
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function but() {
//获取浏览器输入的值，data存放提交的数据
var userid = $("#userid").val();
var username = $("#username").val();
//标准格式数据提交
$.getJSON("getJson.do", "id="+userid+"&name="+username,function (result) {
// 这个userid的key要与map(getJSONServlet)中的key相同,返回的是js对象
alert(result.userid+" "+result.username)
$("#span").html(result.userid+" "+result.username);
});
}
</script>
</head>
<body>
用户ID：<input type="text" id="userid"/><br/>
用户名：<input type="text" id="username"/><br/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>
serialize()方法的使用
将 form 表单中的数据自动拼接成 name=value&name=value 结构。
- 语法结构
var param = $(“form”).serialize();
param 的值为:name=value&name=value
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function but() {
//获取浏览器输入的值，data存放提交的数据
// var userid =$("#userid").val();
// var username =$("#username").val();
//使用serializa()方法拼接，需放入from表当中,拼接的是name-value，所以标签中要使用name名，名与servlet的名一致
var param = $("#form").serialize();
alert(param);
//标准方式提交数据
//data:"id="+userid+"&name="+username,
$.get("data.do",param,function(result){
$("#span").html(result);
})
}
</script>
</head>
<body>
<form id="form">
用户ID：<input type="text" name="id" id="userid"/><br/>
用户名：<input type="text" name="name" id="username"/><br/>
</form>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>
悲观者正确，乐观者成功
