Ajax 常用简述

最新推荐文章于 2024-08-18 22:16:18 发布

偷光

最新推荐文章于 2024-08-18 22:16:18 发布

阅读量44

点赞数

文章标签： ajax javascript 前端 http

本文链接：https://blog.csdn.net/wbskb/article/details/130235292

版权

url的组成

协议、域名、资源路径

常用

axios ~库

url ~引入网址

GET ~请求从服务器获取数据

POST ~请求向服务器提交数据

method ~指定请求方法（默认是 GET）

data ~提交数据

params ~获取数据

pname ~要获取什么数据

.then ~处理数据

.catch ~处理错误

axios({
      url: 'http://hmajax.itheima.net/api/register',
      // 指定请求方法
      method: 'post',
      data: {
        username: 'abc007',
        password: '7654321'
      }
    }).then(result => {
      console.log(result)
    }).catch(item => {
      console.log(item.response.data.message)
      alert(item.response.data.message)
    })

拓展：幂等性注册（）

GET 是幂等性的

POST 是非幂等性的

幂等：发送请求后服务器的数据不会有任何修改

非幂等：发送请求后可能会对服务器的数据存在修改

报文

http协议：规定了浏览器发送及服务器返回内容的格式

请求报文：浏览器按照http协议要求的格式，发送给服务器的内容（请求头、请求行、请求空行、请求体）

响应报文：服务器按照http协议要求的格式，发给浏览器的数据（响应头、响应行、响应空行、响应体）

HTTP 响应状态码

前端只需要关注 2开头的和 4开头的

2 开头表示成功（200）

4 开头表示未找到资源（404）

form-serialize 插件

使用插件快速收集表单数据

使用时 input 内必须有 [nume=" " ] ，没有会获取不到元素

用法：1、传入表单的元素 2、传入配置项

hash：收集参数的格式，true 表示转成对象，false 表示转成查询参数形式的字符串

empty：是否收集空值，true 表示收集为空字符串，false 表示不收集，什么都没有

scrollHeight：内容的高度，当盒子有滚动条时说明内容的高度超过了盒子本身

scrollTop：盒子滚出去的距离

表单的 hidden

隐藏域：在页面上看不到

有什么用？用户不需要对他进行操作，但是提交数据时可能要跟随表单一起提交，可以设置 value 和提取 value 属性

图片上传

表单的 file ：文件选择元素

change 事件被<input>, <select>, 和<textarea> 元素触发。

//触发情况 1.<input type="radio"> 和 <input type="checkbox"> 的默认选项被修改时（通过点击或者键盘事件）。

2.当用户完成提交动作时 (例如：点击了 <select>中的一个选项，从 <input type="date">标签选择了一个日期，通过 <input type="file">标签上传了一个文件等 )。

3.当标签的值被修改并且失去焦点后，但并未进行提交 (例如：对<textarea> 或者<input type="text">的值进行编辑后)。

路径参数

路径参数，可以直接添加数据

url:'http://hmajax.itheima.net/api/books/{id}‘

XMLHttpRequest

XHR 对象用于服务器交互

XMLHttpRequest 的方法：

.status 用于获取状态码

.response 用于获取结果

.resolve() 成功

.reject 失败

.send() 发送请求

.message 错误

loadend 监听事件

使用步骤：

1.创建 XMLHttpRequest 对象

2.配置请求方法和请求 url 地址

3.监听 loadend 事件，接收响应结果

4.发起请求

Promise

（管理）一个异步操作最终状态和结果值的对象

Promise - 三种状态

待定（pending）：初始状态，既没有被兑现，也没有被拒绝已兑现（fulfilled）：意味着，操作成功完成已拒绝（rejected）：意味着，操作失败

对象转参数字符串

URLSearchParams 对象转参数字符串

在使用 XMLHttpRequest 时，发送请求的 URL 不支持中文，所有中文都会被自动 URL 编码，服务器收到后会自动解码，所以程序员不需要额外关心

同步代码和异步代码

什么是同步代码？

逐行执行，原地等待结果后，才继续向下执行

什么是异步代码？

调用后耗时，不阻塞代码执行，将来完成后触发回调函数

回调函数地狱

概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱缺点：可读性差，异常无法捕获，耦合性严重，牵一发动全

Promise 链式调用

Promise 的 .then 回调函数中可以继续返回一个 Promise 对象，在 .then 回调函数中返回的 Promise 对象结果会传递给下一个 .then 形成了链式调用

async 和 await 使用

await 的代码只是看起来是同步的，本质还是异步代码，可以理解为 await 返回值及以后的代码都是 .then 回调函数中的代码，我们优化了开发的语法，让代码看起来更简洁，更容易读懂

async function re() {

    const provinceRes = await axios({ url:'http://hmajax.itheima.net/api/province' })

    document.querySelector('.province').innerHTML = provinceRes.data.list[0]
    }
   re()

async 和 await 里边要捕获异常要用 try ~catch 来捕获异常，因为 try ~catch 能捕获同步代码的异常，

promise 的异常可以使用 .catch 方法捕获