ajax跨域读取json文件

Ajax是一种在网页中使用的异步通信技术，可以实现在不刷新整个页面的情况下，与服务器进行数据交互。由于浏览器的同源策略限制，Ajax默认只能向同一域名下的服务器发送请求，而无法跨域读取数据。通过一些技术手段，我们可以实现跨域读取JSON文件。

一种常用的跨域读取JSON文件的方法是使用JSONP（JSON with Padding）。JSONP利用了script标签的src属性可以跨域加载资源的特性。在跨域读取JSON文件时，我们可以通过动态创建一个script标签，将JSON文件的URL作为src属性值，然后将这个script标签插入到页面中。服务器端会返回一个包裹在回调函数中的JSON数据，我们只需要在页面中定义一个同名的回调函数，就可以在回调函数中获取到JSON数据。

下面是一个示例代码，演示了如何使用JSONP跨域读取JSON文件：

function handleJSONP(data) {
  // 在这里处理获取到的JSON数据
  console.log(data);
}
function loadJSONP(url) {
  var script = document.createElement('script');
  script.src = url + '?callback=handleJSONP';
  document.body.appendChild(script);
}
loadJSONP('http://example.com/data.json');

在上面的示例代码中，我们定义了一个handleJSONP函数，用来处理获取到的JSON数据。然后，我们又定义了一个loadJSONP函数，用来动态创建script标签，并将JSON文件的URL作为src属性值。在URL中，我们通过callback参数指定了回调函数的名称为handleJSONP。我们调用loadJSONP函数，传入JSON文件的URL，就可以开始跨域读取JSON文件了。

需要注意的是，JSONP只支持GET请求，不支持POST请求。由于JSONP是通过动态创建script标签实现的，所以无法获取到服务器的响应状态码和响应头信息。

除了JSONP，还有一种跨域读取JSON文件的方法是使用CORS（跨域资源共享）。CORS是一种标准的跨域解决方案，通过在服务器端设置响应头来实现跨域访问。使用CORS跨域读取JSON文件的代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 在这里处理获取到的JSON数据
    console.log(data);
  }
};
xhr.send();

在上面的示例代码中，我们使用XMLHttpRequest对象发送一个GET请求，请求的URL为JSON文件的地址。在请求的回调函数中，我们首先判断xhr.readyState和xhr.status是否满足条件，如果满足，则说明请求成功，可以从xhr.responseText中获取到服务器返回的JSON数据。

需要注意的是，使用CORS跨域读取JSON文件时，服务器端需要在响应头中添加Access-Control-Allow-Origin字段，来指定允许访问的域名。CORS还支持其他一些更复杂的跨域请求配置，如请求头的自定义字段、请求方法的限制等。

通过JSONP和CORS这两种方法，我们可以实现跨域读取JSON文件。JSONP适用于简单的跨域场景，而CORS则更加灵活，适用于复杂的跨域需求。在实际开发中，我们可以根据具体情况选择合适的方法来进行跨域读取JSON文件。