Ajax——get方法

最新推荐文章于 2024-02-23 11:46:43 发布

jwz934738949

最新推荐文章于 2024-02-23 11:46:43 发布

阅读量1k

点赞数

分类专栏： jQuery+Ajax

本文链接：https://blog.csdn.net/jwz934738949/article/details/108443380

版权

jQuery+Ajax 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

Ajax适用于页面与服务器相互传递数据，并且可以在页面不重新加载的情况下与服务器交换数据
Ajax的实现需要以下5个步骤：
1. 创建异步对象；
2. 设置请求的方式和请求地址；
3. 发送请求；
4. 监听状态的变化；
5. 处理返回结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax-get</title>
</head>
<script>
    window.onload = function (ev) {
        var btn = document.querySelector("button");
        btn.onclick = function (ev1) {
            // 1.创建异步对象
            var xmlhttp = new XMLHttpRequest()
            // 2.设置请求方式和请求地址
            /*
                method: 请求的类型，GET或者POST
                url: 文件在服务器上的位置
                async: true(异步) 与 false(同步)
            */
            xmlhttp.open("GET", "04-ajax-get.php", true)
            // 3.发送请求
            xmlhttp.send()
            // 4.监听状态的变化
            xmlhttp.onreadystatechange = function (ev2) {
                /*
                    readyState的值与相应含义：
                    0：请求未初始化
                    1：服务器连接已建立
                    2：请求以接收
                    3：请求处理中
                    4：请求已完成，且相应已建立
                */
                if (xmlhttp.readyState === 4) {
                    // 判断请求是否成功
                    if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
                        // 5.处理返回结果
                        console.log("服务器返回的结果")
                    } else {
                        console.log("服务器没有返回的结果")
                    }
                }
            }
        };
    };
</script>
<body>
<button>发送请求</button>
</body>
</html>

jwz934738949

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax——get方法

Ajax适用于页面与服务器相互传递数据，并且可以在页面不重新加载的情况下与服务器交换数据Ajax的实现需要以下5个步骤：创建异步对象；设置请求的方式和请求地址；发送请求；监听状态的变化；处理返回结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax-get</title></head>.
复制链接

扫一扫