动态创建script标签实现跨域资源访问的方法介绍-Java开发

动态创建script标签实现跨域资源访问是一种常见的前端技巧，可以用于向其他域名的服务器请求数据。以下是实现该方法的具体步骤：

动态创建script标签实现跨域资源访问是一种常见的前端技巧，可以用于向其他域名的服务器请求数据。以下是实现该方法的具体步骤：

1. 创建一个 `script` 标签

在 HTML 中动态添加一个 script 标签，并设置其中的 src 属性为需要访问的资源的 URL。例如：

<script src="http://example.com/data.js"></script>

2. 创建一个回调函数

当该资源被加载完成后，网页会自动执行该资源中包含的 JavaScript 代码。而我们通常会在该代码中调用回调函数，将获取的数据传递给该函数，并在该函数中对数据做进一步处理。例如：

<script src="http://example.com/data.js"></script>
<script>
function handleData(data) {
  // 处理接收到的数据
}
</script>

3. 跨域问题

使用动态创建 script 标签请求外部数据时，会遇到跨域问题，因为浏览器会禁止跨域操作。为了解决该问题，可以在资源 URL 末尾添加一个回调函数名，服务器会将数据作为参数传递给该回调函数。例如：

<script src="http://example.com/data.js?callback=handleData"></script>
<script>
function handleData(data) {
  // 处理接收到的数据
}
</script>

服务器返回的 JavaScript 代码将会包含一个调用 handleData 函数的语句，例如：

handleData({ foo: 'bar' });

示例一

以下实例演示了动态创建 script 标签请求 GitHub API 并在回调函数中处理接收到的数据：

<!DOCTYPE html>
<html>
  <head>
    <title>GitHub API Example</title>
  </head>
  <body>
    <script>
      function handleData(data) {
        console.log('Repositories:', data);
        // 处理接收到的数据
      }

      const script = document.createElement('script');
      script.src = 'https://api.github.com/orgs/github/repos?callback=handleData';
      document.body.appendChild(script);
    </script>
  </body>
</html>

示例二

以下实例演示了使用 jQuery 实现动态创建 script 标签请求百度翻译 API 并在回调函数中处理接收到的数据：

<!DOCTYPE html>
<html>
  <head>
    <title>Baidu Translate API Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <script>
      function handleData(data) {
        console.log('Translation:', data.trans_result[0].dst);
        // 处理接收到的数据
      }

      $.ajax({
        url: 'https://fanyi.baidu.com/transapi?from=auto&to=en&query=你好',
        dataType: 'jsonp',
        jsonp: 'callback',
        success: handleData,
      });
    </script>
  </body>
</html>

以上是动态创建 script 标签实现跨域资源访问的方法介绍及示例说明。需要注意的是，该方法虽然可以解决跨域问题，但也存在一些安全问题，因此在使用时需要慎重考虑。