如何基于XMLHttpRequest实现社交网站帖子与对应评论的关联加载？

嘿，我来帮你搞定这个帖子和评论关联的问题！核心思路就是让每个帖子加载完成后，针对它的post_id发起评论请求，并把评论渲染到这个帖子专属的评论容器里。下面是具体的实现步骤和修改后的代码：

步骤1：修改帖子渲染函数，为每个帖子添加专属评论容器 #

首先，你的formatPostElement函数需要为每个帖子生成一个带有唯一标识的评论容器，比如用post_id作为容器的ID或自定义属性，这样我们能精准找到对应的位置放评论。

比如修改formatPostElement返回的HTML结构：

function formatPostElement(postObj) {
  // 为每个帖子生成专属的评论容器，用post_id做唯一标识
  return `
    <div class="post" data-post-id="${postObj.id}">
      <h3>${postObj.title}</h3>
      <p>${postObj.content}</p>
      <!-- 评论容器，ID包含post_id确保唯一性 -->
      <div class="comments-container" id="comments-${postObj.id}">
        <p>加载评论中...</p>
      </div>
    </div>
  `;
}

步骤2：封装可复用的评论加载函数 #

把原来的评论加载代码改成可复用的函数，支持传入post_id和对应的评论容器元素，这样就能精准把评论渲染到目标位置：

function loadComments(postId, commentsContainer) {
  const xhr = new XMLHttpRequest();
  const method = 'GET';
  const responseType = 'json';
  const url = `/comments/${postId}`;
  
  xhr.responseType = responseType;
  xhr.open(method, url);
  
  // 修复原代码的错误：xhr.load 应该是 xhr.onload！
  xhr.onload = function() {
    if (xhr.status === 200) {
      const commentItems = xhr.response;
      let commentsHtml = '';
      // 给评论加上基础HTML结构，避免纯文本堆砌
      commentItems.forEach(comment => {
        commentsHtml += `<div class="comment"><p>${comment.content}</p></div>`;
      });
      commentsContainer.innerHTML = commentsHtml;
    } else {
      commentsContainer.innerHTML = '<p>加载评论失败</p>';
    }
  };
  
  // 处理网络错误情况
  xhr.onerror = function() {
    commentsContainer.innerHTML = '<p>网络错误，无法加载评论</p>';
  };
  
  xhr.send();
}

步骤3：在帖子加载完成后，触发对应评论的请求 #

修改帖子加载的onload函数，在渲染完所有帖子后，遍历每个帖子元素，提取它的post_id，找到对应的评论容器，然后调用评论加载函数：

const xhr = new XMLHttpRequest();
const method = 'GET';
const responseType = 'json';
const url = '/posts';
xhr.responseType = responseType;
xhr.open(method, url);

xhr.onload = function() {
  if (xhr.status === 200) {
    const serverResponse = xhr.response;
    let finalPostStr = '';
    serverResponse.forEach(postObj => {
      finalPostStr += formatPostElement(postObj);
    });
    postsElement.innerHTML = finalPostStr;
    
    // 帖子渲染完成后，逐个加载对应评论
    const allPosts = document.querySelectorAll('.post');
    allPosts.forEach(postElement => {
      const postId = postElement.dataset.postId; // 从自定义属性获取post_id
      const commentsContainer = document.getElementById(`comments-${postId}`);
      if (commentsContainer) {
        loadComments(postId, commentsContainer);
      }
    });
  } else {
    postsElement.innerHTML = '<p>加载帖子失败</p>';
  }
};

// 处理帖子加载的网络错误
xhr.onerror = function() {
  postsElement.innerHTML = '<p>网络错误，无法加载帖子</p>';
};

xhr.send();

额外优化小建议 #

• 如果帖子数量较多，可以考虑给评论请求加节流，或者实现分页加载评论，避免同时发起过多请求给服务器造成压力。
• 可以在评论请求发起时显示“加载中”状态，请求完成后再替换成评论内容，提升用户体验。
• 若项目没有强制要求，建议用fetch API代替XMLHttpRequest，语法更简洁，支持Promise，代码可读性更高。

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