Ajax入门

最新推荐文章于 2024-09-27 09:39:47 发布

Y._

最新推荐文章于 2024-09-27 09:39:47 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/ClearloveYt/article/details/131055046

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Ajax

使用浏览器的 XMLHttpRequest 对象与服务器通信

与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器

axios

Axios 对原生的AJAX进行封装，简化书写

基本语法：

首先axios引入

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 axios({
            url: '目标资源地址'
            params:{
             参数名：值
             }
        }).then(res =>{
           // 数据处理
        })

发送 get 请求

axios({
    method:"请求方法",
    url:"目标资源地址"
     params:{
             参数名：值
             }

}).then(function (resp){
    //数据处理
})

发送 post 请求

axios({
    method:"请求方法",
    url:"目标资源地址"
     data:{
             参数名：值
             }

}).then(function (resp){
    //数据处理
})

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

method 属性：用来设置请求方式的。取值为 get 或者 post。
url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 ==回调函数==，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

axios 错误处理

语法：在then方法后面，通过点语法调用catch方法，传入回调函数并定义形参

axios({
    //请求

}).then(function (resp){
    //数据处理
}).catch(e =>{
  //错误处理

})

HTTP协议 - 请求报文

首先，HTTP 协议规定了浏览器和服务器返回内容的格式
请求报文：是浏览器按照协议规定发送给服务器的内容
这里的格式包含：
- 请求行：请求方法，URL，协议
- 请求头：以键值对的格式携带的附加信息，比如：Content-Type（指定了本次传递的内容类型）
- 空行：分割请求头，空行之后的是发送给服务器的资源
- 请求体：发送的资源

HTTP 协议-响应报文

响应报文：是服务器按照协议固定的格式，返回给浏览器的内容

响应报文的组成：
- 响应行（状态行）：协议，HTTP响应状态码，状态信息
- 响应头：以键值对的格式携带的附加信息，比如：Content-Type（告诉浏览器，本次返回的内容类型）
- 空行：分割响应头，控制之后的是服务器返回的资源
- 响应体：返回的资源
HTTP 响应状态码：
- 用来表明请求是否成功完成

接口文档

由后端提供的描述接口的文章
请求的 URL 网址，请求方法，请求参数和说明

form-serialize 插件

作用：快速收集目标表单范围内表单元素的值

语法：

引入 form-serialize

 <script src="./lib/form-serialize.js"></script>

使用 serialize 函数
- 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
- 参数2：配置对象
  - hash：
    - true - 收集出来的是一个 JS 对象结构
    - false - 收集出来的是一个查询字符串格式
  - empty：
    - true - 收集空值
    - false - 不收集空值

Bootstrap

Bootstrap v5 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 前端工具库。 | Bootstrap 中文网

Bootstrap 弹框_属性控制

先引入 bootstrap.css 和 bootstrap.js 到自己网页中

  <!-- 引入bootstrap.css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入bootstrap.js -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>

准备弹框标签，确认结构（可以从文档的 Modal 里复制基础例子）
通过自定义属性，通知弹框的显示和隐藏，语法如下

Bootstrap 弹框_JS控制

JS 方式控制 Bootstrap 弹框显示和隐藏

语法如下：

<script>
    //创建弹框对象
    const modal = new bootstrap.Modal('.name-box') //css 选择器  name-box

    const usernameInp =document.querySelector('.username')

    document.querySelector('.edit-btn').addEventListener('click',() =>{
      //显示弹框
      modal.show()
      //内容回显
      usernameInp.value = '张'
    })

    document.querySelector('.save-btn').addEventListener('click',() =>{
      const username =  usernameInp.value
      console.log(username)
      //隐藏弹框
      modal.hide()
    })

  </script>

AJAX原理

开始使用 - Web 开发者指南 | MDN (mozilla.org)

XMLHttpRequest - 基础使用

语法：

// 1. 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest()
    // 2. 配置请求方法和请求 url 地址
    xhr.open('get', '请求 url 地址')
    // 3. 监听 loadend 事件，接收响应结果
    xhr.addEventListener('loadend', () => {
      const res = JSON.parse(xhr.response)
      console.log(res)
      document.querySelector('p').innerHTML = res.list.join('<br>')
    })
    // 4. 发起请求
    xhr.send()

AJAX 原理是