AJAX的基础知识点-CSDN博客

本文链接：https://blog.csdn.net/qq_72405586/article/details/134713706

AJAX是异步的JavaScript和XML。简单来说就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是他的异步特性，也就是说它可以在不刷新页面的情况下，交换数据或更新页面

AJAX是浏览器与服务器进行数据通信的技术

axios的使用

语法：

引入axios.js https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
使用axios函数，传入配置对象

axios({
  url:"目标资源地址"
  
}).then(result=>{
  //对服务器传入的资源进行处理
})

认识URL

URL就是统一资源定位符，用于访问网址上的资源

URL有三部分组成

协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式
域名：标记服务器在互联网中的方位
资源路径：标记资源在服务器中的方位

URL查询参数

浏览器提供个服务器的额外信息，让服务器返回浏览器想要的信息

https://xxx.com/xxx/xxx?参数名=值1&参数名2=值2

axios({
  url://目标的资源地址
  params:{
    参数名:值
  }
}).then(result=>{
  //对服务器返回的数据进行后续处理
})

常用的请求方法

get 获取数据
post 提交数据
put 修改数据（全部）
delete 删除数据
patch 修改数据(部分)

axios({
  url://目标资源地址
  method:
  data:{
  参数名:值
  }
}).then({
  //对数据的后续处理
})

axios的核心配置

url：请求url的网址
method：请求方法，get可以省略
params：查询参数
data:提交数据

axios的报错处理

axios({
  //请求选项
}).then(result=>{
  //处理数据
})/catch(error=>{
  //处理错误
})

HTTP协议-请求报文

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

请求报文：浏览器按照HTTP协议要求的格式，发送给服务器内容

Content-Type:浏览器携带的内容类型

在浏览器的开发者工具中的网络可以找到错误报文，更容易找到错误

由四部分组成：请求行，请求头，空行，请求体

HTTP协议-响应报文

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

响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的内容

由四部分组成：响应行，响应头，空行，响应体

HTTP响应状态码：

状态码	说明
1xx	信息
2xx	成功
3xx	重定向信息
4xx	客户端错误
5xx	服务端错误

接口文档

接口文档是后端工程师定义的来描述接口的文章

接口：使用AJAX和服务器通讯时，使用的url，请求方法，方法参数

form-serialize插件

作用：快速收集表单元素的值

先引入form-serilize插件

表单元素应该设置name属性，name属性会作为对象的属性名

建议name的属性值和接口文档的参数名一致

const form = document.querySelector('.example-form')
const data=  serialize(form,{hash:true,empty:true})

hash：设置获取数据结构 -true：返回的是JS对象 -false：查询字符串

empty：设置是否获取空值

Bootstrap弹框

功能：不离开当前页面，显示单独内容，供用户操作

引入bootstrap.css和bootstrap.js
准备弹框标签，确认结构
通过自定义属性，控制弹框的显示和隐藏

<button data-bs-toggle = '弹框名称' data-bs-target = '弹框的的css选择器'>
  </button>
  <button data-bs-dismiss = 'modal'></button>//隐藏弹框

通过JS来控制弹框的显示和隐藏

当需要其他JS代码的时候用JS来控制弹框的显示和隐藏

先创建弹框对象
用弹框对象的显示方法
用弹框对象的隐藏方法

<button type='button' class='btn btn-primary edit-btn'>编辑姓名</button>
const MOdalDom = document.querySelector('modal')
const modal = new bootstrap.Modal(MOdalDom)


点击编辑姓名->弹框显示
const edit = document.quertSelector('.edit-btn')
edit.addEventListener('click',()->{
	modal.show()
})

图片上传

获取图片文件
使用FormData携带图片文件
提交到服务器，获取图片url网址使用

document.querySelector('').addEventListener('change',e=>{
  //获取图片文件
  console.log(e.target.files[0])
  //使用FormData携带图片文件
  const fd = new FormData()
  fd.append('img',e.taregt.files[0])
  axios({
    url:''
    method:'post'
    data:fd
  }).then(result=>{
  console.log(result)
  const imgurl = result.data.data.url
  document.querySelector('') = imgUrl
  })
})

AJAX的原理

XMLHttpRequest

XMLHttpRequest对象用于与服务器交互，通过XMLHttpRequest可以在不刷新页面的情况下特定URL获取数据。这允许页面在不影响用户操作的情况下，更新页面内容。XMLHttpRequest在AJAX编程中被大量使用

使用XMLHttpRequest

创建XMLHttpRequest对象
配置请求方法和请求url地址
监听loadend事件，接收响应结果
发起请求

const xhr = new XMLHttpRequest()
xhr.open('请求方法','请求地址')
xhr.addEventListener('loadend',()=>{
  //响应结果
  console.log(xhr.response)
})
xhr.send()

URLSearchParams对象

urlSearchParams可以帮助我们生成指定格式的查询参数

const paramObj = new URLSearchParams({
  参数名1:值1,
  参数名2:值2
})
const queryObj = paramObj.toString()

fetch

调用GET请求

fetch('请求网址').then(response=>{
  return response.json()
}).then(myJson=>{
  CONSOLE.LOG(myJson)
})

fetch返回的结果是一个Promise对象

调用POST请求

fetch默认发起的是GET请求，如果想要发送POST请求

fetch(
  '请求网址',{
	method:'POST'
  }).then(response=>{
  return response.json()
}).then(myJson=>{
  console.log(myJson)
})

Promise

Promise是异步编程的一种解决方案，之前异步编程是通过回调函数来实现的

const oReq = new XMLHttpRequest()
oReq.addEventListener('load',()=>{
  console.log(this.responseText)
})
oReq.open(
  'GET',
  '请求网址'
)
oReq.send

以上是老版AJAX的使用方法，以后几乎用不到

使用这种方法先创建xhr对象然后通过addEventListener监听load事件，然后触发后面的回调函数，如果在回调函数中继续加入setTimeout或者addEventListener监听代码，就会出现多层嵌套，也叫做回调地狱

而Promise对象可以通过.then触发回调函数，返回的response.json()也是一个Promise对象

Promise将嵌套型回调调整为平铺型回调，完美的解决了回调地狱的问题