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准备弹框标签，确认结构通过自定义属性，控制弹框的显示和隐藏
//隐藏弹框
通过JS来控制弹框的显示和隐藏
当需要其他JS代码的时候用JS来控制弹框的显示和隐藏
先创建弹框对象用弹框对象的显示方法用弹框对象的隐藏方法
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将嵌套型回调调整为平铺型回调，完美的解决了回调地狱的问题
相关文章
发表评论