ajax请求操作实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        #box{
            width:600px;
            height:200px;
            padding:20px;
            border:1px solid #999;
        }
    </style>
</head>
<body>
    <h1>ajax</h1>
    <hr>
    <button onclick="loadHtml()">加载</button>
    <div id="box"></div>
    <script>
        
        function loadHtml(){
            // ①实例化 XMLHttpRequest对象
            if (window.XMLHttpRequest) {
                //非IE IE7+
                var xhr = new XMLHttpRequest();
            } else {
                //IE 6
                var xhr = new ActiveXObject(\'Microsoft.XMLHTTP\');
            }
            
            //② 给xhr 绑定事件， 检测请求的过程
            xhr.onreadystatechange = function(){
                console.log(xhr.readyState);
                //如果成功介绍到响应 
                if (xhr.status == 200 && xhr.readyState == 4) {
                    document.getElementById(\'box\').innerHTML = xhr.responseText;
                }
            }
            
            //③ 进行请求的初始化
            xhr.open(\'get\', \'http://localhost/s32/JS10_Jquery01/lessson/1.php\', true);
            
            //④ 正式发送请求
            xhr.send();
        }
    </script>
</body>
</html>