使用jQuery发起AJAX请求出现Synchronous XMLHttpRequest废弃警告如何解决

该警告提示代码触发了主线程同步XMLHttpRequest请求，该操作会阻塞页面渲染，影响用户体验已被弃用。你自行编写的jQuery Ajax请求默认是异步的，问题来自你额外引入的include-html.min.js，该封装库的嵌入逻辑使用了同步请求配置，且和你自己写的内嵌功能逻辑重复冲突。另外你的主HTML末尾存在多余的</script>闭合标签，属于语法错误。

• 第一步：删除主HTML中冗余的include-html.min.js引入和多余的script闭合标签，修正后的底部引入代码如下：

<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>

• 第二步：优化自定义内嵌逻辑，显式指定异步参数，同时提取子HTML的body内容嵌入，避免重复的html、head标签导致页面结构冲突，优化后的代码如下：

$(function() {
  $("*[include-html]").each(function() {
    var targetUrl = $(this).attr("include-html"),
      targetId = this.id;
      
    jQuery.ajax({
      url: targetUrl,
      async: true, // 显式指定异步请求，避免版本差异导致的默认值异常
      success: function(res) {
        // 仅提取子HTML中body内的有效内容嵌入
        const bodyContent = res.match(/<body[^>]*>([\s\S]*)<\/body>/i)[1];
        $("#" + targetId).html(bodyContent);
      },
      error: function(n, c, i) {
        var s = n.status + ": " + n.statusText;
        $("#" + targetId).html(targetUrl + "-" + s);
      }
    })
  })
});

• 第三步：优化子HTML代码，删除和主HTML重复的样式、meta引入，同时修改重复ID（主HTML占位标签ID为todo-app，子HTML的容器ID修改为todo-app-inner即可），避免ID冲突导致功能异常。

如果是本地直接打开HTML文件测试，浏览器跨域安全规则会拦截本地文件请求，建议使用本地静态服务（如VSCode的Live Server插件）启动测试。

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