在前端开发中,经常需要从服务器获取数据。AJAX(Asynchronous JavaScript and XML)是一种常用的技术,可以让我们在不刷新页面的情况下从服务器获取数据并更新页面。
本文将介绍如何使用 AJAX 从 XML 文件动态获取数据,并结合示例代码进行详细说明。
准备工作
首先,我们需要一个 XML 文件。在本例中,我们将使用以下 XML 文件:
-- -------------------- ---- ------- ----- ------------- ------------------ ------- ------ ----------------------------- ------------- ----------------- -------------------- ------- ------ ------------------------------- ---------------- -- -------------- -------------------- ------- --------
我们将使用 JavaScript 代码从该 XML 文件中读取书籍信息,并在页面上显示。
AJAX 请求
要从 XML 文件中获取数据,我们需要使用 XMLHttpRequest 对象发送 AJAX 请求。以下是发送 AJAX 请求的基本步骤:
- 创建 XMLHttpRequest 对象。
- 设置请求方法、URL 和是否异步。
- 指定响应处理函数。
- 发送请求。
以下是示例代码:
-- -------------------- ---- ------- ----- --- - --- ----------------- -- -- -------------- -- --------------- ------------ ------ -- ---------- ----- ---------------------- - -------- -- - -- -------- -- --------------- --- - -- ---------- --- ---- - -- -------- ----- ------ - ---------------- -- -- --- ---- ----- ----- - ------------------------------------ -- ---- ---- -- --- ---- - - -- - - ------------- ---- - ----- ----- - ------------------------------------------------------ -- -- ----- ------- ----- ------ - ------------------------------------------------------- -- -- ------ ------- ----- ----- - ------------------------------------------------------ -- -- ----- ------- ------------------ ------- ------- - - -- ----------- -- ----
在上面的示例代码中,我们使用了 xhr.responseXML
属性获取 XML 文档对象,并使用 xmlDoc.getElementsByTagName()
方法获取所有 book 节点。然后,我们遍历所有 book 节点,并使用 getElementsByTagName()
方法获取 title、author 和 price 节点的文本内容。
显示数据
我们可以将获取到的书籍信息显示在页面上。以下是示例代码:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------- ------- ------ ------- ------- ---- -------------- --------------- -------------- ----- -------- ------ ------------------- -------- -------- ----- --- - --- ----------------- --------------- ------------ ------ ---------------------- - -------- -- - -- --------------- --- - -- ---------- --- ---- - ----- ------ - ---------------- ----- ----- - ------------------------------------ ----- ----- - --------------------------------- -- -- ----- -- --- ---- - - -- - - ------------- ---- - ----- ----- - ------------------------------------------------------ ----- ------ - ------------------------------------------------------- ----- ----- - ------------------------------------------------------ ----- -- - ----------------------------- -- -- -- -- ----- --- - ----------------------------- -- -- -- -- --------------- - ------ -- -- -- ------- ----- --- - ----------------------------- --------------- - ------- ----- --- - ----------------------------- --------------- - ------ -------------------- -- - -- - - ---------------------------------------------------------- -------- --------------------------------------------------------------------------------