如何解决XMLHttpRequest调用时页面高频自动刷新无法停止的问题

根本原因 #

该高频自动刷新问题由VSCode的OpenWithLiveServer插件触发，和你编写的XMLHttpRequest逻辑无关：
Live Server默认会监听当前工作区所有文件的变动，只要检测到文件更新就会自动重载页面。而运行中的Rails项目会持续生成日志、临时文件，如果你将前端的index.html、application.js和Rails后端项目放在同一个工作目录打开，插件会持续捕获到文件变更，反复触发页面刷新，同时重复发起接口请求。

解决步骤 #

• 方案1（推荐）：将两个前端文件单独存放到一个独立的文件夹中，不要和Rails后端项目放在同一个工作区，再用Live Server打开该独立文件夹下的HTML文件即可。
• 方案2：修改Live Server的忽略规则，过滤掉后端相关的文件变动：
  1. 打开VSCode设置页，搜索Live Server > Settings: Ignore Files
  2. 在忽略列表中添加如下规则：

     **/*.log
     **/tmp/**
     **/vendor/**
     **/.git/**
     

• 方案3（验证用）：直接双击本地的index.html文件用浏览器打开，不通过Live Server启动，若页面不再刷新即可确认是Live Server导致的问题。

你当前的XMLHttpRequest代码逻辑没有问题，回调函数为空不会触发重复请求，后续需要渲染接口返回的todo数据时，直接在if (this.readyState == 4 && this.status == 200)代码块中编写DOM更新逻辑即可。

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