AJAX和Axios异步框架

AJAX：Asynchronous JavaScript And XML 异步的JavaScript和XML

作用：1、与服务器进行数据交换，通过AJAX可以给服务器发送请求，并获取服务器响应数据。使用了AJAX和服务器进行通信，就可以使用ajax和html来代替jsp页面了。这样可以实现将前后端进行分离，因为jsp需要依赖浏览器才能运行，所以不能将前后端很好的分离。

2、异步交互：可以在不重新加载该页面的情况下，与服务器进行交换数据并更新部分网页的技术。就是实时部分更新。就比如在用百度搜索时，我们需要完要搜索的内容，还没点搜索或者回车时，网页会自动给出很多类似的搜索内容。

这是写AJAX请求的官网文档：AJAX 简介

你可以通过点下一节来了解写ajax的多个步骤。

编写步骤：1、编写AjaxServlet，并使用response输出字符串。

java 复制代码

@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、创建XMLHttpRequest对象：用于和服务器交换数据。

3、向服务器发送请求

4、获取服务器响应数据

html 复制代码

<script>

  //1.创建核心对象
  var xhttp;
  if(window.XMLHttpRequest){
    xhttp=new XMLHttpRequest();
  }else {
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //2.发送请求

  xhttp.open("GET", "/aJAXServlet");
  xhttp.send();
  //3.获取响应

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
              alert(this.responseText);
    }
  };

</script>

通过上面我们就可以对AJAX发送请求有了一个简单的认识，知道了我们可以运行AJAX简单的实现什么功能和基础代码应该怎么写。同时我们也不难发现AJAX的代码大部分都是重复且很难记住。

所以我们又有了Axios，Axios可以帮助我们简化代码。

Axios异步框架：对原生的AJAX进行封装，简化书写。

Axios使用：1、引入axios的js文件；2、使用axios发送请求，并获取响应数据。

下面这是我在网上找的下载ajax-0.18.0.js的网址：

axios-0.18.0.js 免费下载_axios-0.18.0.js下载-CSDN博客

我们下好文件后，我们最好在webapp项目下创建一个js包，然后把前面下好的文件复制一个到这个包中。

下面是代码的实现：

在使用axios时千万别忘了运用script标签把下载的axios js文件导入！

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>

  //get
  axios({
    method:"get",
    url:"http://localhost:8080/axiosServlet?username=zhangsan",
  }).then(function (resp){
      alert(resp.data)
  })

  //post
  axios({
      method:"post",
      url:"http://localhost:8080/axiosServlet",
      data:"username=zhangsan"
  }).then(function (resp){
      alert(resp.data)
  })
</script>
</body>
</html>

发送get请求时，把需要传的参数直接加在url地址后面就行了，多个参数之间用 & 连接。

发送post请求时，需要把传的参数写在data：后面。

然后then中的resp.data 就是我们获取的响应数据。

axios还有一种简洁点的写法：

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>
  //get
  axios.get("http://localhost:8080/axiosServlet?username=zhangsan").then(function (resp){alert(resp.data)})

  //post
  axios.post("http://localhost:8080/axiosServlet","username=zhangsan").then(function (resp){alert(resp.data)})
</script>
</body>
</html>

这样写也是可以的，看个人喜好哪种了。