一  
    
    
    、Axios 和 Ajax 的区别

1

     


     


     


、Axios是一个基于Promise的HTTP库  
    
    
    ，而Ajax是对原生XHR的封装；

2 




 




 




、Ajax技术实现了局部数据的刷新

     


     


     


，而Axios实现了对ajax的封装    
    
    
。

二  

   

   

   、Axios 和 Ajax 的区别及优缺点

Ajax：

1

     

     

     

、什么是Ajax

Ajax是对原生XHR的封装 




 




 




，为了达到我们跨越的目的  

   

   

   ，增添了对JSONP的支持   


     


     


    。

异步的javascript和xml

     

     

     

，ajax不是一门新技术  




  




  




，而是多种技术的组合  


  


  


  ，用于快速的创建动态页面
     
     
     
，能够实现无刷新更新数据从而提高用户体验



 




 




 


。

2  




  




  




、Ajax的原理？

由客户端请求ajax引擎
   




   




   




，再由ajax引擎请求服务器 



 



 



 ，服务器作出一系列响应之后返回给ajax引擎                ，由ajax引擎决定将这个结果写入到客户端的什么位置   

   

   

。实现页面无刷新更新数据    

     

     

   。

3  


  


  


  、核心对象？

XMLHttpReques

4
     
     
     
、Ajax优缺点？

   优点　

1
   




   




   




、无刷新更新数据

2 



 



 



 、异步与服务器通信

3                、前端和后端负载平衡

4

    




    




    




、基于标准被广泛支持

5














、界面与应用分离

   缺点：

1                 、ajax不能使用Back和history功能

    




    




    




，即对浏览器机制的破坏




  




  




  

。

2

     



     



     



、安全问题 ajax暴露了与服务器交互的细节

3














、对收索引擎的支持比较弱

4  
    
    
    、破坏程序的异常处理机制

5

     


     


     


、违背URL和资源定位的初衷

6 




 




 




、ajax不能很好的支持移动设备

7  

   

   

   、太多客户端代码造成开发上的成本

5

     

     

     

、Ajax适用场景

<1>.表单驱动的交互

<2>.深层次的树的导航

<3>.快速的用户与用户间的交流响应

<4>.类似投票  




  




  




、yes/no等无关痛痒的场景

 <5>.对数据进行过滤和操纵相关数据的场景

<6>.普通的文本输入提示和自动完成的场景

6  


  


  


  、Ajax不适用场景

<1>.部分简单的表单

<2>.搜索

<3>.基本的导航

<4>.替换大量的文本

<5>.对呈现的操纵

7
     
     
     
、代码

$.ajax({ type: get, url: /getuser/data, dataType: json, data: { firstName: 张, lastName: 三 }, success: function (response) { console.log(response); }, error: function (error) { console.log(error); } }); <script type="text/javascript"> function login() { $.ajax({ type: post, url: /email/login, dataType: json, data: { account: $(#account).val(), password: $(#password).val() }, success: function (data) { if (data.code == 1) { alert("登录成功"); window.location.href = "http://localhost:8080/email/success"; } else { alert("密码错误














，请重新输入！") window.location.href = "http://localhost:8080/email/error" } } }) } </script> <script type="text/javascript"> function addFruit() { let name = $.trim($("#fname").val()); let price = $.trim($("#fprice").val()); let count = $.trim($("#fcount").val()); $.post("http://localhost:8080/fruit/add", {name: name, price: price, count: count}, function (data) { if (data.code == 1) { alert(data.message); window.location.href = "http://localhost:8080/fruit/index"; } if (data.code == 0) { alert(data.message); } }); } function delFruit(id) { if (window.confirm("是否确认删除" + id + "?")) { $.post("http://localhost:8080/fruit/delete?id=" + id, {id: id}, function (data) { if (data.code == 1) { alert(data.message); window.location.href = "http://localhost:8080/fruit/index"; } if (data.code == 0) { alert(data.message); } }); } } </script>

8
   




   




   




、Ajax请求的五个步骤

1. 创建XMLHttpRequest异步对象

2. 设置回调函数

3. 使用open方法与服务器建立连接

4. 向服务器发送数据

5. 在回调函数中针对不同的响应状态进行处理

Axios：

1 



 



 



 、Axios是什么

Axios 是一个基于 Promise 的 HTTP 库                 ，可以用在浏览器和 node.js 中  


  


  


。

2                、Axios有那些特性？

1

    




    




    




、在浏览器中创建 XMLHttpRequests

2














、在node.js则创建http请求

3                 、支持Promise API

4

     



     



     



、支持拦截请求和响应

5














、转换请求和响应数据

6  
    
    
    、取消请求

7

     


     


     


、自动转换成JSON数据格式

8 




 




 




、客户端支持防御XSRF

3  

   

   

   、执行get请求

     



     



     



，有两种方式

params 是用于拼接 url 的














，get 请求传参就是拼到 url 中  
    
    
    ，

而 data 是放在 request body 中的

     


     


     


，用于 post 请求

// 第一种写法:将参数直接写在url中 axios.get(/query?name=tom).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 第二种写法:将参数直接写在params中 axios.get(/query, { params: { name: tom } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 第三种写法:将参数直接写在params中 axios({ method: get, url: /query, params: { name: tom, } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });

4

     

     

     

、执行post请求 




 




 




，注意执行post请求的入参  

   

   

   ，不需要写在params字段中

     

     

     

，这个地方要注意与get请求的第二种方式进行区别     
     
     
  。

axios.post(/query, { name: tom, icon: img_path }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });

 下面这种data方式将参数放在请求体中  




  




  




，后端需要使用@RequestBody +实体类来接收




   




   




   
。

axios({ url: /getUsers, method: post, responseType: json, // 默认的 data: { age: 18, sex: 男, } }).then(function (response) { console.log(response); console.log(response.data); }).catch(function (error) { console.log(error); });

这种params

传参方式其实和get请求类似  


  


  


  ，把请求参数放到了请求头中
     
     
     
，

http://127.0.0.1/user?age=18&sex=男

所以这种需要使用 @RequestParam来接收参数 axios({ url: /getUsers, method: post, responseType: json, // 默认的 params: { age: 18, sex: 男, } }).then(function (response) { console.log(response); console.log(response.data); }).catch(function (error) { console.log(error); });

三  




  




  




、Axios和Ajax的区别

axios是通过Promise实现对ajax技术的一种封装
   




   




   




，就像jquery对ajax的封装一样 



 



 



 ，简单来说就是ajax技术实现了局部数据的刷新                ，axios实现了对ajax的封装

    




    




    




，axios有的ajax都有














，ajax有的axios不一定有                 ，总结一句话就是axios是ajax

     



     



     



，ajax不止axios
 



 



 



。

注： 传统Ajax 指的是 XMLHttpRequest（XHR）














，axios和jQuer ajax都是对Ajax的封装                。