ajax简答跨域—示例代码

Ajax是一种在网页中实现异步通信的技术，它可以在不刷新整个页面的情况下，通过与服务器进行数据交互，实现局部页面的更新。由于浏览器的同源策略限制，Ajax默认只能与同一域名下的接口进行通信，无法直接与其他域名下的接口进行通信，这就是所谓的跨域问题。

为了解决跨域问题，可以通过设置服务器端的响应头来允许跨域访问。常用的方式是在服务器端设置Access-Control-Allow-Origin头部字段，允许指定的域名进行跨域访问。

例如，假设我们的网页部署在www.example.com域名下，而需要访问的接口位于api.example.com域名下，我们可以在服务器端设置Access-Control-Allow-Origin头部字段为www.example.com，以允许跨域访问。

以下是一个示例代码，展示了如何通过设置Access-Control-Allow-Origin头部字段来解决跨域问题：

// 发起跨域请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 处理响应数据
    console.log(response);
  }
};
xhr.send();
// 服务器端设置Access-Control-Allow-Origin头部字段
response.setHeader('Access-Control-Allow-Origin', 'http://www.example.com');

在上述代码中，我们使用XMLHttpRequest对象发起了一个GET请求，请求地址为http://api.example.com/data。在服务器端，我们通过response.setHeader方法设置了Access-Control-Allow-Origin头部字段为http://www.example.com，以允许来自www.example.com域名的跨域访问。

通过这种方式，我们可以在网页中使用Ajax技术与其他域名下的接口进行通信，实现数据的异步交互和局部页面的更新。