Java Web学习 Ajax
1 概述
(1) 概念
AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript和XML。
(2) 作用
<1> 与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。
//可以使用AJAX和服务器进行通信，来使用 HTML+AJAX来替换JSP页面了。弥补了HTML不能展示数据的缺点。
//浏览器发送请求servlet，servlet调用完业务逻辑层后将数据直接响应回给浏览器页面，页面使用HTML来进行数据展示，而非JSP。
<2> 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
//在整个过程中也没有页面的刷新，只是在局部展示出了提示信息，达到更新局部页面的效果。
//如：搜索联想、用户名是否可用校验。
(3) 同步和异步
<1> 同步：浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
<2> 异步：浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。
2 快速入门
(1) 服务端实现
创建名为 AjaxServlet 的servlet
//一个普通的servlet，仅作展示用，没什么特别的。
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 响应数据
response.getWriter().write("hello ajax~");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}(2) 客户端实现
//创建名为 ajax-demo.html 的页面，在该页面<Script>书写ajax代码
<1> 创建核心对象，不同的浏览器创建的对象是不同的
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}<2> 发送请求
//建立连接xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
//此处的地址必须写全，即使用tomcat访问时搜索栏的地址。因为当前后端分离时，一个完整的软件是前后端两个独立的项目。
//发送请求xhttp.send();
<3> 获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 通过 this.responseText 可以获取到服务端响应的数据
alert(this.responseText);
}
};
3 axios
(1) 概述
Axios 对原生的AJAX进行封装，简化书写。
(2) 快速入门
<1> 服务端实现
@WebServlet("/AxiosServlet")
public class AxiosServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收请求参数
String username = request.getParameter("username");
System.out.println(username);
//响应数据
response.getWriter().write("hello Axios~");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}<2> 客户端实现
<2.1> 引入 axios 的 js 文件<script src="js/axios-0.18.0.js"></script>
<2.2> 使用axios 发送请求，并获取响应结果
① 发送 get 请求
前端发送复杂数据时，比如对象，会使用post请求发送JSON字符串；不过若前端通过Ajax发送简单的数据时，可以通过get方式，即url?参数&参数的方式，此时后端获取数据仍使用getParameter()方法。
axios({//发送请求
method:"get",
url:"http://localhost:8080/ajax-demo/AxiosServlet?username=zhangsan"
}).then(function (resp){//将响应封装为resp对象
//对response中的数据进行处理
alert(resp.data);//resp.data可以获取响应中的数据
})② 发送 post 请求(多于JSON搭配使用)
后端使用request.getReader()获取请求体，将JSON字符串转化为Java对象。
//与get请求方式的不同点：参数位置不同。
axios({
method:"post",
url:"http://localhost:8080/ajax-demo/AxiosServlet",
data:"username=zhangsan"
}).then(function (resp){
alert(resp.data);
});<2.3> axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：
① method 属性：用来设置请求方式的。取值为 get 或者 post 。
② url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
③ data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
<2.4> then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。
(3) 请求方法别名
<1> Axios 已经为所有支持的请求方法提供了别名
get请求：axios.get(url,config)
delete请求：axios.delete(url,config)
head请求：axios.head(url,config)
options请求：axios.option(url,config)
post请求：axios.post(url,data,config)
put请求：axios.put(url,data,config)
patch请求：axios.patch(url,data,config)
<2> 代码实现
<2.1> get 请求
axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function(resp){
alert(resp.data);
});<2.2> post 请求
axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function(resp){
alert(resp.data);
})
4 JSON
(1) 概述
由于其语法格式简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
(2) 基础语法
//本质是一个字符串。
var 变量名 = '{
"key":value,
"key":value,
//json 格式中的键要求必须使用双引号括起来
...
}';/* JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下:
数字（整数或浮点数）
字符串（使用双引号括起来）
逻辑值（true或者false）
数组（在方括号中）
对象（在花括号中）
null */
(3) JSON串和js对象的相互转换
//如果JSON转化为js对象，我们就可以通过 js对象.属性名 的方式来获取数据。
<1> parse(str) ：将 JSON串转换为 js 对象。如：var jsObject = JSON.parse(jsonStr);//JSON对象的静态方法。
<2> stringify(obj) ：将 js 对象转换为 JSON 串。如：var jsonStr = JSON.stringify(jsObject);//JSON对象的静态方法。
(4) 发送异步请求携带参数
<1> 使用 axios 发送请求时，如果要携带复杂的数据时都会以 JSON 格式进行传递。
<2> 一般情况下，可以提前定义一个js对象，用来封装需要提交的参数，然后使用JSON.stringify(js对象) 转换为JSON串，再将该JSON串作为axios的data属性值进行请求参数的提交。
//js对象->JSON串
<3> 但是，我们只需要将需要提交的参数封装成js对象，并将该js对象作为axios的data属性值进行，axios会自动将js对象转换为JSON串进行提交。
//直接使用js对象即可。
<4> js提供的JSON对象我们只需要了解一下即可。因为axios会自动对js对象和JSON串进行想换转换。
<5> 发送异步请求时，如果请求参数是JSON格式，那请求方式必须是POST。因为JSON串需要放在请求体中。
(5) JSON串和Java对象的相互转换
<1> 导入坐标
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency><2> Java对象转JSON//序列化
① String jsonStr = JSON.toJSONString(obj);
② 代码实现：
//servlet中，使用request.getParameter不能接收json格式的数据，必须先获取请求体参数，再转化为Java对象。
//获取请求体数据（请求参数是JSON格式，那请求方式必须是POST）
BufferedReader br = request.getReader();
String params = br.readLine();
//将JSON字符串转为Java对象
Brand brand = JSON.parseObject(params, Brand.class);<3> JSON字符串转Java对象//反序列化User user = JSON.parseObject(jsonStr, 实体类.class);
//第二个参数为所要转化的实体类。
5 总结
(1) 前端实现
//与jsp区别：jsp直接使用表单的action发送请求，而Ajax或者说Axios则是通过js添加事件来发送请求。
<1> 添加事件，获取数据。
<2> 创建js对象，添加获取到的数据。
<3> 添加事件，利用Axios发送请求，将js对象作为参数。//需导入Axios的js文件
axios({
method:"post",
url:"url",
data:js对象
}).then(function (resp){
alert(resp.data);
});(2) 后端实现
<1> 获取请求体。BufferedReader br = request.getReader();String params = br.readLine();
<2> 将json数据转化为java对象。//需添加fastjson坐标User user = JSON.parseObject(jsonStr, 实体类.class);
<3> 调用service层处理前端数据。Service service = new Service();service.方法();
<4> 将处理结果转换为JSON数据。String jsonStr = JSON.toJSONString(obj);
<5> 利用response发送响应。response.setContentType("text/json;charset=utf-8");//若中文乱码response.getWriter().write();
浙公网安备 33010602011771号