XHR与同步异步

原创已于 2022-11-21 21:44:55 修改 · 716 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-11-21 21:43:04 首次发布

Ajax技术通常使用axios.js库实现，但其内部基于原生JavaScript的XMLHttpRequest构造函数。同步Ajax按顺序执行，而异步Ajax不保证执行顺序，如定时器和DOM事件。异步操作在JavaScript中广泛存在，包括setTimeout、setInterval和Ajax请求。

Ajax是一个技术的名称, 而以前我们具体使用的是axios.js插件来发送请求，但是其实axios.js也是一个库, 内部是原生JS代码, 实际它是对原生的代码进行了封装。

Ajax如果用原生JS实现, 需要使用window提供的一个构造函数, 叫XMLHttpRequest

使用格式:

/1. 创建一个xhr对象

let xhr = new XMLHttpRequest()

/2. 设置请求方式和请求地址

xhr.open(请求方式, 请求地址)

3. 发送请求

xhr.send()

4. 监听load（请求成功）事件 ==> 可以获取响应数据

xhr.addEventListener('load', function() {

console.log(xhr.response) // 服务器返回的数据

})

同步和异步

同步代码：执行顺序和书写顺序一致

异步代码: 不是立即执行的，执行顺序和书写顺序不一致。

js中典型的异步代码有：

定时器：setTimeout，setInterval

Ajax

dom事件

<script>
    console.log(1)
    if (true) {
        console.log(2);
    } else {
        console.log(3);
    }
    setTimeout(() => {
        console.log(4);
    }, 1000)
    const fn = () => {
        console.log(5);
    }
    for (let i = 0; i < 3; i++) {
        console.log(6);
    }
    console.log(7);
    fn()
    document.addEventListener('click', () => {
        console.log(8);
    })
    console.log(9);
//打印结果  1 2 666 7 5 9 4
//数字8要点击才会打印
</script>