美文网首页
原生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

    标签: Ajax 正文 一、实现一个原生Ajax 二、Ajax状态 三、将原生的 ajax 封装成 promise

  • js和jq的ajax调用

    原生ajax jQuery的ajax

  • html5的ajax学习(三)

    一.原生的ajax封装 原生的ajax的调用 二.jquery的ajax 2.1 jquery的语法 三. fun...

  • 原生ajax和jquery中的ajax

    原生的ajax请求方法: jquery中的ajax:

  • ajax

    原生ajax配置详解 对ajax简单封装 调用

  • Ajax Axios

    关于Ajax兼容性问题 前端原生Ajax(get方式),后端使用node.js 前后端代码: 前端原生Ajax(p...

  • ajax封装

    原生ajax封装

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • [转]JS原生Ajax代码示例

    文章来源: JS原生Ajax和jQuery的Ajax与代码示例 -- 苏凯勇往直前 JS原生的Ajax其实就是围绕...

  • ajax总结

    1. Ajax 1.1 原生JavaScript封装Ajax 1.2 jquery ajax 及其 快捷方法 $....

网友评论

      本文标题:原生AJAX

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