前端开发中，我们经常需要使用模板引擎来动态生成 HTML 内容。而在使用模板引擎之前，我们需要先将模板文件加载到 JavaScript 中进行处理。本文将介绍如何使用 JavaScript 加载 HTML 模板。
XMLHttpRequest
最常用的方式是使用 XMLHttpRequest 对象发送 HTTP 请求并获取响应。这种方法可以异步地加载文件，从而不会阻塞页面的渲染。下面是一个简单的例子：
-- -------------------- ---- -------
----- --- - --- -----------------
--------------- -----------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
----- -------- - -----------------
-- ------
-
--
-----------在这个例子中，我们使用 XMLHttpRequest 对象发送了一个 GET 请求，并设置了 onreadystatechange 回调函数来处理响应。当状态码为 4（即请求已完成）且响应状态码为 200 时，表示请求成功，此时我们可以通过 responseText 属性获取响应数据，也就是模板文件的内容。
Fetch API
除了 XMLHttpRequest，我们还可以使用新的 Fetch API 来加载文件。Fetch API 是一个现代的 JavaScript API，它提供了更简洁、更灵活的方式来发起网络请求，并支持 Promise。
fetch('template.html')
.then(response => response.text())
.then(template => {
// 处理模板内容
});在这个例子中，我们首先使用 fetch 方法发送了一个 GET 请求，并将响应转换为文本格式。然后通过 Promise 的链式调用来处理响应数据。
使用第三方库
除了原生的 HTTP API，还有很多优秀的第三方库可以简化加载模板的过程，比如 jQuery 和 Axios。
以 Axios 为例：
axios.get('template.html')
.then(response => {
const template = response.data;
// 处理模板内容
});在这个例子中，我们使用了 Axios 的 get 方法发起了一个 GET 请求，并通过 Promise 来处理响应。注意，Axios 返回的响应对象包含数据在内的多种属性和方法，所以我们需要使用 response.data 属性来获取响应数据。
总结
本文介绍了三种常见的方式来使用 JavaScript 加载 HTML 模板：XMLHttpRequest、Fetch API 和第三方库（如 Axios）。无论你选择哪种方式，都应该根据具体情况灵活运用，以便在实际开发中提高效率。
示例代码
以下是一个完整的示例，使用 Fetch API 加载模板并渲染到页面上：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- -------- ---- ------------------
-------
------
---- ---------------
--------
----------------------
-------------- -- ----------------
-------------- -- -
----- ----- - -------------------------------
--------------- - ---------
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28908