ajax json跨域

Ajax是一种无刷新的网页交互技术，它可以实现页面与服务端的数据交互，提高用户在网站上的体验，使网页更加具有交互性。而Json是一种轻量级的数据交换格式，它比XML更加简洁易读。然而，在使用Ajax和Json进行跨域请求时，会遇到一些问题。因为浏览器有同源策略，只允许相同协议、域名和端口号的内容进行交互。

为了绕过这个限制，可以使用JSONP（JSON with Padding）或者CORS（Cross-Origin Resource Sharing）这两种跨域解决方案。其中，JSONP利用script标签加载数据，实现跨域访问；CORS则通过后端设置响应头，允许客户端访问其他域名下的资源。

//JsonP示例
function jsonp(url,callback) {
  let script = document.createElement('script')
  script.type = 'text/javascript'
  script.src = url + '&callback=' + callback
  document.head.appendChild(script)
}

//使用JsonP进行跨域请求
jsonp('https://api.example.com/data','handleData')

//在页面中编写回调函数
function handleData(data) {
  console.log(data)
}

在JsonP中，需要在目标接口返回的数据中添加回调函数，这样我们才能在页面中利用回调函数来处理接口返回的数据。这里需要注意的是，由于JsonP在请求数据时使用的是script标签，所以在页面中定义回调函数时使用的是全局函数。如果有多个JsonP请求同时进行，需要避免不同请求中的回调函数重名。

//CORS示例
const xhr = new XMLHttpRequest()
xhr.open('GET','https://api.example.com/data',true)
xhr.withCredentials = true
xhr.onload = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText)
    console.log(data)
  }
}
xhr.send()

//服务端设置响应头
res.setHeader('Access-Control-Allow-Origin','http://localhost:3000');
res.setHeader('Access-Control-Allow-Credentials',true);

使用CORS进行跨域请求时，需要在服务端设置响应头，允许客户端访问其他域名下的资源。在客户端中发送请求时，需要将withCredentials属性设置为true，以便发送cookie等认证信息。