axios异步操作第一篇

1 同步请求和异步请求

客户端给java后台程序发送请求，发送请求的方式有两种：

• 同步请求
  • 同步请求发送方式：
    1 浏览器地址栏，输入url：http://localhost:8080/web-app/xxxServlet
    2
    
    
    3 删除
    4 javascript:location.href=“http://localhost:8080/web-app/xxxServle”;
  • 同步请求缺点：用户体验度不好，发送同步请求，整个浏览器页面都会全部重新加载一次（全页刷新一次）
• 异步请求***
  • 异步交互优点：提升用户体验度，请求在响应之后不是整个页刷新，仅仅刷新响应数据影响的区域，看起来就是局部刷新
  • 异步交互缺点：无形之中增加服务器处理请求压力
  • 异步交互实现方式：
    - 原生态js完成异步交互。核心对象XmlHttpRequest对象。不主流：繁琐，处理各种浏览器兼容问题
    浏览器：Firefox chrome edge
    - ajax技术：JQuery
    - Vue框架：resources技术。vue-resource: Vue.js的插件，已经不维护，vue官方推荐异步交互使用其竞品axios实现
    - Vue竞品：axios

1 axios

在Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作。

axios是vue中提供的用来发送请求给服务器的组件。Vue 2.0 之后，就不再对 vue-resource 更新。Vue 官方推荐使用其竞品：axios 。后续项目的模型趋于前后端分离，所以几乎所有的请求都是异步交互的方式。

axios入门案例：

• 引入axios.js：axios是vue中提供的用来发送请求给服务器的组件

  即可

• 搭建Vue开发结构并通过按钮单击事件发送异步请求

• controller接收请求

    @WebServlet(name = "HelloServlet", value = "/HelloServlet")
     public class HelloServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.取 请求协议携带参数
        String msg = request.getParameter("msg");
        System.out.println("请求提交的msg值是："+msg);
  
        //2.调 model的方法，获取model返回数据
        String result="处理完毕";
  
        //3.变化：异步交互不支持转发和重定向！！！异步交互只能依靠响应体response.getWriter.write()响应
        response.getWriter().write(result);
    }
  }
  

• axios接收响应结果并在html中显示

细节

控制器接收到异步请求后，与之前同步请求的处理方式几乎一样：只是异步交互的结果，不能直接依靠存request和转发机制给html页面显示。所以我们在异步交互过程中，较为麻烦的事情就是：需要开发人员自己通过response对象封装响应协议给客户端使用。

2 JSON

1、Json简介

 JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript) (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

JSON 数据的书写方式是名称/值对，类似 JavaScript 对象属性。
名称/值对由（双引号中的）字段名构成，其后是冒号，再其后是值：
   "firstName":"Bill"
js对象 ：{key:value,key:value}
使用js对象：对象名.key

json对象：{"key":value,"key":value}
json对象数组：[
    {"key":value,"key":value},
    {"key":value,