首页>>新闻中心>>ES6学习方法

ajax 说明

来源: 本站    发布时间: 2021-03-01 22:10    阅读次数:

 // 任务进入执行栈 -> 判断同步还是异步
    // 同步 -> 主线程任务执行完毕
    // 异步 ->  Event Table  ->  Event Queue
    // 读取任务队列中结果进入主线程执行
    // console.log(1)
    //
    // async function foo() {
    //    await setTimeout(()=> {
    //         console.log(2)
    //     }, 1000)
    // }
    // foo()
    // async function fo1() {
    //     await setTimeout(()=> {
    //         console.log(4)
    //     }, 900)
    // }
    // fo1()
    // console.log(3)

    // Ajax 原理
    // 1、创建XMLHttpRequest对象


    function ajax(url,callback) {
        var xmlhttp
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest()
        }else{
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
        }
        // 发送请求
        xmlhttp.open("GET", url, true)
        xmlhttp.send()
        //服务端的响应
        xmlhttp.onreadystatechange = function () {
            if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                var obj = JSON.parse(xmlhttp.response)
                //console.log(obj)
                callback(obj)
            }
        }
    }

    var url1 = "http://192.168.0.105/es6/json/a.json"
    var url2 = "http://192.168.0.105/es6/json/b.json"
    var url3 = "http://192.168.0.105/es6/json/c.json"
    //callback hell
    ajax(url1, res => {
        console.log(res)
        ajax(url2, res => {
            console.log(res)
            ajax(url3, res => {
                console.log(res)
            })
        })
    })
一起设计吧
上一篇: ES6一Proxy
下一篇: Promise 状态管理
BACK