(一)概念篇
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 代表客户端要找的资源,在服务器上不存在)