马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
既然提到Ajax，那就先来说一说什么是Ajax吧
关于Ajax
Ajax的定义
Asynchronous JavaScript And XML：异步的JavaScript和XML。
反正就是一句话总结：
使用XML HttpRequest 对象与服务器进行通讯。
AJAX 是一种在无需重新加载整个网页的环境下，能够更新部分网页的技术。（这一句话很好的解释了异步的概念）
无需多言，开始正题
关于axios
什么是axios
Axios 是一个基于Promise的HTTP 客户端，实用于node.js和浏览器。它是同构的（即它可以使用同一套代码运行在浏览器和 nodejs 中）。在服务器端它使用原生的 node.js http模块，在客户端（浏览器）它使用 XMLHttpRequests。
特性
当然，下面是从官网上找的东西
使用
导入
我最常用的方法是直接导入地点
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
这是在学习过程中做的一些小总结，其实最常用的是get和post方法
其实这两个最大的区别就是在哀求的数据，缓存和安全性的区别
这算是整体一点的，大总结，这四个方法的区别
| get
| post
| put
| delete
| 形貌
| 查看
| 创建
| 更新
| 删除
| 定义
| 从指定资源哀求数据
| 向指定资源提交要处理的数据
| 更新指定资源的全部内容
| 删除指定资源
| 哀求格式
| 参数在 URL 中
| 数据在哀求体中
| 数据在哀求体中
| 通过 URL 指定资源标识符
| 对服务器性能的影响
| 较小
| 较大
| 较大
| 较大
| 是否实用对同一个资源进行多次操作
| 可查询
| 否
| 否
| 否
| 应用场景
| 获取网页、查询数据
| 创建新资源
| 更新已存在资源（完整更新）
| 删除已存在资源
| 长处
| 可以被缓存和浏览器生存。
对服务器性能的影响较小。
| 可以提交比 GET 更大的数据量。
相对更安全，因为哀求参数不会被包罗在 URL 中。
| 可以更新指定的资源。
| 可以永久删除指定的资源。
|
这是最一开始学习Ajax时做的一个思维导图
语法
- axios({
- url:"目标资源地址/要访问的后端接口地址",
- method:"请求方法", // 请求的方法，GET可以省略（不区分大小写）
- data/params:{ // data是提交的数据
- 参数名1：值1,
- 参数名2：值2
- }
- // 使用回调函数
- }).then((result)=>{
- 对服务器返回的数据进行处理
- })
怎样使用URL查找对应参数：
使用URL查询参数的作用：浏览器提供给服务器额外信息，获取对应的数据。
而相对应的使用axios查询：
就是使用params参数进行查询，携带参数名和值
例：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,
- initial-scale=1.0">
- <title>axios——get</title>
- <style type="text/css">
- #dv {
- border: 1px solid pink;
- }
- </style>
- </head>
- <body>
- <h1>axios_get</h1>
- <form action="javascript:;" class="example-form">
- <input type="text" name="name" id="name">
- <br>
- <input type="text" name="text1" id="text1">
- <br>
- <input type="button" class="btn" id="btn" value="提交">
- </form>
- <div id="dv"></div>
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- <script>
- btn.onclick = function(){
- var n = document.getElementById('name').value
- var t = document.getElementById('text1').value
- console.log(n);
- console.log(t);
- axios({
- url: 'http://localhost:8080/getAjaxTest',
- method: 'GET',
- params: {
- name: n,
- text1: t
- }
- }).then(result => {
- console.log(result);
- console.log(result.data);
- var p = document.createElement("p");
- p.appendChild(document.createTextNode(result.data));
- var ps = document.getElementById("dv").getElementsByTagName("p");
- // +的优先级比？高,所以要加括号
- new Function("p", "ps", 'document.getElementById("dv").' + (ps[0] ?
- "insertBefore(p, ps[0])" : "appendChild(p)"))(p, ps);
- }).catch(error => {
- console.log(error);
- });
- }
- </script>
- </body>
- </html>
主要可以看这里的思路和结构，其实这里也有一个知识点：
在 params的参数中，如果参数名和值一样，可以只写一个：
- params: {
- name, // 当参数名和值都为name
- text1
- }
错误处理
在then方法的后面，通过点语法调用catch方法，传入回调函数并定义参数
- axios({
- // 请求选项
- }).then(result=>{
- // 处理数据
- }).catch(error=>{
- // 处理错误
- })
注册账号时，重复注册时通过弹窗提示用户错误原因
查找错误：
这就是我们需要相识的HTTP协议--哀求报文和响应报文
哀求报文：
响应报文：
例：
还拿上一个我的代码举例：
这是点击提交后的页面结果
接下来我们看提交结果的内部是什么样的
在这里可以明显看出来哪里是响应哪里是哀求
算了还是用edge吧
哀求报文在标头那里
所以可以依据这些查看是客户端还是服务端的错误
最后一些需要注意的点
既然最开始提到了params和data，那他们有什么区别呢
比力项目
| data 参数
| params 参数
| 传输方式
| 放在哀求体中传输
| 通过 URL 进行传输，拼接在 URL 末尾
| 使用场景
| 实用于 POST、PUT、PATCH 等非 GET 哀求，用于向服务器提交数据以创建、更新或修改资源
| 主要用于 GET 哀求，让服务器根据参数筛选、排序或返回特定资源
| 数据大小限定
| 相对没有严格的雷同 URL 长度那样的限定（实际受服务器配置等因素影响），更适合大量数据传输
| 受 URL 长度限定，过长 URL 可能导致哀求失败
| 安全性
| 不在 URL 中表现数据，肯定水平上保护隐私和安全性，适合传递敏感信息
| 数据在 URL 上可见，不适合传递敏感信息如暗码等
|
就先说这些吧，其他的如果什么时间想起来了，可能会继续增补（固然可能性不大）
如果文章中有什么错误，接待在评论区提出。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
