原生API向HTML输出字符串：加密货币计算器数据无法渲染到指定DIV

嘿，我一眼就看出问题出在哪啦——你踩了异步请求执行顺序的坑！

你现在的代码里，request.send(null)发起请求后，立刻就去执行var XRPUSD = request.responseText和innerHTML赋值，但XMLHttpRequest是异步的，这时候请求还在后台和服务器交互，数据根本还没返回，responseText自然是空的，页面上当然啥都显示不出来。

解决方案 #

所有需要用到API返回值的逻辑，都必须放到onreadystatechange的回调函数里，而且要确保是在请求成功（readyState === 4且status === 200）之后执行。另外，API返回的是JSON字符串，建议先解析成JavaScript对象，这样能更灵活地展示数据，而不是直接输出原始JSON。

修改后的JavaScript代码如下：

// Get the HTTP Header Request for CryptoCompare API
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
  if (request.readyState === 4) {
    if (request.status === 200) {
      document.body.className = 'ok';
      // 把API返回的JSON字符串解析为JavaScript对象
      const cryptoData = JSON.parse(request.responseText);
      // 获取页面上的目标容器
      const priceContainer = document.getElementById("pbf-main-container");
      // 自定义格式展示价格，比直接输出JSON更友好
      priceContainer.innerHTML = `<p>当前XRP价格：1 XRP = ${cryptoData.USD} USD</p>`;
      console.log(cryptoData); // 控制台查看解析后的完整数据
    } else if (!isValid(this.response) && this.status == 0) {
      document.body.className = 'error offline';
      console.log("The computer appears to be offline.");
      document.getElementById("pbf-main-container").innerHTML = "网络连接失败，请检查你的网络状态";
    } else {
      document.body.className = 'error';
      document.getElementById("pbf-main-container").innerHTML = "获取加密货币价格失败，请稍后重试";
    }
  }
};
request.open("GET", 'https://min-api.cryptocompare.com/data/price?fsym=XRP&tsyms=USD' , true);
request.send(null);

关键改动说明 #

• 把DOM渲染逻辑（innerHTML赋值）移到了请求成功的分支里，确保只有拿到有效数据后才会更新页面
• 用JSON.parse()将API返回的字符串转成对象，这样可以直接通过cryptoData.USD提取美元价格，方便自定义展示样式
• 给错误状态也添加了页面提示，提升用户体验

内容的提问来源于stack exchange，提问作者Andrew Lee