ajax跨域调用接口返回json

Ajax是一种在网页上进行异步通信的技术，它能够通过JavaScript在不刷新整个页面的情况下，向服务器发送请求并获取响应。由于浏览器的同源策略限制，Ajax默认只能与同一域名下的接口进行通信。如果需要与不同域名下的接口进行通信，就需要进行跨域调用。

跨域调用接口返回JSON的常用方法是通过JSONP（JSON with Padding）技术。JSONP利用了<script>标签可以跨域引用外部资源的特性，它通过动态创建<script>标签，将接口的URL作为<script>标签的src属性值，服务器返回的JSON数据被包裹在一个函数调用中，以便在客户端接收到响应后进行处理。

下面是一个使用Ajax进行跨域调用接口返回JSON的示例代码：

function handleResponse(response) {
  // 处理接口返回的JSON数据
  console.log(response);
}
function makeRequest(url) {
  // 创建一个<script>标签
  var script = document.createElement('script');
  // 设置<script>标签的src属性为接口的URL，并指定回调函数名为handleResponse
  script.src = url + '?callback=handleResponse';
  // 将<script>标签添加到页面中
  document.body.appendChild(script);
}
// 调用接口
makeRequest('http://api.example.com/data');

在上述示例代码中，我们首先定义了一个名为handleResponse的回调函数，用于处理接口返回的JSON数据。然后，我们定义了一个名为makeRequest的函数，用于创建<script>标签并设置其src属性为接口的URL。在设置src属性时，我们通过在URL中添加callback参数，并指定其值为handleResponse，以告诉服务器将返回的JSON数据包裹在handleResponse函数调用中。我们调用makeRequest函数，传入接口的URL进行跨域调用。

需要注意的是，JSONP只支持GET请求，因为<script>标签只能通过GET方式加载外部资源。为了确保回调函数的唯一性，通常会使用随机生成的函数名作为回调函数的名称。

除了JSONP，还有其他跨域通信的方法，如CORS（跨域资源共享）和代理服务器等。CORS是一种在服务器端设置的机制，通过在服务器的响应头中添加特定的字段，允许浏览器跨域访问接口。而代理服务器则是在客户端与接口之间增加一个中间层，将客户端的请求转发到接口，再将接口的响应返回给客户端，从而绕过浏览器的同源策略限制。

总结一下，Ajax跨域调用接口返回JSON的常用方法是通过JSONP技术，在客户端动态创建<script>标签，将接口的URL作为<script>标签的src属性值，并指定回调函数名，服务器返回的JSON数据被包裹在回调函数调用中。除了JSONP，还有其他跨域通信的方法，如CORS和代理服务器。这些方法使得我们能够在网页中与不同域名下的接口进行数据交互，为开发者提供了更多的选择和灵活性。