类似谷歌实时AJAX搜索功能中异步AJAX加载含脚本响应的问题解析及最佳实践咨询

为什么直接插script标签会报错？ #

当你用异步AJAX把带<script src="js/script2.js">的HTML塞进DOM时，浏览器会异步去加载这个脚本——简单说就是，浏览器不等script2.js下载完、执行完，就会立刻跑后面的$('preview-div').my_plugin();。这时候jQuery的原型上还没注册my_plugin这个方法，自然就会报“插件不存在”的错。

而同步AJAX之所以能正常运行，是因为它会阻塞浏览器主线程，整个页面都会卡住，直到AJAX请求完成、响应插入DOM，浏览器有足够时间加载并执行完script2.js，再执行插件调用。但同步AJAX的体验极差，页面会僵住，绝对不能在生产环境用！

为什么$.getScript就没问题？ #

$.getScript()是jQuery专门为异步加载脚本设计的方法，它的核心逻辑很清晰：

• 悄悄发起异步请求下载脚本文件
• 等脚本100%下载完成并执行完毕后，才会调用你传入的回调函数
  所以在回调里调用my_plugin()时，插件已经妥妥注册到jQuery上了，自然不会出错。

三种调用方式的核心差异，我给你列成表格一目了然： #

加载带自定义JS的异步内容，最佳实践看这里！ #

按推荐程度给你列几个靠谱方案：

1. 提前加载所有需要的插件（最省心） #

如果这个插件是全局常用的（比如搜索功能会频繁触发），直接在页面初始化的时候就把script2.js加载好，别等到AJAX请求的时候才加载：

<!-- 放在页面底部或者<head>里都行 -->
<script type="text/javascript" src="js/script2.js"></script>

这样后续不管多少次异步请求，都能直接调用插件，完全不用再操心脚本加载的问题，还能避免重复下载脚本。

2. 用$.getScript确保脚本加载完再执行（按需加载首选） #

如果插件体积很大，只有用到搜索功能时才需要，那就用$.getScript()的方式，确保回调在脚本加载完成后执行：

$.ajax({
    type: 'GET',
    url: 'my_url/search.php',
}).done(function(response) {
    $('#response-div').empty().append(response);
    // 先加载脚本，再初始化插件
    $.getScript('js/script2.js', function() {
        $('#preview-div').my_plugin(); // 对了，你原来的代码少了#选择器！这里要注意
    });
}).fail(function() {
    // 别忘了处理错误情况，比如提示用户搜索失败
});

另外可以加个判断，避免重复加载脚本：

if (!$.fn.my_plugin) { // 判断插件是否已经注册
    $.getScript('js/script2.js', function() {
        $('#preview-div').my_plugin();
    });
} else {
    $('#preview-div').my_plugin();
}

3. 原生JS监听脚本onload事件（不用jQuery的话） #

如果你的项目不想依赖jQuery，用原生JS也能实现同样的效果：

$.ajax({
    type: 'GET',
    url: 'my_url/search.php',
}).done(function(response) {
    $('#response-div').empty().append(response);
    
    const script = document.createElement('script');
    script.src = 'js/script2.js';
    script.onload = function() {
        document.getElementById('preview-div').my_plugin();
    };
    document.body.appendChild(script);
}).fail(function() {
    // 错误处理
});

原理和$.getScript()一样，都是等脚本加载完成后再执行初始化。

4. ES6动态import（现代项目推荐） #

如果你的项目用了ES6模块或者打包工具（比如Webpack、Vite），可以用动态import来加载脚本，这是现代浏览器的标准方式：

$.ajax({
    type: 'GET',
    url: 'my_url/search.php',
}).done(function(response) {
    $('#response-div').empty().append(response);
    
    import('./js/script2.js').then(() => {
        $('#preview-div').my_plugin();
    }).catch(err => {
        console.error('脚本加载失败:', err);
    });
}).fail(function() {
    // 错误处理
});

不过这种方式需要你的脚本是ES模块，或者配置打包工具来处理。

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