javaScript的AJAX实现

最新推荐文章于 2022-07-27 21:14:45 发布

Byte_Dance

最新推荐文章于 2022-07-27 21:14:45 发布

阅读量289

点赞数

分类专栏： JS

JS 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一个简单的AJAX应用实例，通过一个按钮触发GET请求，实现页面局部刷新的功能。文章详细展示了如何创建XMLHttpRequest对象，并设置请求方式及监听状态变化来获取服务器返回的数据。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试AJAX</title>

</head>
<body>
    <div id="myDiv">1</div>
    <button id="btn" >发送请求</button>

    <script>
        window.onload = function(){
            var  bt = document.getElementById("btn");
            bt.onclick = function(){
                //1 .创建一个异步对象
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    // 高级浏览器
                    xmlhttp=new XMLHttpRequest();
                }
                else {
                    // 渣渣 IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                //2 .设置请求方式和请求地址(IE浏览器第一次请求后会缓存到内容,
下次打印内容修改的话还是调用缓存的,要给地址后边加一个日期毫秒变量才会破坏掉缓存)
                xmlhttp.open("GET","testAJAX.php?time="+(new Date().getTime()),true);
                //3 .发送请求
                xmlhttp.send();
                //4 .监听状态的变化
                xmlhttp.onreadystatechange=function()
                {
                    /**
                     * 状态码 :
                     * 0 请求未初始化
                     * 1 服务器连接已建立
                     * 2 请求已接收
                     * 3 请求处理中
                     * 4 请求已完成,且响应已就绪
                     **/
                    //判断请求是否成功
                    if (xmlhttp.readyState === 4){
                        //HTTP状态码 200开始 到 300之间的  加上 304码 为服务器成功处理请求, 404码为未找到资源 请求失败
                        if(xmlhttp.status >=200 && xmlhttp.status<300 || xmlhttp.status===304){
                            //5 .服务器处理结果
                            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                            alert("请求成功");
                        }else{
                            alert("请求失败");
                        }

                    }
                }
            }
        }


    </script>
</body>
</html>