jQuery getJSON 在 IE8 中的兼容性问题

基础概念

getJSON 是 jQuery 提供的一个简便方法，用于通过 HTTP GET 请求从服务器加载 JSON 编码的数据。它是 $.ajax() 的一个简化形式，专门用于处理 JSON 数据。

IE8 不兼容的原因

IE8 中存在几个关键问题会导致 getJSON 无法正常工作：

原生 JSON 支持缺失：IE8 没有内置的 JSON.parse() 方法，而 getJSON 依赖此方法来解析返回的 JSON 数据。
跨域请求限制：IE8 的 XDomainRequest 对象与标准的 XMLHttpRequest 有差异，导致跨域请求处理不同。
缓存问题：IE8 对 AJAX 请求有激进的缓存策略，可能导致获取不到最新数据。
jQuery 版本问题：较新版本的 jQuery 可能不再支持 IE8。

解决方案

1. 添加 JSON 解析支持

<!-- 在引入 jQuery 之前添加 JSON2.js 以支持 JSON 解析 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.min.js"></script>
<script src="jquery-1.12.4.min.js"></script>

2. 使用兼容 IE8 的 jQuery 版本

<!-- 使用 jQuery 1.x 最后一个版本 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

3. 修改 getJSON 调用方式

// 原始可能不工作的代码
$.getJSON('data.json', function(data) {
    console.log(data);
});

// 修改为兼容 IE8 的写法
$.ajax({
    url: 'data.json',
    dataType: 'json',
    cache: false, // 防止 IE8 缓存
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error("Error:", status, error);
    }
});

4. 处理跨域请求

如果是跨域请求，需要服务端支持 JSONP 或 CORS：

// JSONP 方式
$.ajax({
    url: 'http://example.com/data',
    dataType: 'jsonp',
    jsonp: 'callback',
    success: function(data) {
        console.log(data);
    }
});

完整示例

<!DOCTYPE html>
<html>
<head>
    <title>IE8 getJSON 兼容示例</title>
    <!-- 添加 JSON 支持 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.min.js"></script>
    <!-- 使用兼容的 jQuery 版本 -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
    $(document).ready(function() {
        // 兼容 IE8 的 AJAX 请求
        $.ajax({
            url: 'data.json',
            dataType: 'json',
            cache: false,
            success: function(data) {
                $('#result').text(JSON.stringify(data));
            },
            error: function(xhr, status, error) {
                $('#result').text('Error: ' + status + ' - ' + error);
            }
        });
    });
    </script>
</head>
<body>
    <div id="result">Loading data...</div>
</body>
</html>