ajax跨域访问json数据

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

Ajax是一种在网页上进行异步数据交互的技术，可以实现在不刷新整个页面的情况下，通过后台服务器获取数据并进行展示。由于浏览器的安全策略，Ajax只能在同源的情况下进行访问，即只能访问与当前网页具有相同协议、域名和端口的资源。这就导致了在跨域访问时会受到限制。

为了解决跨域访问的问题，我们可以通过JSONP（JSON with Padding）来实现。JSONP利用了HTML中的<script>标签可以跨域访问资源的特性，通过在请求URL中添加一个回调函数的参数，使得服务器返回的数据被包裹在该函数中，从而实现跨域获取数据。

下面是一个使用Ajax跨域访问JSON数据的示例代码：


function handleResponse(data) {
  // 处理返回的数据
  console.log(data);
}
var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleResponse';
document.body.appendChild(script);

在上面的示例代码中，我们通过创建一个<script>标签，并将其src属性设置为包含回调函数名称的URL，然后将该<script>标签添加到页面的<body>元素中。当浏览器加载该<script>标签时，会向服务器发送请求，服务器返回的数据会被包裹在回调函数中，最终调用该函数并传递数据作为参数。

需要注意的是，服务器端需要根据请求中的callback参数，将返回的数据包裹在该函数中返回。例如，服务器端返回的数据可能如下所示：


handleResponse({"name": "John", "age": 25});

这样，当浏览器加载完<script>标签后，会自动调用handleResponse函数，并将服务器返回的数据作为参数传递给该函数。我们可以在handleResponse函数中对数据进行处理，例如将数据展示在页面上。

除了JSONP，还可以使用CORS（跨域资源共享）来实现跨域访问。CORS是一种更为现代化的解决方案，它通过在服务器端设置响应头来允许跨域访问。在使用CORS时，浏览器会在发送请求时自动添加额外的头部信息，告知服务器允许跨域访问。

下面是一个使用Ajax和CORS跨域访问JSON数据的示例代码：


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

在上面的示例代码中，我们通过XMLHttpRequest对象发送GET请求，并设置请求URL为需要访问的资源的URL。在发送请求前，需要调用xhr.open()方法来初始化请求。然后，我们通过xhr.onreadystatechange事件来监听请求状态的变化，当请求完成且响应状态为200时，我们可以通过xhr.responseText获取到服务器返回的数据，并进行处理。

需要注意的是，服务器端需要在响应头中添加Access-Control-Allow-Origin字段，以允许指定的域名进行跨域访问。例如，可以设置响应头如下所示：

Access-Control-Allow-Origin: http://example.com

这样，浏览器在发送请求时会自动添加Origin字段，告知服务器请求的来源，服务器在收到请求后会检查Origin字段，并根据设置的Access-Control-Allow-Origin字段来决定是否允许跨域访问。

总结来说，Ajax跨域访问JSON数据可以通过JSONP和CORS来实现。JSONP利用<script>标签的跨域访问特性，通过在URL中添加回调函数参数来获取数据。而CORS则是一种更为现代化的解决方案，通过在服务器端设置响应头来允许跨域访问。通过这两种方式，我们可以在网页中实现跨域访问JSON数据，从而丰富页面的内容和功能。

ajax跨域访问json数据

相关阅读