早期的网页都是通过后端渲染来完成的:服务器端渲染(SSR,server side render):
服务器端渲染的缺点:
重绘的整个页面
再返回给浏览器加载,这显然有悖于程序员的“DRY
( Don‘t repeat yourself )”原则;网络带宽
带来不必要的开销。有没有办法在页面数据变动时,只向服务器请求新的数据,并且在阻止页面刷新的情况下,动态的替换页面中展示的数据
呢?
AJAX
”。AJAX是“Asynchronous JavaScript And XML”的缩写(异步的JavaScript和XML),是一种实现无页面刷新
获取服务器数据的技术。
异步
特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。你可以使用AJAX最主要的两个特性做下列事:
什么是HTTP呢?我们来看一下维基百科的解释:
统一资源标识符
(Uniform Resource Identifiers,URI)来标识;HTTP是一个客户端(用户)和服务端(网站)之间请求和响应的标准
。
我们网页中的资源通常是被放在Web资源服务器中,由浏览器自动发送HTTP请求来获取、解析、展示的。
目前我们页面中很多数据是动态展示的:
数据展示
、搜索数据
、表单验证
等等,也是通过在JavaScript中发送HTTP请求获取的;一次HTTP请求主要包括:请求(Request)和响应(Response)
HTTP/0.9
HTTP/1.0
HTTP/1.1(目前使用最广泛的版本)
2015年,HTTP/2.0
2018年,HTTP/3.0
在RFC中定义了一组请求方式,来表示要对给定资源执行的操作:
在开发中使用最多的是GET
、POST
请求;
在request对象的header中也包含很多有用的信息,客户端会默认传递过来一些信息:
content-type
是这次请求携带的数据类型
:
content-length
:文件的大小长度
keep-alive
:
立刻中断
;accept-encoding
:告知服务器,客户端支持的文件压缩格式
,比如js文件可以使用gzip
编码,对应 .gz文件;
accept
:告知服务器,客户端可接受文件的格式类型;
user-agent
:客户端相关的信息;
Http状态码(Http Status Code)是用来表示Http响应状态的数字代码:
扩展推荐:Fe-Helper插件,可以格式化json数据
AJAX 是异步的 JavaScript 和 XML(Asynchronous JavaScript And XML)
如何来完成AJAX请求呢?
// 1.创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
// 2.监听状态的改变(宏任务)
xhr.onreadystatechange = function() {
// console.log(xhr.response)
if (xhr.readyState !== XMLHttpRequest.DONE) return
// 将字符串转成JSON对象(js对象)
const resJSON = JSON.parse(xhr.response)
const banners = resJSON.data.banner.list
console.log(banners)
}
// 3.配置请求open
// method: 请求的方式(get/post/delete/put/patch...)
// url: 请求的地址
xhr.open("get", "http://123.207.32.32:8000/home/multidata")
// 4.发送请求(浏览器帮助发送对应请求)
xhr.send()
事实上,我们在一次网络请求中看到状态发生了很多次变化,这是因为对于一次请求来说包括如下的状态:
注意:这个状态并非是HTTP的相应状态,而是记录的XMLHttpRequest对象的状态变化。
发送同步请求:
将open的第三个参数设置为false
xhr.open("get", "http://127.0.0.1:8080/home", false)
// 1.创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
// 2.监听状态的改变(宏任务)
// 监听四种状态
// xhr.onreadystatechange = function() {
// // 1.如果状态不是DONE状态, 直接返回
// if (xhr.readyState !== XMLHttpRequest.DONE) return
// // 2.确定拿到了数据
// console.log(xhr.response)
// }
// 3.配置请求open
// async: false
// 实际开发中要使用异步请求, 异步请求不会阻塞js代码继续执行
xhr.open("get", "http://127.0.0.1:8000/home/multidata", false)
// 4.发送请求(浏览器帮助发送对应请求)
xhr.send()
// 5.同步必须等到有结果后, 才会继续执行
console.log(xhr.response)
console.log("------")
console.log("++++++")
console.log("******")
除了onreadystatechange还有其他的事件可以监听
loadstart
:请求开始。progress
: 一个响应数据包到达,此时整个 response body 都在 response 中。abort
:调用 xhr.abort() 取消了请求。error
:发生连接错误,例如,域错误。不会发生诸如 404 这类的 HTTP 错误。load
:请求成功完成。timeout
:由于请求超时而取消了该请求(仅发生在设置了 timeout 的情况下)。loadend
:在 load,error,timeout 或 abort 之后触发。我们也可以使用load来获取数据:
const xhr = new XMLHttpRequest()
// onload监听数据加载完成
xhr.onload = function() {
console.log("onload")
}
xhr.open("get", "http://127.0.0.1:8000/home/multidata")
xhr.send()
发送了请求后,我们需要获取对应的结果:response
属性
正文内容
;通过responseType可以设置获取数据的类型
将 responseType 的值设置为空字符串
,则会使用 text
作为默认值。xhr.responseType = "json"
和responseText、responseXML的区别:
普通的文本和XML
,所以我们通常会通过responseText、 responseXML来获取响应结果;json数据
,直接设置为json即可;XMLHttpRequest的state
是用于记录xhr对象本身的状态变化,并非针对于HTTP的网络请求状态。
如果我们希望获取HTTP响应的网络状态,可以通过status
和statusText
来获取:
// 1.创建对象
const xhr = new XMLHttpRequest()
// 2.监听结果
xhr.onload = function() {
console.log(xhr.status, xhr.statusText)
// 根据http的状态码判断是否请求成功
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response)
} else {
console.log(xhr.status, xhr.statusText)
}
}
xhr.onerror = function() {
console.log("onerror", xhr.status, xhr.statusText)
}
// 3.设置响应类型
xhr.responseType = "json"
// 4.配置网络请求
xhr.open("get", "http://1xx.xx.x.2:8000/home/multidata")
// 5.发送网络请求
xhr.send()
在开发中,我们使用最多的是GET
和POST
请求,在发送请求的过程中,我们也可以传递给服务器数据。
常见的传递给服务器数据的方式有如下几种:
const formEl = document.querySelector(".info")
const sendBtn = document.querySelector(".send")
sendBtn.onclick = function() {
// 创建xhr对象
const xhr = new XMLHttpRequest()
// 监听数据响应
xhr.onload = function() {
console.log(xhr.response)
}
// 配置请求
xhr.responseType = "json"
// 1.传递参数方式一: get -> query
// xhr.open("get", "http://1xx.xx.xx.32:1888/02_param/get?name=why&age=18&address=广州市")
// 2.传递参数方式二: post -> urlencoded
// xhr.open("post", "http://1xx.xx.xx.32:1888/02_param/posturl")
// // 发送请求(请求体body)
// xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
// xhr.send("name=why&age=18&address=广州市")
// 3.传递参数方式三: post -> formdata
// xhr.open("post", "http://1xx.xx.xx.32:1888/02_param/postform")
// // formElement对象转成FormData对象
// const formData = new FormData(formEl)
// xhr.send(formData)
// 4.传递参数方式四: post -> json
xhr.open("post", "http://1xx.xx.xx.32:1888/02_param/postjson")
xhr.setRequestHeader("Content-type", "application/json")
xhr.send(JSON.stringify({name: "codermq", age: 18, height: 1.88}))
}
function mqajax({
url,
method = "get",
data = {},
headers = {}, // token
success,
failure
} = {}) {
// 1.创建对象
const xhr = new XMLHttpRequest()
// 2.监听数据
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
success && success(xhr.response)
} else {
failure && failure({ status: xhr.status, message: xhr.statusText })
}
}
// 3.设置类型
xhr.responseType = "json"
// 4.open方法
if (method.toUpperCase() === "GET") {
const queryStrings = []
for (const key in data) {
queryStrings.push(`${key}=${data[key]}`)
}
url = url + "?" + queryStrings.join("&")
xhr.open(method, url)
xhr.send()
} else {
xhr.open(method, url)
xhr.setRequestHeader("Content-type", "application/json")
xhr.send(JSON.stringify(data))
}
return xhr
}
// 调用者
mqajax({
url: "http://1xx.xx.xx.1:1888/02_param/get",
method: "GET",
data: {
name: "codermq",
age: 18
},
success: function(res) {
console.log("res:", res)
},
failure: function(err) {
// alert(err.message)
}
})
promise封装
function mqajax({
url,
method = "get",
data = {},
timeout = 10000,
headers = {}, // token
} = {}) {
// 1.创建对象
const xhr = new XMLHttpRequest()
// 2.创建Promise
const promise = new Promise((resolve, reject) => {
// 2.监听数据
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response)
} else {
reject({ status: xhr.status, message: xhr.statusText })
}
}
// 3.设置类型
xhr.responseType = "json"
xhr.timeout = timeout
// 4.open方法
if (method.toUpperCase() === "GET") {
const queryStrings = []
for (const key in data) {
queryStrings.push(`${key}=${data[key]}`)
}
url = url + "?" + queryStrings.join("&")
xhr.open(method, url)
xhr.send()
} else {
xhr.open(method, url)
xhr.setRequestHeader("Content-type", "application/json")
xhr.send(JSON.stringify(data))
}
})
promise.xhr = xhr
return promise
}
在网络请求的过程中,为了避免过长的时间服务器无法返回数据,通常我们会为请求设置一个超时时间:timeout
。
我们也可以通过abort
方法强制取消请求;
const xhr = new XMLHttpRequest()
xhr.onload = function() {
console.log(xhr.response)
}
xhr.onabort = function() {
console.log("请求被取消掉了")
}
xhr.responseType = "json"
// 1.超市时间的设置
xhr.ontimeout = function() {
console.log("请求过期: timeout")
}
// timeout: 浏览器达到过期时间还没有获取到对应的结果时, 取消本次请求
// xhr.timeout = 3000
xhr.open("get", "http://1xx.xx.xx.x:1888/01_basic/timeout")
xhr.send()
// 2.手动取消结果
const cancelBtn = document.querySelector("button")
cancelBtn.onclick = function() {
xhr.abort()
}
Fetch可以看做是早期的XMLHttpRequest的替代方案
,它提供了一种更加现代的处理方案:
返回值是一个Promise
,提供了一种更加优雅的处理结果方式
Fetch函数的使用:
Promise
Fetch的数据响应主要分为两个阶段:
阶段一:当服务器返回了响应(response)
我们可以在 response 的属性中看到 HTTP 状态:
阶段二,为了获取 response body,我们需要使用一个其他的方法调用。
fetch("http://1xx.xxx.x.x:8000/home/multidata1").then(res => {
console.log(res)
// console.log(res.json())
// console.log(res.text())
if (res.ok) {
res.json().then(rs => {
console.log(rs)
})
} else {
console.log(res.status)
console.log(res.statusText)
}
}).catch(res => {
console.log("err:" + res)
})
基于Promise的使用方案:
fetch("http://127.0.0.1/abc/cba").then(res => {
return res.json()
}).then(res => {
console.log("res:", res)
})
基于async、await的使用方案:
async function getData() {
const response = await fetch("http://127.0.0.1/abc/cba")
const data = await response.json()
console.log("data:", data)
}
getData()
创建一个 POST 请求,或者其他方法的请求,我们需要使用 fetch 选项:
fetch("", {
method: "post",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "name=abc&age=18"
}).then(res => {
return res.json()
}).then(res => {
console.log("data:", res)
})
// 1.fetch发送get请求
// 1.1.未优化的代码
// fetch("http://1xxx:8000/home/multidata").then(res => {
// // 1.获取到response
// const response = res
// // 2.获取具体的结果
// response.json().then(res => {
// console.log("res:", res)
// })
// }).catch(err => {
// console.log("err:", err)
// })
// 1.2. 优化方式一:
// fetch("http://1xxxx:8000/home/multidata").then(res => {
// // 1.获取到response
// const response = res
// // 2.获取具体的结果
// return response.json()
// }).then(res => {
// console.log("res:", res)
// }).catch(err => {
// console.log("err:", err)
// })
// 1.3. 优化方式二:
// async function getData() {
// const response = await fetch("http://1xxx:8000/home/multidata")
// const res = await response.json()
// console.log("res:", res)
// }
// getData()
// 2.post请求并且有参数
async function getData() {
// const response = await fetch("http://1xxx:1888/02_param/postjson", {
// method: "post",
// // headers: {
// // "Content-type": "application/json"
// // },
// body: JSON.stringify({
// name: "why",
// age: 18
// })
// })
const formData = new FormData()
formData.append("name", "why")
formData.append("age", 18)
const response = await fetch("http://1xxx:1888/02_param/postform", {
method: "post",
body: formData
})
// 获取response状态
console.log(response.ok, response.status, response.statusText)
const res = await response.json()
console.log("res:", res)
}
getData()
文件上传是开发中经常遇到的需求,比如头像上传、照片等。
<body>
<form action="" method="post">
<input type="file" name="file" id="file">
<button type="button">文件上传button>
form>
<script>
const fileEl = document.querySelector("#file")
const btn = document.querySelector("button")
btn.onclick = function () {
console.log(fileEl)
const files = fileEl.files
console.log(files)
if (files.length > 0) {
const formData = new FormData()
formData.append("avatar", files[0])
const xhr = new XMLHttpRequest()
xhr.responseType = "json"
xhr.onload = function () {
console.log("响应结果:", xhr.response)
const imgUrl = xhr.response.avatarURL
const imgEl = new Image()
imgEl.src = imgUrl
document.body.append(imgEl)
}
xhr.open("post", "http://1xxx:1888/02_param/upload")
xhr.send(formData)
}
}
script>
body>
Fetch也支持文件上传,但是Fetch没办法监听进度。
fetch("http://xxx:1888/02_param/upload", {
method: "post",
body: formData
}).then(res => {
return res.json()
}).then(res => {
const imgUrl = res.avatarURL
const imgEl = new Image()
imgEl.src = imgUrl
document.body.append(imgEl)
})
}