Ajax一般模板解读

耶瞳

已于 2023-01-05 18:04:21 修改

阅读量246

点赞数 5

分类专栏： js 文章标签： ajax

于 2021-05-23 17:08:09 首次发布

本文链接：https://blog.csdn.net/tongkongyu/article/details/117197487

版权

js 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Ajax是与服务器交换数据并在不重新加载整个页面的情况下更新部分页面的技术-->
<script>
    window.onload = function (){
        let btn = document.querySelector("button");
        btn.onclick = function (){
            // 1.创建一个异步对象
            let xhr;
            if(window.XMLHttpRequest)
            {
                // 兼容高级浏览器
                xhr = new XMLHttpRequest();
            }
            else
            {
                // 兼容IE5和IE6
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2.设置请求方式和请求地址,为了IE浏览器返回缓存，需要加上随机数使IE每次都返回最新数据
            /*
             * xmlhttp.open("method","url",async);
             * method:请求的类型：GET或POST
             * url:文件在服务器上的位置
             * async:true（异步）或false（同步）
             */
            xhr.open("GET","Ajax-GET-IE.txt?t="+(new Date().getTime()),true);
            // 3.发送请求
            xhr.send();
            // 4.监听状态的变化
            xhr.onreadystatechange = function (){
                /*
                 0：请求未初始化
                 1：服务器连接已建立
                 2：请求已接收
                 3：请求已完成，且响应已就绪
                 */
                if (xhr.readyState === 4){
                    // 判断是否请求成功
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 340){
                        // 5.处理返回的结果
                        alert(xhr.responseText);
                    } else{
                        console.log("请求失败");
                    }
                }
            }
        }
    }
</script>
<button>click</button>
</body>
</html>