如何在用户点击按钮时不刷新整个页面而是局部更新？

在前端开发中，为了实现用户点击按钮时不刷新整个页面而是局部更新，可以采用以下几个技术：

1. **AJAX** (Asynchronous JavaScript and XML)：这是一种异步加载网页的技术，允许在不重新加载整个页面的情况下，向服务器发送请求并获取响应。在JavaScript中，可以使用像`XMLHttpRequest`或现代的fetch API来实现。

   const button = document.getElementById("updateButton");
   button.addEventListener("click", function() {
       const xhr = new XMLHttpRequest();
       xhr.open("GET", "/api/data", true);
       xhr.onreadystatechange = function() {
           if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
               // 更新DOM元素展示新的数据
               document.getElementById("result").innerHTML = xhr.responseText;
           }
       };
       xhr.send();
   });

2. **模板引擎**（如Handlebars、Mustache等）结合服务器端渲染：将部分视图数据放在服务器上动态生成HTML，只发送这部分变化的内容给客户端。

3. **框架/库支持**：许多现代前端框架（如React、Vue.js、AngularJS）都有内置机制来实现组件级别的更新，当你点击按钮时，只更新相关的组件状态，而不是整个页面。

4. **路由管理**：在单页应用(SPA)中，如Vue Router、React Router等，可以管理用户的导航，使得页面切换更像是内容的切换，而非传统意义上的页面刷新。