Ajax(Asynchronous JavaScript and XML)是一种通过在后台与服务器进行异步通信的技术
可以实现网页局部更新而无需刷新整个页面。常用于通过前端与后端进行数据交互。以下是一个使用 Ajax 的简单示例:
<!DOCTYPE html> <html> <head> <title>Ajax 示例</title> </head> <body> <h1>Ajax 示例</h1> <button onclick="getData()">获取数据</button> <div id="result"></div> <script> // 发送 Ajax 请求获取数据 function getData() { const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { const data = JSON.parse(xhr.responseText); // 将获取的数据显示在页面上 const resultDiv = document.getElementById('result'); resultDiv.innerHTML = JSON.stringify(data); } }; xhr.send(); } </script> </body> </html>
在上述示例中,点击 "获取数据" 按钮时,会使用 Ajax 发起 GET 请求到后端的 /api/data
端点,并获取后端返回的数据。获取到数据后,将其显示在页面上的 result
元素中。
请注意,在实际应用中,可能需要处理更多的 Ajax 请求事件、错误处理、发送数据等。此处提供的示例是一个基本的框架,你可以根据实际需求进行修改和扩展。
同时,需要在后端服务器上提供一个对应的 /api/data
端点,以处理来自前端的请求并返回数据。这个后端代码可以与前面提到的后端代码(Node.js)结合使用。