欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AJAX

程序员文章站 2022-07-24 19:48:37
Ajax之eval()函数 ......

AJAX

安装node-dev方便调试

yarn global add node-dev 安装

优点 当我们修改代码时会自动重启,方便开发

AJAX加载CSS

四个步骤

  1. 创建一个HttpRequest对象

  2. 调用open方法

  3. 监听对象的onload&onerror事件

    –专业前端会改用onreadystatechange事件

    –在事件处理函数里操作CSS文件内容

  4. 调用对象的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

相关标签: node.js javascript