Ajax实现读取

Bertha 。 2022-03-16 11:48 140阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <input type="button" value="读取" id="btn1"/>
    </body>
    <script>
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
            //1 创建Ajax对象
            //在ie6下没有XMLHttpRequest这个属性，因此XMLHttpRequest属于未定义，需要用window.XMLHttpRequest
            if (window.XMLHttpRequest) {
                var oAjax = new XMLHttpRequest();
            } else {
                //IE6
                var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
            }
    
            //2 连接服务器
            //open(方法，文件名，异步传输)
            oAjax.open('GET', 'a.txt', true);
    
            //3 发送请求
            oAjax.send();
    
            //4 从服务器接收返回
            oAjax.onreadystatechange = function () {
                /*readyState属性：请求状态（表示浏览器和服务器，进行到哪一步了）
                 *0    （未初始化）还没有调用open()方法
                 *1    （载入）已调用send()方法，正在发送请求
                 *2    （载入完成）send()方法完成，已收到全部响应内容
                 *3    （解析）正在解析响应内容
                 *4    （完成）响应内容解析完成，可以在客户端调用了
                 * */
                if (oAjax.readyState == 4) {//读取完成（不知道是否成功）
                    if (oAjax.status == 200) {//成功
                        alert("读取成功,内容为:"+oAjax.responseText);
                    }else{
                        alert("读取失败"+oAjax.status);
                    }
                }
            }
        }
    
    </script>
    </html>