AJAX
程序员文章站
2022-07-24 19:48:37
Ajax之eval()函数 ......
AJAX
安装node-dev方便调试
yarn global add node-dev 安装
优点 当我们修改代码时会自动重启,方便开发
AJAX加载CSS
四个步骤
-
创建一个HttpRequest对象
-
调用open方法
-
监听对象的onload&onerror事件
–专业前端会改用onreadystatechange事件
–在事件处理函数里操作CSS文件内容
-
调用对象的send方法
–具体代码请打开MDN用CRM(copy,run,my)大法搞定
具体代码如下:
getClass.onclik = ()=>{
const request = new XMLHttpRequest()
request.open("GET","/style.css")
request.onload = ()=>{
//创建一个style标签
const style = document.createElement('style')
//将获取到的内容放到style标签里面
style.innerHTML= request.response
//将style标签插入到head中
document.head.appendChild(style)
}
request.onerror = ()=>{
console.log('error!')
}
request.send()
}
同理,加载js和html也是一样的原理
但是这里有一个BUG当我们的页面加载失败时不会执行onerror里面的内容,这是因为onerror出现的时候还没有AJAX,当时的error只能监听图片加载失败等等事件。因此,专业的前端会使用onreadystatechange事件,这里我们简单的介绍一下一个请求的一生。
一个请求的一生:readyState
const req = new XMLHttpRequest() readyState=0
req.open() readyState=1
req.send() readyState=2
第一个字符出现 (下载中) readyState=3
最后一个字符下载结束 (下载完成) readyState=4
下面我们用onreadystatechange事件实现一下刚才的代码
getCss.onclick = () => {
const request = new XMLHttpRequest()
request.open('GET', "/style.css")
request.onreadystatechange = () => {
//下载完成,但是不知道成功还是失败
if (request.readyState === 4) {
//若是加载成功状态码为2开头
if (request.status >= 200 && request.status < 300) {
const style = document.createElement('style')
style.innerHTML = request.response
document.head.appendChild(style)
}
else {
alert('加载失败!')
}
}
}
request.send()
}
加载JS和HTML同理
本文地址:https://blog.csdn.net/qq_45060976/article/details/109251607