16-Ajax在IE中的兼容性问题及解决方案

卖女孩的小火柴..

于 2021-09-10 17:07:08 发布

阅读量1.1k

点赞数 1

分类专栏： Ajax jQuery 文章标签： ajax javascript

本文链接：https://blog.csdn.net/qq_45348060/article/details/120226085

版权

Ajax 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

原生js中Ajax（五个步骤）

1.创建一个异步对象

2.设置请求方式和请求地址

3.发送请求

4.监听状态的变化

5.处理返回的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-ajax-get</title>
    <!--
    1.什么是Ajax?
    AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
    -->
    <script>
        window.onload = function (ev) {
            var oBtn = document.querySelector("button");
            oBtn.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) {
                    /*
                    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>
</head>
<body>
<button>发送请求</button>
</body>
</html>

Ajax在IE中使用的两个兼容性问题

一、XMLHttpRequest 对象（IE5和IE6 使用ActiveXobject）。

所有现代浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

解决方案：
if (window.XMLHttpRequest) {
    // 用于现代浏览器的代码
     xmlhttp = new XMLHttpRequest();
 } else {
    // 应对老版本 IE 浏览器的代码
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
二、Ajax在IE中的缓存问题（在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为同一个URL只有一个结果）

解决方案：在url后面拼接一个时间戳或者随机数
xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-ajax-get</title>

    <script>
        window.onload = function (ev) {

            var oBtn = document.querySelector("button");
            oBtn.onclick = function (ev1) {
                var xhr;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }
                // var xhr = new XMLHttpRequest();
                /*
                在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为
                同一个URL只有一个结果
                05-ajax-get.txt === abc

                console.log(Math.random());
                console.log(new Date().getTime());
                */
                xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);
                xhr.send();
                xhr.onreadystatechange = function (ev2) {
                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 && xhr.status < 300 ||
                        xhr.status === 304){
                            // alert("请求成功");
                            alert(xhr.responseText);
                        }else{
                            alert("请求失败");
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<button>发送请求</button>
</body>
</html>

卖女孩的小火柴..

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
16-Ajax在IE中的兼容性问题及解决方案

原生js中Ajax（五个步骤）1.创建一个异步对象2.设置请求方式和请求地址3.发送请求4.监听状态的变化5.处理返回的结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04-ajax-get</title> <!-- 1.什么是Ajax? AJAX 是与服务器交换数据并更新部分网页
复制链接

扫一扫