前端基础 #AJAX封装

96 阅读1分钟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        let $ = {              //声明变量$,内部含有get方法和ajax方法
            get(url, success) {
                this.ajax({    //调用本身ajax方法,传两个参数
                    url,
                    success
                })
            },
            ajax({ type, url, async, success }) {//ajax传入对象,包含参数
                let ajax = new XMLHttpRequest()    //实例ajax请求
                ajax.open(type || 'GET', url, async || true)//启动ajax,未传参数使用“||”后默认值
                ajax.send()                                   //发送请求
                ajax.onreadystatechange = () => {      // readyState有五种可取值0:尚未初始化,1:正在加载,2:加载完毕,3:正在处理;4:处理完毕。
                    if (ajax.readyState === 4) {       //状态处理完毕,从服务器返回的响应数据
                        if (ajax.status === 200) {     //200 请求成功。Http状态码含义:200 请求成功;202 请求被接受但处理未完成;400 错误请求;404 请求资源未找到;500 内部服务器错误;
                            success(JSON.parse(ajax.response))
                        }
                    }
                }
            }
        }

        $.get("/a.json", function (data) { //调用$的get方法,传入两个参数
            console.log('打印', data);      //打印返回数据data
        })

    </script>
</body>

</html