美文网首页
原生AJAX

原生AJAX

作者: Hello杨先生 | 来源:发表于2019-07-20 23:50 被阅读0次
    body>
    <button>请求数据</button>
    
    <script>
    
        var btn = document.getElementsByTagName("button")[0]
        var data = 1;
        btn.addEventListener("click",function () {
            // 1、创建Ajax对象
            var myAjax;
            // ie下创建ajax请求
            // var myAjax = new ActiveXObject("Microsoft.XMLHTTP");
            // 兼容处理
            window.XMLHttpRequest? myAjax = new XMLHttpRequest():myAjax = new ActiveXObject("Microsoft.XMLHTTP");
            // 2、链接服务器 open(请求方式,请求地址(文件),是否异步)
            myAjax.open("GET","a.text",true)
            //3、发送请求
            myAjax.send();
            //4、接收返回值
            myAjax.onreadystatechange =function () {
                //onreadystatechange 当与服务器交互时发生的事件
                //readystate:告诉我们浏览器和服务器进行到哪一步了
            //     0 - 4 种状态
            //    0:请求未初始化 (还没有调用到open方法)
            //    1:服务器链接已建立 (已经调用到send方法)
            //    2:请求已接收 (send方法已经完成,已接收到全部的响应内容)
            //    3:请求处理中 (解析响应内容)
            //    4:请求已完成且响应已就绪
                    //status
                    // "200" ok
                    // "404" 未找到页面
                if(myAjax.readyState ==4 && myAjax.status ==200){
                    console.log(myAjax.response)
                    data = myAjax.response;
                }else {
                    alert('请求失败')
                }
            }
            // myAjax.send();
            console.log(data)
        })
    
    
    </script>
    
    
    </body>
    

    相关文章

      网友评论

          本文标题:原生AJAX

          本文链接:https://www.haomeiwen.com/subject/favplctx.html