原生JavaScript使用XMLHttpRequest发送GET/POST请求及解决跨域问题

原生JavaScript的XMLHttpRequest对象是实现异步通信的一种方式，可以发送HTTP请求。它提供了简单的方法来获取或发送数据，而不需要重新加载整个页面。下面是如何使用XMLHttpRequest发送GET和POST请求，以及如何解决跨域问题。
GET请求
GET请求用于从服务器请求数据。使用XMLHttpRequest发送GET请求的步骤如下：

1. 创建一个新的XMLHttpRequest对象：

   var xhr = new XMLHttpRequest();

2. 打开一个新的请求：

   xhr.open('GET', 'http://example.com/api/data', true);

   这里，’GET’是请求方法，’http://example.com/api/data’是请求的URL，第三个参数指定请求为异步。
3. 设置请求完成时的回调函数：

   xhr.onreadystatechange = function() {
   if (xhr.readyState === 4 && xhr.status === 200) {
   console.log(xhr.responseText);
   }
   };

   这里，当readyState变为4（请求完成）并且status为200（请求成功）时，说明请求已成功完成，可以在控制台输出响应文本。
4. 发送请求：

   xhr.send();

   POST请求
   POST请求用于向服务器发送数据。使用XMLHttpRequest发送POST请求的步骤如下：
5. 创建一个新的XMLHttpRequest对象：

   var xhr = new XMLHttpRequest();

6. 打开一个新的请求：

   xhr.open('POST', 'http://example.com/api/data', true);

   这里，’POST’是请求方法，’http://example.com/api/data’是请求的URL，第三个参数指定请求为异步。
7. 设置要发送的数据：

   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   xhr.send('key1=value1&key2=value2');

   这里，setRequestHeader方法设置了要发送数据的类型，send方法发送了实际的数据。数据可以是表单编码的字符串，也可以是JSON字符串。
8. 设置请求完成时的回调函数：

   xhr.onreadystatechange = function() {
   if (xhr.readyState === 4 && xhr.status === 200) {
   console.log(xhr.responseText);
   }
   };

   这里，当readyState变为4（请求完成）并且status为200（请求成功）时，说明请求已成功完成，可以在控制台输出响应文本。
   解决跨域问题
   浏览器同源策略限制了XMLHttpRequest不能跨域请求资源。为了解决这个问题，服务器端需要设置适当的CORS（跨源资源共享）策略。具体来说，服务器需要在响应头中包含一个’Access-Control-Allow-Origin’字段，指定允许的源。例如：

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

   这样，来自’[http://example.com'的页面就可以通过XMLHttpRequest进行跨域请求了。](http://example.com'%E7%9A%84%E9%A1%B5%E9%9D%A2%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87XMLHttpRequest%E8%BF%9B%E8%A1%8C%E8%B7%A8%