ajax跨域发送json跨域_ajax 跨域

Ajax跨域发送JSON是指在网页中通过Ajax技术向不同域名的服务器发送JSON数据。由于浏览器的同源策略限制，普通的Ajax请求不能跨域发送数据，但可以通过一些方法实现跨域请求。

一种常用的跨域请求方法是JSONP（JSON with Padding），它通过动态创建`<script>`标签实现跨域请求，并利用回调函数将服务器返回的JSON数据传递给前端页面。JSONP的原理是将要发送的数据作为查询参数拼接到目标URL中，服务器端将数据包装在回调函数中返回，前端页面通过回调函数获取数据。

下面是一个使用JSONP实现跨域请求的示例代码：

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

在上述代码中，`handleResponse`函数用于处理服务器返回的数据。`sendRequest`函数创建一个`<script>`标签，并设置其`src`属性为目标URL，其中包含一个`callback`参数，值为`handleResponse`函数名。当`<script>`标签加载完成后，服务器会返回一个包含JSON数据的回调函数调用，前端页面就可以通过`handleResponse`函数获取数据。

另一种常用的跨域请求方法是CORS（Cross-Origin Resource Sharing），它通过在服务器端设置响应头来实现跨域请求。CORS允许服务器在响应中添加一个`Access-Control-Allow-Origin`头，指定允许访问的域名，从而允许跨域请求。

下面是一个使用CORS实现跨域请求的示例代码：

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

在上述代码中，`sendRequest`函数创建一个XMLHttpRequest对象，使用`open`方法指定请求的方法和URL。通过`setRequestHeader`方法设置请求头，将请求的数据类型设置为JSON。然后通过`onreadystatechange`事件监听请求的状态变化，当请求成功完成时，通过`responseText`获取服务器返回的JSON数据，并进行处理。

需要注意的是，使用CORS跨域请求时，服务器必须设置相应的响应头，如下所示：

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

其中，`Access-Control-Allow-Origin`指定允许访问的域名，`Access-Control-Allow-Methods`指定允许的请求方法，`Access-Control-Allow-Headers`指定允许的请求头。

除了JSONP和CORS，还有其他一些跨域请求方法，如使用代理服务器、使用iframe、使用WebSocket等。不同的方法适用于不同的场景，可以根据具体需求选择合适的方法来实现跨域请求。