ajax跨域返回json ajax实现跨域三种方法

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

Ajax是一种在网页中使用的技术，它可以通过JavaScript和XMLHttpRequest对象实现在不刷新整个页面的情况下与服务器进行数据交互。由于安全性的考虑，Ajax默认不支持跨域请求，即只能与同源的服务器进行通信。所谓同源是指协议、域名和端口号都相同。

为了实现Ajax跨域请求，我们可以采用以下三种方法：

1. JSONP（JSON with Padding）

JSONP是一种利用script标签的src属性可以跨域请求的特性来实现的方法。通过动态创建一个script标签，将请求的URL作为其src属性值，服务器返回的数据会被当作JavaScript代码执行。这样就可以在页面中获取到服务器返回的数据。

示例代码：


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

2. CORS（Cross-Origin Resource Sharing）

CORS是一种在服务器端设置响应头的方法，用于允许跨域请求。在服务器端设置Access-Control-Allow-Origin头，指定允许访问的域名，然后浏览器会根据该头信息判断是否允许跨域请求。如果服务器返回的响应头中包含Access-Control-Allow-Origin: *，则表示允许任意域名访问。

示例代码：


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

3. 代理服务器

代理服务器是一种位于客户端和服务器之间的中间服务器，它可以转发客户端的请求并获取服务器的响应，从而实现跨域请求。客户端将请求发送给代理服务器，代理服务器再将请求发送给目标服务器，并将目标服务器的响应返回给客户端。

示例代码：


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

需要注意的是，使用代理服务器需要在客户端和服务器之间进行额外的配置，而且会增加网络请求的延迟。如果可以使用JSONP或CORS的情况下，推荐使用它们来实现跨域请求。

除了上述三种方法，还有其他一些解决跨域问题的技术，例如WebSocket、postMessage等。在实际开发中，我们需要根据具体的场景和需求选择合适的跨域解决方案。

ajax跨域返回json ajax实现跨域三种方法

相关阅读