异步刷新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页面：

链接传递点击一下function fun() {// 1. 创建 XHR 对象var xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {// code for IE6, IE5xhr = new ActiveXObject("Microsoft.XMLHTTP");}// 2. 调用 open 函数，指定 请求方式 与 URL地址，并设置请求头/* open(method, url, async)规定请求的类型method：请求的类型：GET 还是 POSTurl：服务器（文件）位置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.onloadxhr.onreadystatechange = function() {// 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 statusif (xhr.readyState === 4 && xhr.status === 200) {// 4.2 打印服务器响应回来的数据console.log(xhr.responseText);}}}

首先是我们试试链接传递，我们发现点击链接之后，由于连接的特性，会跳转到新的页面，刷新整个页面，而且数据也拿不到：

那我们通过ajax呢，我们发现页面并没有跳转，同时数据也会传送过来，我们也可以通过js拿到数据，然后在进行渲染，这就是异步技术的好处，以及为什么有这个技术：

上面代码中已经注释的很清楚了，拿来就可以使用：

readyState有5种状态：

jquery

那ajax这么好用的技术，框架怎么会不做封装呢，我们来看下jquery对ajax的使用，环境还是哪个环境，我们换成jquery的ajax

//百度的CDN镜像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异步技术的好处，如果到这里你还不理解，那就赶紧动手吧，只有你动手才会理解，就好像之前我一直认为不就是封装嘛，在封装也是那样，但是遇到问题呢，底层原理还是不够基础，或者说还是不动手，不动手这些问题都碰不上，所以快去测试下吧！

最后，希望大家可以三连，谢谢~