AJAX的基础知识点

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

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

axios的使用

语法:

  1. 引入axios.js https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
  2. 使用axios函数,传入配置对象
axios({
  url:"目标资源地址"
  
}).then(result=>{
  //对服务器传入的资源进行处理
})
认识URL

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

URL有三部分组成

  1. 协议:超文本传输协议,规定浏览器和服务器之间传输数据的格式
  2. 域名:标记服务器在互联网中的方位
  3. 资源路径:标记资源在服务器中的方位
URL查询参数

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

https://xxx.com/xxx/xxx?参数名=值1&参数名2=值2
axios({
  url://目标的资源地址
  params:{
    参数名:值
  }
}).then(result=>{
  //对服务器返回的数据进行后续处理
})
常用的请求方法
  1. get 获取数据
  2. post 提交数据
  3. put 修改数据(全部)
  4. delete 删除数据
  5. 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弹框

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

  1. 引入bootstrap.css和bootstrap.js
  2. 准备弹框标签,确认结构
  3. 通过自定义属性,控制弹框的显示和隐藏
<button data-bs-toggle = '弹框名称' data-bs-target = '弹框的的css选择器'>
  </button>
  <button data-bs-dismiss = 'modal'></button>//隐藏弹框

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

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

  1. 先创建弹框对象
  2. 用弹框对象的显示方法
  3. 用弹框对象的隐藏方法
<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()
})


图片上传
  1. 获取图片文件
  2. 使用FormData携带图片文件
  3. 提交到服务器,获取图片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
  1. 创建XMLHttpRequest对象
  2. 配置请求方法和请求url地址
  3. 监听loadend事件,接收响应结果
  4. 发起请求
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将嵌套型回调调整为平铺型回调,完美的解决了回调地狱的问题

  • 24
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不是真的冷漠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值