异步刷新ajax、jQuery、axios简单使用
认识
这里我们简单了解下，什么是ajax；
ajax，异步刷新技术，这里可能有小伙伴不了解，我们先来看看没有ajax的情况：
如果没有ajax，你在网站的时候得频繁的点击刷新键，你点一个东西，大多数情况跳到新的连接，做一次刷新，在不刷新页面的时候就好像个静态网页；
如果一个页面没有ajax，我们在使用的过程中，因为想要与后端数据选择交互，怎么样才可以提交表单，刷新页面，点击超链接，但是有时候页面都是一个大的刷新，甚至重新加载整个页面，不说效率，如果渲染过多，流量也是很麻烦的，前后端都麻烦，所以ajax就值得了，太值得了；
这里我们简单了解下使用
原生js
我们先来看看不使用框架的原生js，是如何做出异步请求的：
环境准备
先写了一个后端接口HelloServlet
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
System.out.println(name);
if (name != null && !name.equals("")) {
response.getWriter().print("hello , " + name);
} else {
response.getWriter().print("hello");
}
}
写了一个test.jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<a
href="${pageContext.request.contextPath}/HelloServlet?name=xuexiriji">链接传递</a>
<button οnclick="fun()">点击一下</button>
<script>
function fun() {
// 1. 创建 XHR 对象
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. 调用 open 函数，指定 请求方式 与 URL地址，并设置请求头
/*
open(method, url, async)
规定请求的类型
method：请求的类型：GET 还是 POST
url：服务器（文件）位置
async：true（异步）或 false（同步）, 默认false
*/
xhr.open('POST', '${pageContext.request.contextPath}/HelloServlet');
//发送合适的请求头信息，这里一定要设置，我没有设置，发送不了post请求
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send("name=xuexiriji");
// 4. 监听 onreadystatechange 事件
//readyState每次改变就会执行onreadystatechange
//请求结束后xhr.onload
xhr.onreadystatechange = function() {
// 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
if (xhr.readyState === 4 && xhr.status === 200) {
// 4.2 打印服务器响应回来的数据
console.log(xhr.responseText);
}
}
}
</script>
</body>
</html>
首先是我们试试链接传递，我们发现点击链接之后，由于连接的特性，会跳转到新的页面，刷新整个页面，而且数据也拿不到：
那我们通过ajax呢，我们发现页面并没有跳转，同时数据也会传送过来，我们也可以通过js拿到数据，然后在进行渲染，这就是异步技术的好处，以及为什么有这个技术：
上面代码中已经注释的很清楚了，拿来就可以使用：
readyState有5种状态：
| 状态值 | 状态描述 |
|---|---|
| 0 | AJAX开始初始化 |
| 1 | 开始发送AJAX请求 |
| 2 | AJAX请求发送完成 |
| 3 | 开始解析响应的资源 |
| 4 | AJAX请求的步骤全部完成 |
jquery
那ajax这么好用的技术，框架怎么会不做封装呢，我们来看下jquery对ajax的使用，环境还是哪个环境，我们换成jquery的ajax
//百度的CDN镜像
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
function funj(){
$.ajax({
url:"${pageContext.request.contextPath}/HelloServlet",
type: 'Post',
data:{
'name':"xuexiriji",
},
async:true, //异步刷新，默认是true
success:function(res){
//响应成功之后的回调函数
console.log(res);
},
error:function(res){
//失败之后的回调函数
}
});
}
结果
这里里面刚才有一个问题，我查了半天，终于知道了
可以去参考这篇博客：https://segmentfault.com/a/1190000015778842
// 1 默认的格式请求体中的数据会以json字符串的形式发送到后端
'Content-Type: application/json '
// 2 请求体中的数据会以普通表单形式（键值对）发送到后端 ， tomcat只能接收这种形式的键值对
'Content-Type: application/x-www-form-urlencoded'
// 3 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件
'Content-Type: multipart/form-data'
axios
这里的axios我也是使用的不多，之前也没怎么用过，用的时候几乎直接get请求了，今天我post请求了半天，也算是搞懂了一个，axios默认会变成json格式，而且后端tomcat只能接收application/x-www-form-urlencoded，所以也是查了半天，慢慢了解吧，这里怎么使用呢；
这里参考了几篇博客，用的是这篇博客的解决办法：https://blog.csdn.net/wp1993101/article/details/80564941
两种方式，第一种注释掉了：
function funa(){
/* axios.post('${pageContext.request.contextPath}/HelloServlet',{"name":"xuexiriji"})
.then(function (res) {
// 请求成功返回
console.log(res.data);
}); */
let params = new URLSearchParams();
params.append("name", "xuexiriji");
//axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
axios({
method:"POST",
url:"${pageContext.request.contextPath}/HelloServlet",
data:params,
headers:{
"Content-Type":"application/x-www-form-urlencoded"
}
}).then(response=>{
console.log(response.data);
});
}
最后也算是测试成功：
那如果请求再配上vue进行数据渲染，真的特别方便，所以这就是ajax异步技术的好处，如果到这里你还不理解，那就赶紧动手吧，只有你动手才会理解，就好像之前我一直认为不就是封装嘛，在封装也是那样，但是遇到问题呢，底层原理还是不够基础，或者说还是不动手，不动手这些问题都碰不上，所以快去测试下吧！
最后，希望大家可以三连，谢谢~
2715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
