AJAX和Axios异步框架

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

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

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

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

 

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

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

@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、获取服务器响应数据

通过上面我们就可以对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文件导入！

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

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

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

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

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