AJAX是异步的JavaScript和XML。简单来说就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是他的异步特性,也就是说它可以在不刷新页面的情况下,交换数据或更新页面
AJAX是浏览器与服务器进行数据通信的技术
语法:
axios({
url:"目标资源地址"
}).then(result=>{
//对服务器传入的资源进行处理
})
URL就是统一资源定位符,用于访问网址上的资源
URL有三部分组成
浏览器提供个服务器的额外信息,让服务器返回浏览器想要的信息
https://xxx.com/xxx/xxx?参数名=值1&参数名2=值2
axios({
url://目标的资源地址
params:{
参数名:值
}
}).then(result=>{
//对服务器返回的数据进行后续处理
})
axios({
url://目标资源地址
method:
data:{
参数名:值
}
}).then({
//对数据的后续处理
})
axios({
//请求选项
}).then(result=>{
//处理数据
})/catch(error=>{
//处理错误
})
HTTP协议:规定了浏览器发送及服务器返回内容的格式
请求报文:浏览器按照HTTP协议要求的格式,发送给服务器内容
Content-Type:浏览器携带的内容类型
在浏览器的开发者工具中的网络可以找到错误报文,更容易找到错误
由四部分组成:请求行,请求头,空行,请求体
HTTP协议:规定了浏览器发送及服务器返回内容的格式
响应报文:服务器按照HTTP协议要求的格式,返回给浏览器的内容
由四部分组成:响应行,响应头,空行,响应体
HTTP响应状态码:
状态码 |
说明 |
1xx |
信息 |
2xx |
成功 |
3xx |
重定向信息 |
4xx |
客户端错误 |
5xx |
服务端错误 |
接口文档是后端工程师定义的来描述接口的文章
接口:使用AJAX和服务器通讯时,使用的url,请求方法,方法参数
作用:快速收集表单元素的值
先引入form-serilize插件
表单元素应该设置name属性,name属性会作为对象的属性名
建议name的属性值和接口文档的参数名一致
const form = document.querySelector('.example-form')
const data= serialize(form,{hash:true,empty:true})
hash:设置获取数据结构 -true:返回的是JS对象 -false:查询字符串
empty:设置是否获取空值
功能:不离开当前页面,显示单独内容,供用户操作
//隐藏弹框
通过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()
})
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
})
})
XMLHttpRequest对象用于与服务器交互,通过XMLHttpRequest可以在不刷新页面的情况下特定URL获取数据。这允许页面在不影响用户操作的情况下,更新页面内容。XMLHttpRequest在AJAX编程中被大量使用
const xhr = new XMLHttpRequest()
xhr.open('请求方法','请求地址')
xhr.addEventListener('loadend',()=>{
//响应结果
console.log(xhr.response)
})
xhr.send()
urlSearchParams可以帮助我们生成指定格式的查询参数
const paramObj = new URLSearchParams({
参数名1:值1,
参数名2:值2
})
const queryObj = paramObj.toString()
调用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是异步编程的一种解决方案,之前异步编程是通过回调函数来实现的
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将嵌套型回调调整为平铺型回调,完美的解决了回调地狱的问题