局部刷新的两种实现方式

最新推荐文章于 2021-02-13 16:28:11 发布
最新推荐文章于 2021-02-13 16:28:11 发布
阅读量2.6k 收藏
点赞数
分类专栏： 技术&&管理 文章标签： stylesheet xmlhttprequest button path parameters url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunbobosun5680/article/details/2915072
版权

最近忙于上海东方有线的项目，客户需要一些下拉框的局部刷新功能，我参看了其他同事的代码，发现并未实现数据的异步传输，而是采用from局部提交的方式。以下是整理出来的经典下拉列表局部刷新功能Example的部分关键代码，采用了两种方式：localRefresh_1.jsp的功能全部自己手动编写；localRefresh_2.jsp采用prototype.js的方法。

 

createXHR.js:（创建XMLHttpRequest）

  1. function createXMLHttpRequest() {
  2.     var xmlHttp;
  3.     if(window.ActiveXObject) {
  4.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  5.     }
  6.     else if(window.XMLHttpRequest) {
  7.         xmlHttp = new XMLHttpRequest();
  8.     }
  9.     
  10.     return xmlHttp;
  11. }

startRequest.js:（向服务器发送数据）

  1. function startRequest_get(xmlHttp, url) {
  2.     xmlHttp.onreadystatechange = handleStateChange;
  3.     xmlHttp.open("GET", url, true);
  4.     xmlHttp.send(null);
  5. }
  7. function startRequest_post(xmlHttp, url, parameter) {
  8.     xmlHttp.open("POST", url, true);
  9.     xmlHttp.onreadystatechange = handleStateChange;
  10.     xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
  11.     xmlHttp.send(parameter);
  12. }

localRefresh_1.jsp:（自己编写JS）

  1. <%@ page contentType="text/html" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8.   <head>
  9.     
  10.     <title>My JSP 'test.jsp' starting page</title>
  12.     <!--
  13.     <link rel="stylesheet" type="text/css" href="styles.css">
  14.     -->
  15.     <script type="text/javascript"  src="<%=path%>/js/createXHR.js"></script>
  16.     <script type="text/javascript"  src="<%=path%>/js/startRequest.js"></script>
  17.     <script type="text/javascript">
  18.     <!--
  19.       var xmlHttp = createXMLHttpRequest();
  20.       function startRequest() {
  21.         var parameterStr = "languageType=" + document.getElementById("langeuage").value;
  22.         startRequest_post(xmlHttp, "<%=path%>/getAndPostExample.do", parameterStr);
  23.       }
  24.       
  25.       function handleStateChange(){
  26.         if(xmlHttp.readyState == 4) {
  27.           if(xmlHttp.status == 200 || xmlHttp.status == 0) {
  28.             getSecondList();
  29.           } 
  30.         }
  31.       }
  32.       
  33.       function getSecondList() {
  34.         document.getElementById("second").innerHTML = xmlHttp.responseText;
  35.       }
  36.      //-->
  37.     </script>
  38.   </head>
  39.   
  40.   <body> 
  41.     <br>This is my JSP page. <br>
  42.     <input type="button" value="button">
  43.     <br>
  44.     <select id="langeuage" onchange="startRequest()">
  45.       <option value="0">please</option>
  46.       <option value="1">Java</option>
  47.       <option value="2">C/C++</option>
  48.       <option value="3">Perl</option>
  49.       <option value="4">.net</option>
  50.     </select>
  51.     <div id="second" style="display:inLine">
  52.       <select id="languageDesc">
  53.         <option value="0">please</option>
  54.         <option value="1_1">J2SE</option>
  55.         <option value="1_2">J2EE</option>
  56.         <option value="1_3">J2ME</option>
  57.         <option value="2_1">C90</option>
  58.         <option value="2_2">C99</option>
  59.         <option value="2_3">C++</option>
  60.         <option value="3_1">perl</option>
  61.         <option value="4_1">VB</option>
  62.         <option value="4_2">VC</option>
  63.         <option value="4_3">C#</option>
  64.       </select>
  65.     </div>
  66.     
  67.   </body>
  68. </html>

localRefresh_2.jsp:（利用prototype.js实现局部刷新）
  1. <%@ page contentType="text/html" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8.   <head>
  9.     
  10.     <title>My JSP 'test.jsp' starting page</title>
  11.     <!--
  12.     <link rel="stylesheet" type="text/css" href="styles.css">
  13.     -->
  14.     <script type="text/javascript"  src="<%=path%>/js/prototype-1.4.0.js"></script>
  15.     <script type="text/javascript">
  16.     <!--
  17.       function startRequest(){
  18.         var url = '<%=path%>/getAndPostExample.do';
  19.         var pars = "languageType=" + $F("langeuage");
  20.         var myAjax = new Ajax.Updater(
  21.             'second',
  22.             url,
  23.             {
  24.                 method: 'post',
  25.                 parameters: pars
  26.             });
  27.        }
  28.      //-->
  29.     </script>
  30.   </head>
  31.   
  32.   <body>
  33.     This is my JSP page. <br>
  34.     <input type="button" value="button">
  35.     <br>
  36.     <select id="langeuage" οnchange="startRequest()">
  37.       <option value="0">please</option>
  38.       <option value="1">Java</option>
  39.       <option value="2">C/C++</option>
  40.       <option value="3">Perl</option>
  41.       <option value="4">.net</option>
  42.     </select>
  43.     <div id="second" style="display:inLine">
  44.       <select id="languageDesc">
  45.         <option value="0">please</option>
  46.         <option value="1_1">J2SE</option>
  47.         <option value="1_2">J2EE</option>
  48.         <option value="1_3">J2ME</option>
  49.         <option value="2_1">C90</option>
  50.         <option value="2_2">C99</option>
  51.         <option value="2_3">C++</option>
  52.         <option value="3_1">perl</option>
  53.         <option value="4_1">VB</option>
  54.         <option value="4_2">VC</option>
  55.         <option value="4_3">C#</option>
  56.       </select>
  57.     </div>
  58.     
  59.   </body>
  60. </html>

 

GetAndPostExample.java:（重写doPost和doGet，将结果写入jsp）

  1. package common;
  2. import java.io.IOException;
  3. import java.io.PrintWriter;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  10. public class GetAndPostExample extends HttpServlet{
  11.     /**
  12.      * 
  13.      * @param request
  14.      * @param response
  15.      * @param method
  16.      * @throws IOException
  17.      */
  18.     public void poressRequest(HttpServletRequest request, HttpServletResponse response,
  19.             String method) throws IOException {
  20.         
  21.         response.setContentType("text/html");
  22.         String languageType = request.getParameter("languageType");
  23.         
  24.         PrintWriter out = response.getWriter();
  25.         out.print(new CreateLanguageDesc().getLanguateDesc(languageType));
  26.         out.close();
  27.     }
  28.     
  29.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
  30.         poressRequest(request, response, "GET");
  31.     }
  32.     
  33.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
  34.         poressRequest(request, response, "Post");
  35.     }
  36. }

     CreateLanguageDesc.java（业务逻辑，组织数据）

  1. package common;
  3. /**
  4.  * This class user for chose language and translate the result into HTML
  5.  * @author ibm
  6.  *
  7.  */
  8. class CreateLanguageDesc {
  10.     /**
  11.      * 
  12.      * @param languateType
  13.      * @return
  14.      */
  15.     String getLanguateDesc(String languateType) {
  16.         
  17.         StringBuffer select = new StringBuffer();
  18.         StringBuffer options = new StringBuffer();
  19.         
  20.         select.append("<select id='languageDesc'>");
  22.         if(languateType == null || languateType.equals("")) {
  23.             createPlease();
  24.         }
  25.         else if(languateType.equals(LanguateType.JAVA)) {
  26.             options.append(createJava());
  27.         }
  28.         else if(languateType.equals(LanguateType.C)) {
  29.             options.append(createC());
  30.         }
  31.         else if(languateType.equals(LanguateType.Perl)) {
  32.             options.append(createPerl());
  33.         }
  34.         else if(languateType.equals(LanguateType.NET)) {
  35.             options.append(createNet());
  36.         }
  37.         else {
  38.             options.append(createAll());
  39.         }
  40.         select.append(options);
  41.         select.append("</select>");
  42.         
  43.         return select.toString();
  44.     }
  46.     /**
  47.      * create please options
  48.      * @return
  49.      */
  50.     private StringBuffer createPlease() {
  51.         StringBuffer options = new StringBuffer();
  52.         options.append("<option value='0'>Please</option>");
  53.         
  54.         return options;
  55.     }
  56.     
  57.     /**
  58.      * create javaDesc options
  59.      * @return
  60.      */
  61.     private StringBuffer createJava() {
  62.         StringBuffer options = new StringBuffer();
  63.         options.append("<option value='1_1'>J2SE</option>");
  64.         options.append("<option value='1_2'>J2EE</option>");
  65.         options.append("<option value='1_3'>J2ME</option>");
  66.         
  67.         return options;
  68.     }
  70.     /**
  71.      * create C/C++Desc options
  72.      * @return
  73.      */
  74.     private StringBuffer createC() {
  75.         StringBuffer options = new StringBuffer();
  76.         options.append("<option value='2_1'>C90</option>");
  77.         options.append("<option value='2_2'>C99</option>");
  78.         options.append("<option value='2_3'>C++</option>");
  79.         
  80.         return options;
  81.     }
  82.     
  83.     /**
  84.      * create PerlDesc options
  85.      * @return
  86.      */
  87.     private StringBuffer createPerl() {
  88.         StringBuffer options = new StringBuffer();
  89.         options.append("<option value='3_1'>Perl</option>");
  90.         
  91.         return options;
  92.     }
  93.     
  94.     /**
  95.      * create .netDesc options
  96.      * @return
  97.      */
  98.     private StringBuffer createNet() {
  99.         StringBuffer options = new StringBuffer();
  100.         options.append("<option value='4_1'>VB</option>");
  101.         options.append("<option value='4_2'>VC</option>");
  102.         options.append("<option value='4_3'>C#</option>");
  103.         
  104.         return options;
  105.     }
  106.     
  107.     /**
  108.      * create all of languageDesc options
  109.      * @return
  110.      */
  111.     private StringBuffer createAll() {
  112.         StringBuffer options = new StringBuffer();
  113.         options.append(createPlease());
  114.         options.append(createJava());
  115.         options.append(createC());
  116.         options.append(createPerl());
  117.         options.append(createNet());
  118.         
  119.         return options;
  120.     }
  121. }

相比之下，localRefresh_2.jsp的代码要简单的多，多利用开源工具不仅提高了效率，还提高了可读性。

sunbobosun5680
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
saturn 源码解析
weixin_45560918的博客
03-08 899
saturn-console 启动 saturn console本身为一个springboot项目，所有的bean都在saturn-console 下的applicationContext.xml中定义。所以启动主要就是初始化负责各种操作的bean。 <!-- ----- 权限管理主要针对job --------> <bean id="authorizationService" class="com.vip.saturn.job.console.service
java实现ajax局部刷新
12-28
tools.jsp 兼容创建xmlhttprequest，update.jsp前台页面，getColor.jsp后台页面。这个只能让初学者对ajax有感性认识。
java web 局部刷新页面_如何实现页面局部刷新(Java)
weixin_39806288的博客
02-13 831
展开全部可以用Ajax实现局部刷新，参考62616964757a686964616fe58685e5aeb931333337396232代码如下：Stringurl=request.getRequestURI();Stringparam=request.getParameter("param");if(param!=null&&!param.equals("")...
《贪吃蛇》局部刷新法（C语言，字符界面）
weixin_30411239的博客
07-15 405
一， 游戏规则： 蛇的初始长度为 SNAKE_LEN ， 蛇按照原来的方向移动， 如果有键盘输入按照键盘改变方向。（反向无效， 例如： 方向为向上时按向下无效） 如果吃到食物则变长一个结点，得一分。 如果没有则继续移动 移动范围为 COLUMNS*ROWS 个格子 结束游戏条件： （1）自食 （2）蛇头碰到墙 二， 数据结构和宏 #define ROWS 15 ...
使用回调技术实现局部刷新
weixin_33910137的博客
02-27 139
       使用回调技术实现局部刷新,它只要是实现了ICallbackEventHandler这个接口,使用接口中的RaiseCallbackEvent        事件和GetCallbackResult()方法,最后用javaScript脚本来调用 以下是前台Default.aspx.cs代码:  1using System;  2using System.Data;  3usi...
jQuery+ajax实现局部刷新的两种方法
10-19
在项目中，经常会用到ajax，比如实现局部刷新，比如需要前后端交互等，这里呢分享局部刷新的两种方法，主要用的是ajax里面的.load()。感兴趣的朋友一起看看吧
局部刷新的两种实现方式大家看看啊
09-17
在本篇文章中，我们将深入探讨局部刷新的两种主要实现方式：基于DOM操作和虚拟DOM。 1. 基于DOM操作的局部刷新： 在Web开发中，DOM（Document Object Model）是HTML或XML文档的一种结构化表示。当数据发生变化时，...
Flutter实现局部刷新
08-18
本文将介绍两种局部刷新的方式：通过Provider和StreamBuilder来实现局部刷新。 一、通过Provider刷新 Provider是Flutter中的一种状态管理工具，可以帮助我们轻松地实现局部刷新。下面是一个通过Provider来实现一个...
浅析PHP页面局部刷新功能的实现小结
10-27
PHP页面局部刷新功能的实现主要涉及到两种技术：Ajax和Iframe。这两种方法都能在不完全重新加载整个网页的情况下更新特定区域的内容，提高用户体验。下面将分别对这两种方法进行详细讲解。 1. Ajax 实现： Ajax...
说说IResource.refreshLocal(int depth,, IProgressMonitor monitor)
cuseronline的专栏
08-29 1597
refreshLocal的原型为： public void refreshLocal(int depth, IProgressMonitor monitor) throws CoreException;   refreshLocal方法可以传递一个尝试参数，以指明刷新的对象仅仅是该资源，还是该资源及其成员，或者是该资源及其所有后代资源。所有由工作空间api引起的更改，例如向项目中添加文件夹或
前端局部刷新的几种方式
热门推荐
fengfangyuan的博客
06-20 2万+
1. 通过img标签请求，实现局部刷新。实现方式向页面插入一个img标签，监听其加载，加载成功则表示请求成功，做出相应的处理；加载补充表示请求补充，也作出相应的处理。 button.addEventListener('click', (e)=>{ let image = document.createElement('img') image.src = '/pay' ...
局部刷新
JAVA之迷
04-26 911
iframe重点， ajax在页面局部刷新，iframe也可以局部刷新。 flex,aplace,异步刷新操作技术。
java结合jQuery.ajax实现左右菜单联动刷新列表内容
dgz41976的博客
08-23 250
http://域名/一级菜单ID-二级菜单ID/用这样的URL请求页面，出现如图所示内容； 该页面包含四部分，顶部目录+左侧菜单+右侧菜单+右下侧数据列表； 左侧菜单包含一级菜单和二级菜单，点击某个一级菜单时打开对应的二级菜单，同时右侧也显示二级菜单；选中左侧某个二级菜单，右侧对应的二级菜单也被选中，点击右侧二级菜单，显示对应的三级菜单，默认选中三级菜单的全部，点击某个三级菜单，列...
Java实现实体局部更新，无需手动set
ACodeBird
12-23 791
一、编写工具类CopyPropertiesUtil.java //BeanUtils实现部份复制工具类，筛选出值为空的字段，返回空字段数组 public class CopyPropertiesUtil{ public static String[] getNullPropertyNames(Object object) { final BeanWrapper src = new BeanW...
response简单实现页面刷新
yy198982的博客
09-14 2725
  &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":&q
idea部分操作（一）----持续更新
weixin_30438813的博客
05-06 106
07:51:101.IDEA正确设置编码统一为UTF-8： 这样可以整体修改。 转载于:https://www.cnblogs.com/lgqrlchinese/p/10819795.html
实现Web页面局部动态更新
lateblue的专栏
10-17 2189
实现Web页面局部动态更新在浏览网页时，有时往往因为查看局部信息，而导致整个网页都需要从服务器端重新加载一次。传统的Web实现方式中，实现类似的效果必须进行整个页面的刷新。但是借助Ajax技术，可以实现对页面中局部区域的动态刷新，使得用户能够以更好的方式获得最新的数据信息。只更新需要查看的信息，页面中其他信息保持不变。局部动态更新是Ajax技术主要功能表现之一。现在创建一个案例，演示使用A
vue中如何实现局部刷新
最新发布
06-11
Vue 中实现局部刷新的方式有很多种，下面介绍两种比较常见的方式： 1. 使用 `v-if` 或 `v-...总的来说，局部刷新的方式有很多种，具体的实现方式需要根据具体的业务场景和需求来选择。以上只是其中的两种常见方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值