ajax跨域请求json

Ajax是一种在网页中进行异步数据交互的技术，它可以通过JavaScript向服务器发送请求并获取数据，而无需刷新整个页面。由于浏览器的同源策略限制，Ajax请求默认只能与同源（协议、域名、端口号相同）的服务器进行通信，这就导致了跨域请求的问题。

为了解决跨域请求的问题，可以使用JSONP（JSON with Padding）或CORS（Cross-Origin Resource Sharing）技术。其中，JSONP是一种利用<script>元素的src属性可以跨域的特性来实现跨域请求的方法，而CORS则是在服务器端进行设置，允许特定的跨域请求。

我们来看一下JSONP的实现方式。JSONP通过在请求URL中添加一个回调函数的参数，服务器在返回数据时会将数据作为参数传递给该回调函数，从而实现跨域请求。

示例代码如下所示：

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

在上面的示例代码中，我们定义了一个名为handleResponse的回调函数，该函数用于处理服务器返回的数据。然后，我们通过动态创建一个<script>元素，并将请求URL设置为http://api.example.com/data?callback=handleResponse，其中callback参数指定了回调函数的名称。将该<script>元素添加到页面中，浏览器会自动发送请求并执行回调函数。

需要注意的是，服务器端需要根据callback参数的值，将返回数据包装在该回调函数中。例如，服务器返回的数据可能是以下形式：

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

这样，浏览器在接收到数据后，会自动执行handleResponse函数，并将返回的数据作为参数传递给该函数。

接下来，我们来看一下CORS的实现方式。CORS是一种通过在服务器端设置响应头来允许特定跨域请求的方法。

示例代码如下所示：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.withCredentials = true;  // 允许发送跨域请求时携带cookie
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理返回的数据
    console.log(xhr.responseText);
  }
};
xhr.send();

在上面的示例代码中，我们使用XMLHttpRequest对象发送一个GET请求到http://api.example.com/data。需要注意的是，为了允许发送跨域请求时携带cookie，我们将xhr.withCredentials属性设置为true。在请求发送完成后，通过xhr.responseText获取服务器返回的数据。

为了使服务器允许该跨域请求，服务器需要在响应头中设置Access-Control-Allow-Origin字段，该字段指定了允许访问的域名。例如，服务器可以设置以下响应头：

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

这样，浏览器在接收到响应时，会检查该字段的值是否与请求的域名匹配，如果匹配则允许访问，否则拒绝访问。

需要注意的是，对于使用CORS进行跨域请求，服务器需要进行相应的配置，以确保安全性。例如，可以设置Access-Control-Allow-Methods字段来指定允许的请求方法，设置Access-Control-Allow-Headers字段来指定允许的请求头，还可以设置Access-Control-Allow-Credentials字段来指定是否允许发送跨域请求时携带cookie等。

总结一下，Ajax跨域请求JSON可以通过JSONP或CORS来实现。JSONP利用<script>元素的src属性可以跨域的特性，通过回调函数来处理服务器返回的数据；而CORS则是在服务器端进行设置，允许特定的跨域请求。无论是使用JSONP还是CORS，都需要服务器的支持和配置，以确保跨域请求的安全性和正确性。