JSP结合AJAX实现股票报价 点击刷新按钮数值不更新问题

你的代码完全混淆了服务端JSP执行逻辑和客户端JS执行逻辑的运行边界，所有和股票更新相关的逻辑都写错了执行位置，具体错误点如下：

• 所有包裹在<% %>里的JSP脚本都是在服务器上执行的，执行时机是用户第一次请求页面、服务器把JSP渲染成静态HTML返回给浏览器之前。你写在refreshValuesJS函数里的<%enel.updateValue();%>、<%webuild.updateValue();%>，根本不会在用户点击按钮的时候执行——这两行代码在页面第一次加载时就已经在服务器跑完了，返回给浏览器的静态JS代码里，这两个位置要么是空值，要么是方法执行后的返回值，后续用户点击按钮触发JS函数时，服务器根本不会收到这部分代码的执行请求，自然不会更新股价。
• 你在按钮的onclick事件里写refreshValues(<%=enel%>, <%=webuild%>)是完全错误的：enel和webuild是服务器端的Java实例，你直接用<%= %>输出到HTML里，只会得到Java对象的toString()字符串（大概率是类似对象类名@内存地址的无意义内容），根本不可能把Java对象传到浏览器的JS环境里。后续JS里调用enel.displayAction()的时候，JS环境里根本没有这个对象和对应方法，直接会抛语法/类型错误，DOM更新逻辑根本跑不通。
• 你的XMLHttpRequest逻辑完全无效：你确实发了GET请求到index.jsp，但在onload回调里完全没有读取请求返回的响应内容（也就是xhttp.responseText），反而试图操作不存在的JS端Java对象，就算请求真的触发了服务端的股价更新，你也没把新值取出来渲染到页面上。

1. 不要在客户端JS里嵌入JSP脚本调用Java业务方法，单独写一个服务端接口（比如Servlet路径为/refreshStock），接口逻辑里调用两个股票对象的updateValue()方法，再把两个对象displayAction()的返回值组装成JSON格式响应给前端，示例逻辑：

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       // 从application作用域取出两个股票实例
       ServletContext context = getServletContext();
       Enel enel = (Enel) context.getAttribute("enel");
       WeBuild webuild = (WeBuild) context.getAttribute("webuild");
       // 更新股价
       enel.updateValue();
       webuild.updateValue();
       // 组装返回结果
       JSONObject res = new JSONObject();
       res.put("enel", enel.displayAction());
       res.put("webuild", webuild.displayAction());
       // 输出JSON响应
       response.setContentType("application/json");
       response.getWriter().write(res.toJSONString());
   }
   

2. 修正前端JS的refreshValues逻辑，去掉错误的传参、去掉JS里嵌入的JSP脚本，请求上面写的更新接口，拿到响应结果后直接更新DOM：

   function refreshValues(){
       const xhttp = new XMLHttpRequest();
       xhttp.onload = function (){
           const newValues = JSON.parse(xhttp.responseText);
           document.getElementById("Enel").innerHTML = newValues.enel;
           document.getElementById("Webuild").innerHTML = newValues.webuild;
       }
       xhttp.open("GET", "refreshStock", true);
       xhttp.send();
   }
   

3. 修正Refresh按钮的点击事件绑定，去掉错误的Java对象传参：

   <button type="button" onclick="refreshValues()">Refresh Values</button>
   

补充说明：你当前把两个JavaBean的scope设为application，意味着所有访问这个页面的用户共享同一份股价数据，只要有一个人点刷新，所有人看到的股价都会变，如果这是你预期的效果可以保留，否则要调整scope为session。

内容的提问来源于stack exchange，提问作者Leonardo Porcelli