目录
前言
了解Ajax技术,充分学习异步请求局部刷新
能够使用 axios 发送 ajax 请求 熟悉 json 格式,并能使用 Fastjson 完成 java 对象和 json 串的相互转换
提示:以下是本篇文章正文内容,下面案例可供参考
一、Ajax
1、什么是Ajax?
ASynchronous JavaScript And Xml ----异步的脚本的和XML。
Ajax是一种无需重新加载网页,就能更新部分网页脚本技术。特点:异步交互,局部刷新。
传统网页和服务器交互方式:同步交互,全部刷新。
2、同步
客户端必须等待,服务器端进行操作,返回应答,才能进行下一步操作
浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。
3、异步
无需等待服务器应答结果,就可进行一步的操作。
浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做 其他的操作。
4、局部刷新
不是刷新整个页面,而刷新页面的局部,取决于服务器端返回内容类型((text/html)或 (text/xml、application/json
5、Ajax好处:
提高用户的体验
节省带宽
前后端分离(ajax+JSON)
6、代码实现
6.1服务器端: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, HttpServletResponseresponse) throws ServletException, IOException {
this.doGet(request, response);
}
}
6.2客户端实现--html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//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");
xhttp.send();
//3. 获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
</script>
</body>
</html>
二、Axios
1、什么是Axios
Axios 对原生的AJAX进行封装,简化书写。
功能强大的Ajax Axios官网是: https://www.axios-http.cn
2、Axios的使用
2.1引入 axios 的 js 文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/axios-0.18.0.js"></script>
2.2使用axios 发送请求,并获取响应结果
get请求
axios({
method:"get",
url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"})
.then(function (resp){
alert(resp.data);
})
post请求
axios({
method:"post",
url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
data:"username=zhangsan"}).then(function (resp){
alert(resp.data);
});
3、Axios使用 js 对象传递请求相关的参数:
3.1method 属性
用来设置请求方式的。取值为 get 或者 post 。
3.2url 属性
用来书写请求的资源路径。如果是 get 请求,需要将请求参数拼接到 路径的后面,格式为: url?参数名=参数值&参数名2=参数值2 。
3.3data 属性
作为请求体被发送的数据。也就是说如果是 post 请求的话,数据需 要作为 data 属性的值。
3.4then()
需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 ==回调函 数==,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。而 该回调函数中的 resp 参数是对响应的数据进行封装的对象,通过 resp.data 可以 获取到响应的数据。
4、代码实现
4.1服务器端:Servlet
@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
System.out.println("get...");
//1. 接收请求参数
String username = request.getParameter("username");
System.out.println(username);
//2. 响应数据
response.getWriter().write("hello Axios~");
}
@Override
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
System.out.println("post...");
this.doGet(request, response);
}
}
4.2客户端实现--html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/axios-0.18.0.js"></script>
<script>
//1. get
/* axios({
method:"get",
url:"http://localhost:8080/ajax-demo/axiosServlet? username=zhangsan"}).then(function (resp) {
alert(resp.data);
})*/
//2. post 在js中{} 表示一个js对象,而这个js对象中有三个属性
axios({
method:"post",
url:"http://localhost:8080/ajax-demo/axiosServlet",
data:"username=zhangsan"
}).then(function (resp) {
alert(resp.data);
})
</script>
</body>
</html>
5、请求方法别名
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])
三、JSON
1、什么是JSON
JavaScript Object Notation 。JavaScript 对象表示法
2.JS与JSON的区别
js 对象中的 属性名可以使用引号(可以是单引号,也可以是双引号
json 格式中的键要求必须使用双引号括起来,这是 json 格式的规定
3、json 格式的数据有什么作用呢?
由于其语法格式简单,层次结构鲜明,现多用于作为==数据载体==,在网络中进行数据传输。
4、JSON 基础语法
JSON 本质就是一个字符串,但是该字符串内容是有一定的格式要求的。
4.1定义格式:
var 变量名 = '{"key":value,"key":value,...}';
JSON 串的键要求必须使用双引号括起来,而值根据要表示的类型确定。
4.2value 的数据类型
数字(整数或浮点数)
字符串(使用双引号括起来)
逻辑值(true或者false)
数组(在方括号中)
对象(在花括号中)
null
var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
4.3js对象 和 JSON字符串转换
前端页面中:js对象 和 JSON字符串如何转换 JS 提供了一个对象 JSON ,该对象有如下两个方法:
parse(str) :将 JSON串转换为 js 对象。使用方式是:
== var jsObject = JSON.parse(jsonStr); ==
stringify(obj) :将 js 对象转换为 JSON 串。 使用方式是:
== var jsonStr = JSON.stringify(jsObject) ==
4.4全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1. 定义JSON字符串
var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西
安"]}'
alert(jsonStr);
//2. 将 JSON 字符串转为 JS 对象
let jsObject = JSON.parse(jsonStr);
alert(jsObject)
alert(jsObject.name)
//3. 将 JS 对象转换为 JSON 字符串
let jsonStr2 = JSON.stringify(jsObject);
alert(jsonStr2)
</script>
</body>
</html>
5、JSON串和Java对象的相互转换
以后我们会以 json 格式的数据进行前后端交互。前端发送请求时,如果是复杂的数据就会以 json 提交给后端;而后端如果需要 响应一些复杂的数据时,也需要以 json 格式将数据响应回给浏览器。
重点为请求和响应两部分操作:
请求数据:JSON字符串转为Java对象
响应数据:Java对象转为JSON字符串
相关学习网站: