JS新手求助：如何用纯JavaScript解析外部URL的JSON？

嘿，作为JavaScript新手能想到用XMLHttpRequest来请求JSON已经很棒啦！我来帮你补全代码并优化一下，同时给你介绍更现代的实现方式～

一、补全你现有的XMLHttpRequest方案 #

你写的getJSON工具函数是可行的，我帮你补全未完成的statsget函数，并加上关键的细节：

var getJSON = function(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  // 别忘了处理网络层面的错误（比如断网）
  xhr.onerror = function() {
    callback('网络请求失败', null);
  };
  xhr.send();
};

function statsget() {
  var uname = document.getElementById("nameget").value;
  // 替换成你实际要请求的外部API地址，注意转义用户输入
  var targetUrl = `https://your-target-api.com/data?username=${encodeURIComponent(uname)}`;
  
  getJSON(targetUrl, function(error, data) {
    if (error) {
      console.error('请求出错:', error);
      alert('获取数据失败，请检查输入或稍后重试');
      return;
    }
    // 这里已经是解析好的JSON对象了，直接使用即可
    console.log('解析后的JSON数据:', data);
    // 示例：把数据格式化展示到页面上
    document.getElementById("result-container").textContent = JSON.stringify(data, null, 2);
  });
}

关键注意点： #

• encodeURIComponent(uname)：必须对用户输入的参数进行URL转义，避免URL格式错误，同时防范XSS攻击风险。
• 错误处理：新增了xhr.onerror处理网络层面的错误（比如断网），让你的代码更健壮。
• 跨域问题：如果目标API和你的页面域名不同，需要目标服务器开启CORS（设置Access-Control-Allow-Origin响应头），否则浏览器会拦截请求。

二、更现代的Fetch API方案 #

现在更推荐使用fetch API，它基于Promise，代码更简洁易读，配合async/await可以写出同步风格的异步代码：

async function statsget() {
  var uname = document.getElementById("nameget").value;
  var targetUrl = `https://your-target-api.com/data?username=${encodeURIComponent(uname)}`;
  
  try {
    const response = await fetch(targetUrl);
    // 检查请求是否成功（状态码200-299）
    if (!response.ok) {
      throw new Error(`请求失败，状态码: ${response.status}`);
    }
    // 自动解析JSON响应
    const data = await response.json();
    console.log('解析后的JSON数据:', data);
    // 示例：展示数据到页面
    document.getElementById("result-container").textContent = JSON.stringify(data, null, 2);
  } catch (error) {
    console.error('出错了:', error);
    alert('获取数据失败，请检查输入或稍后重试');
  }
}

Fetch的优势： #

• 语法更简洁，无需手动创建XHR对象。
• 用try/catch统一处理所有错误（网络错误、HTTP错误）。
• 支持Promise链式调用，也支持async/await，代码逻辑更清晰。

内容的提问来源于stack exchange，提问作者Tech Hax