JavaScript中的异步加载有什么方式

2024-03-05 22:23:46

JavaScript中的异步加载可以通过多种方式来实现。

使用<script>标签进行异步加载：在HTML文件中添加如下代码片段，将外部脚本文件作为参数传递给src属性，并设置async或者defer属性来指定异步加载。示例代码如下所示：

html<script src="path/to/your-script.js" async></script>

其中，async表示立即开始下载脚本文件，但不会影响页面的加载和执行；而defer则表示等到DOMContentLoaded事件之后再去下载和执行该脚本文件。这两个属性都能确保脚本文件的加载与页面内容的显示无关。

动态创建<script>元素进行异步加载：通过JavaScript代码动态地创建<script>元素，然后将需要加载的脚本文件路径赋值给src属性，最后将该元素添加到页面中。示例代码如下所示：

javascriptvar script = document.createElement('script');script.src = 'path/to/your-script.js';document.head.appendChild(script);

上述代码会在当前页面头部（<head>）中创建一个新的<script>元素，并将指定的脚本文件路径赋值给src属性。然后，将该元素添加到页面中，从而实现了异步加载。

使用XMLHttpRequest对象进行异步加载：通过编写自定义函数，利用XMLHttpRequest对象发送HTTP请求获取脚本文件内容，并将其注入到页面中。示例代码如下所示：

javascriptfunction loadScriptAsync(url) {    var xhr = new XMLHttpRequest();    xhr.open("GET", url, true); // 第三个参数true表示异步加载    xhr.onreadystatechange = function() {        if (xhr.readyState === 4 && xhr.status === 200) {            eval(xhr.responseText); // 直接执行返回的脚本内容        }    };    xhr.send();}loadScriptAsync('path/to/your-script.js');

上述代码首先创建了一个XMLHttpRequest对象，并调用open()方法打开一个GET请求，同时指定URL、异步加载选项。然后，通过onreadystatechange事件处理程序判断请求状态变化，若成功完成（readyState为4，status为200），就将服务器返回的脚本内容通过eval()函数执行。