Ajax

关于Ajax的创建：
向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等
到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户
体验。
 
json文件：
{

// 先判断是否是200
// 获取数据
// 返回数据

    "status":200,
    "data":{
        "name":"Web",
        "student":[
            {"id":1001,"name":"张三"},
            {"id":1002,"name":"李四"},
            {"id":1003,"name":"王五"}
        ]
    },
    "msg":"错误信息"
}
<script>
        window.onload = function () {
            // 1) 创建 XMLHttpRequest 对象, 也就是创建一个异步调用对象
            var request = new XMLHttpRequest();
            // 2) 创建一个新的 HTTP 请求, 并指定该 HTTP 请求的方法、URL 及验证信息
            request.open("get", "./data.json");
            // 3) 设置响应 HTTP 请求状态变化的函数
            request.onreadystatechange = function () {
                if (request.status === 200 && request.readyState === 4) {
                    //responseXML与responseText
                    //都是用来获取数据的  格式不同
                    // console.log(request.responseText)
                    // console.log(request.responseXML)
                    // 5) 获取异步调用返回的数据  5-6都在函数里面
                    var data = JSON.parse(request.responseText);
                    //console.log(data);
                    // 6) 使用 JavaScript 和 DOM 实现局部刷新
                    if(data.status===200){
                        var cls=data.data;
                        document.querySelector("h1").innerText=cls.name;
                    }else{
                        console.log(data.msg);
                    }
                }
            }
                // 4) 发送 HTTP 请求
                request.send();
        }
    </script>
</head>

<body>
<h1></h1>
</body>
posted @ 2021-11-22 12:06  与神明画过押  阅读(33)  评论(0)    收藏  举报