JavaScript跨域请求技巧——XMLHttpRequest实现

1. 什么是跨域请求

在Web开发中，跨域请求指的是通过JavaScript发起的一个HTTP请求，该请求的目标地址和当前页面的地址不在同一个域下。

在同源策略的限制下，JavaScript只能向同一域名下的资源发起请求，而无法直接请求其他域名下的资源。

跨域请求在日常的Web开发中非常常见，比如在前端开发中，我们可能需要从不同的域名获取数据，或者发送数据到不同的域名。这时候，我们就需要通过一些技巧来实现跨域请求。

2. 同源策略

为了保护用户的隐私和安全，浏览器采用了同源策略。同源策略要求：协议、域名、端口号必须完全相同，否则就会被认为是跨域请求。

同源策略对于一些非常规的场景（如API调用、数据获取）限制较多，所以我们需要通过一些技巧来实现跨域请求。

3. XMLHttpRequest跨域请求实现的基本原理

XMLHttpRequest是JavaScript中常用的发起HTTP请求的对象，我们可以通过它实现跨域请求。

实现XMLHttpRequest的跨域请求主要有两种方法：CORS和JSONP。

3.1 CORS实现跨域请求

CORS（Cross-Origin Resource Sharing）是一种跨域请求的解决方案，在服务器端进行配置即可。

CORS的原理非常简单，当浏览器发现请求的目标地址与当前页面的地址不一致时，会发送一个OPTIONS请求到目标地址，询问服务器是否允许跨域请求。如果服务器允许跨域请求，就会在响应头中添加一些特殊的字段，告知浏览器可以进行跨域操作。

要使用CORS实现跨域请求，只需要在目标服务器的响应头中添加以下字段：

Access-Control-Allow-Origin: 允许的域名或通配符
Access-Control-Allow-Methods: 允许的HTTP方法
Access-Control-Allow-Headers: 允许的请求头字段

例如，目标服务器可以在响应头中添加以下字段，允许所有的域名发起跨域请求：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

这样，浏览器就会在发送跨域请求时，自动带上Origin字段，询问服务器是否允许跨域。如果服务器的响应头中包含了合法的字段，浏览器就会继续发送真实的请求。

值得注意的是，CORS只适用于现代浏览器，对于IE浏览器需要另外处理。

3.2 JSONP实现跨域请求

JSONP（JSON with Padding）是另一种跨域请求的解决方案，它利用了<script>标签不受同源策略限制的特点。

JSONP的原理非常简单，通过动态创建一个<script>标签，设置其src属性为目标地址，并且在URL中携带一个回调函数的参数，然后服务器根据该参数返回一个可执行的JavaScript代码。当该<script>标签加载完成后，浏览器会执行该JavaScript代码，从而实现跨域请求的数据获取。

使用JSONP实现跨域请求的关键在于服务端需要返回一个可执行的JavaScript代码。下面是一个简单的示例代码：

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url + '?callback=' + callback;
  document.body.appendChild(script);
}

function handleResponse(data) {
  console.log(data);
}

jsonp('http://api.example.com/data', 'handleResponse');

在上面的代码中，jsonp函数实现了动态创建<script>标签，将目标地址和回调函数传递作为参数。服务器根据请求参数返回一个可执行的JavaScript代码，该代码会调用传入的回调函数并传递数据作为参数。

4. 跨域请求实战案例

下面通过一个实战案例来演示如何使用XMLHttpRequest实现跨域请求。

4.1 服务器端设置

首先，我们需要在服务器端进行设置，允许跨域请求。

对于CORS，可以在服务器响应头中添加以下字段：

Access-Control-Allow-Origin: 允许的域名或通配符
Access-Control-Allow-Methods: 允许的HTTP方法
Access-Control-Allow-Headers: 允许的请求头字段

对于JSONP，需要根据请求参数返回一个可执行的JavaScript代码。

根据实际的开发场景，选择合适的跨域请求方式。

4.2 客户端使用XMLHttpRequest实现跨域请求

在客户端，我们可以使用XMLHttpRequest对象实现跨域请求。

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

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

在上面的代码中，我们创建一个XMLHttpRequest对象，并调用open方法设置请求的目标地址。然后，通过onreadystatechange事件监听请求状态的变化，当状态变为4（已完成）并且状态码为200（成功响应）时，我们可以获取到服务器返回的数据，并进行相应的处理。