311 同步异步概述,Ajax 异步请求_html

311 同步异步概述,Ajax 异步请求_javascript_02


09.Ajax异步请求.html

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        // 1.创建ajax对象
        var xhr = new XMLHttpRequest();

        // 2.告诉Ajax对象要向哪发送请求,以什么方式发送请求
        // 1)请求方式 2)请求地址
        xhr.open('get', 'http://localhost:3000/first', false);

        // 3.发送请求
        xhr.send();
        console.log(111); // 没有上面的false,则一次输出 111 333 222 Hello, Ajax

        // 4.获取服务器端响应到客户端的数据
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                console.log(222)
                console.log(xhr.responseText) // Hello, Ajax
            }
        }

        console.log(333);
    </script>
</body>

</html>