如何使用原生JS创建ajax

老村长boy

于 2021-05-31 21:37:03 发布

阅读量164

点赞数 1

文章标签： ajax js post

本文链接：https://blog.youkuaiyun.com/weixin_42689830/article/details/117430482

版权

本文详细讲解了如何使用JavaScript的XMLHttpRequest实现异步GET和POST请求，介绍了readyState状态变化和onreadystatechange事件在Ajax中的应用，重点突出了数据获取的安全性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class='box'>
    </div>

    <script>
        /*
        get 一般用来请求数据，发送不安全
        post 用来发送数据，相对安全

        XMLHttpRequest()  js自带方法

        readyState
            => 0创建ajax
                1创建请求地址
                2发送请求
                3部分数据请求成功
                4所有数据请求成功

        
        */
        let xml=new XMLHttpRequest();//创建ajax 同步
        console.log(xml);
        console.log(xml.readyState,"变化1");
        xml.open("get","http://127.0.0.1:5500/47.ajax/%E6%B5%8B%E8%AF%95json%E6%95%B0%E6%8D%AE.html",true);//创建请求地址 异步,需要设置成true，否则数据量太大会等待很久
        console.log(xml.readyState,"变化2");
        xml.send(null);//发送  异步
        xml.onreadystatechange=function(){  //监听事件状态的变化  异步
            console.log(xml.readyState,"变化3");
            if(xml.readyState==4){
                console.log(xml.responseText);
            }
        }
    </script>
</body>
</html>