仅用回调函数能否在JavaScript中获取数据？Promise与Fetch出现前如何跨域取数？

仅通过回调函数是否能在JavaScript中获取数据？ #

当然可以。在Promise、async/await这类异步语法出现前，JavaScript的异步操作几乎全靠回调函数来处理数据返回。

比如早期用XMLHttpRequest发起请求时，就是通过指定回调函数来获取数据：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
// 请求成功时的回调
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log('获取到的数据:', data);
  }
};
// 请求失败时的回调
xhr.onerror = function() {
  console.error('请求出错了');
};
xhr.send();

这里的onload和onerror都是回调函数，当请求完成（成功或失败）时，浏览器会自动调用这些函数，我们就能在回调里拿到数据或者处理错误。

不止网络请求，像定时器setTimeout、DOM事件监听（比如button.onclick）这类异步操作，本质上都是用回调来传递结果或触发逻辑的。

在Promise和Fetch出现之前，人们是如何从其他网站获取数据的？ #

受浏览器同源策略限制，直接用XMLHttpRequest请求其他域名的接口会被拦截，那时候主要靠这些方式解决跨域数据获取：

1. JSONP（JSON with Padding） #

利用<script>标签不受同源策略限制的特性，动态创建script标签指向目标网站的接口，接口会返回一个预先约定好的函数调用，把数据作为参数传入。

示例代码：

// 预先定义好处理数据的回调函数
function processJsonpData(data) {
  console.log('跨域获取到的数据:', data);
}

// 创建script标签
const script = document.createElement('script');
// 接口地址加上callback参数，指定回调函数名
script.src = 'https://other-domain.com/api?callback=processJsonpData';
document.body.appendChild(script);

后端需要配合，返回类似processJsonpData({"name": "example", "value": 123})这样的内容，浏览器加载script标签后就会自动执行这个函数，我们就能拿到数据。

2. 服务器代理 #

前端先请求自己的后端服务器，由后端服务器去请求目标网站的接口（服务器之间没有同源策略限制），然后后端把拿到的数据返回给前端。这种方式不需要目标网站配合，兼容性也很好。

3. iframe + postMessage（HTML5时期出现，早于Fetch） #

通过iframe加载目标网站的页面，然后利用postMessage API在两个页面之间传递数据。不过这种方式需要目标网站的页面主动发送数据，或者双方提前约定好通信规则，实用性不如前两种。

另外，普通的同域请求，当时就是直接用XMLHttpRequest配合回调来处理的。

内容的提问来源于stack exchange，提问作者Romi Tsimerman