Ajax和Axios的联系与区别？

（一）概念篇

1. Ajax（Asynchronous JavaScript and XML）：是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过XMLHttpRequest对象实现，允许网页从服务器请求数据，并可以在不重新加载页面的情况下，在网页上更新显示这些数据。

2. Axios：是一个基于‌Promise的HTTP客户端，用于浏览器和node.js。它本质上是对原生XHR（XMLHttpRequest）的封装，但采用了Promise技术，使得异步请求更加直观和易于管理。Axios提供了更多的功能，如拦截请求和响应、取消请求、自动转换JSON数据等。‌

axios 是 isomorphic 的 ( 即同一套代码可以运行在浏览器和node.js中)，在服务端它使用原生 node.js  http模块，而在客户端 (浏览端) 则使用XMLHttpRequest。

3. Axios与Ajax的区别与联系：

1）Axios通过对Ajax技术的封装，提供了更多的功能和更好的使用体验。它支持Promise API，使得异步操作更加直观和易于管理。这使得Axios在处理复杂的异步操作时，相比Ajax更加方便和灵活。‌

2）Axios不仅支持基本的HTTP请求方法（如GET、POST等），还提供了请求和响应的拦截、错误处理、取消请求等功能。这些功能使得Axios在处理复杂的网络请求时，相比Ajax更加强大和灵活。

3） Axios基于Promise实现，符合最新的ES规范，在现代前端开发中得到了广泛的应用。相比之下，Ajax虽然也能实现异步通信，但其基于回调函数的方式在处理复杂异步操作时，容易引发回调地狱的问题。

综上所述，Axios是对Ajax技术的一种封装和扩展，提供了更多的功能和更好的使用体验。这使得Axios在处理复杂的网络请求时，相比Ajax更加方便、灵活和强大。

（二）Axios语法篇

1. axios 使用步骤：

step 1 : 在script标签内引入 axios 库

step 2 : 页面开发时直接使用

​

2. axios 各部分详解

1）url 目标资源地址：由协议 + 域名 + 资源路径组成

2）请求方法：数据的增（POST）删（DELETE）改（PUT）查（GET）

3）查询参数

请求方法不写时，默认为GET，对应查询参数选项为params

请求方法为post和put时，对应提交数据项为data

ES6 特性中，属性名和value位置变量名同名，即可简写

（例如pname：pname 直接简写为pname，

          cname：cname 直接简写为cname）

4）请求报文：浏览器（客户端）发送给服务器的请求

请求报文包含请求行、请求头、空行、请求体这四部分 

在Chrome 浏览器查看请求体

5）响应报文：服务器返回给浏览器（客户端）的响应

响应报文包含响应行、响应头、空行、响应体这四部分 

HTTP响应状态码（404 代表客户端要找的资源，在服务器上不存在）