在 Ajax 之后加载 JS

在现代 Web 开发中，AJAX 技术已成为常用技术之一。通过 AJAX 技术，我们可以异步加载服务器返回的数据，从而提高 Web 应用的性能和用户体验。然而，在使用 AJAX 技术时，很多开发者也经常面临一个问题，那就是：如何在 AJAX 加载完数据后，再加载一些需要的 JavaScript 代码？

在这篇文章中，我们将讨论如何在 AJAX 请求完成后，加载我们需要的 JS 代码。

解决方案

一般来说，有两种方式可以在 AJAX 请求完成后，加载我们需要的 JS 代码，分别是：

1. 直接将 JS 代码作为 AJAX 请求的响应体返回，并在 AJAX 请求完成时解析和执行该代码。
2. 在 AJAX 请求成功后，通过动态创建 <script> 标签，将需要的 JS 代码加载进来。

方式一：在 AJAX 响应中返回 JS 代码

首先，如果你希望在 AJAX 请求完成后，立即加载一些 JS 代码，你可以在服务器端直接将这些代码作为 AJAX 请求的响应体返回，例如：

// 客户端发送 AJAX 请求
$.ajax({
  url: '/my-ajax-handler',
  success: function(jsCode) {
    // 在 AJAX 响应中返回 JS 代码
    eval(jsCode); // 解析并执行 JS 代码
  }
});

这里，我们在 AJAX 请求成功后，调用了 eval 函数，直接解析执行了从服务器端返回的 JS 代码。虽然这是一种可行的方案，但是这种方式有许多安全上的问题，建议你不要使用。

方式二：动态创建 <script> 标签加载 JS 代码

另外一种方式是，在 AJAX 请求完成后，通过动态创建 <script> 标签，将需要的 JS 代码加载进来。这种方式比方式一更加安全，也更易于维护。

$.ajax({
  url: '/my-ajax-handler',
  success: function(jsUrl) {
    // 1. 动态创建 <script> 标签
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 2. 设置 <script> 标签的 src 属性
    script.src = jsUrl;

    // 3. 加载 <script> 标签
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
  }
});

这里，我们使用了动态创建 <script> 标签的方式，在 AJAX 请求完成后，将需要的 JS 代码加载进来。

需要注意的是，在动态创建 <script> 标签时，我们必须将 type 属性设置为 text/javascript，否则有些浏览器可能无法正确加载 JS 代码。

总结

以上就是在 AJAX 请求完成后，加载 JS 代码的两种方式。不同的应用场景，可能会有不同的选择。你可以根据自己的需要，选择一种合适的方案。

代码片段：

$.ajax({
  url: '/my-ajax-handler',
  success: function(jsUrl) {
    // 1. 动态创建 <script> 标签
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 2. 设置 <script> 标签的 src 属性
    script.src = jsUrl;

    // 3. 加载 <script> 标签
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
  }
});