局部刷新的两种实现方式
2008-09-11 20:22
501 查看
最近忙于上海东方有线的项目，客户需要一些下拉框的局部刷新功能，我参看了其他同事的代码，发现并未实现数据的异步传输，而是采用from局部提交的方式。以下是整理出来的经典下拉列表局部刷新功能Example的部分关键代码，采用了两种方式：localRefresh_1.jsp的功能全部自己手动编写；localRefresh_2.jsp采用prototype.js的方法。
createXHR.js:（创建XMLHttpRequest）
function createXMLHttpRequest() {
var xmlHttp;
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
startRequest.js:（向服务器发送数据）
function startRequest_get(xmlHttp, url) {
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function startRequest_post(xmlHttp, url, parameter) {
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send(parameter);
}
localRefresh_1.jsp:（自己编写JS）
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'test.jsp' starting page</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=path%>/js/createXHR.js"></script>
<script type="text/javascript" src="<%=path%>/js/startRequest.js"></script>
<script type="text/javascript">
<!--
var xmlHttp = createXMLHttpRequest();
function startRequest() {
var parameterStr = "languageType=" + document.getElementById("langeuage").value;
startRequest_post(xmlHttp, "<%=path%>/getAndPostExample.do", parameterStr);
}
function handleStateChange(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200 || xmlHttp.status == 0) {
getSecondList();
}
}
}
function getSecondList() {
document.getElementById("second").innerHTML = xmlHttp.responseText;
}
//-->
</script>
</head>
<body>
<br>This is my JSP page. <br>
<input type="button" value="button">
<br>
<select id="langeuage" onchange="startRequest()">
<option value="0">please</option>
<option value="1">Java</option>
<option value="2">C/C++</option>
<option value="3">Perl</option>
<option value="4">.net</option>
</select>
<div id="second" style="display:inLine">
<select id="languageDesc">
<option value="0">please</option>
<option value="1_1">J2SE</option>
<option value="1_2">J2EE</option>
<option value="1_3">J2ME</option>
<option value="2_1">C90</option>
<option value="2_2">C99</option>
<option value="2_3">C++</option>
<option value="3_1">perl</option>
<option value="4_1">VB</option>
<option value="4_2">VC</option>
<option value="4_3">C#</option>
</select>
</div>
</body>
</html>
localRefresh_2.jsp:（利用prototype.js实现局部刷新）
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'test.jsp' starting page</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=path%>/js/prototype-1.4.0.js"></script>
<script type="text/javascript">
<!--
function startRequest(){
var url = '<%=path%>/getAndPostExample.do';
var pars = "languageType=" + $F("langeuage");
var myAjax = new Ajax.Updater(
'second',
url,
{
method: 'post',
parameters: pars
});
}
//-->
</script>
</head>
<body>
This is my JSP page. <br>
<input type="button" value="button">
<br>
<select id="langeuage" onchange="startRequest()">
<option value="0">please</option>
<option value="1">Java</option>
<option value="2">C/C++</option>
<option value="3">Perl</option>
<option value="4">.net</option>
</select>
<div id="second" style="display:inLine">
<select id="languageDesc">
<option value="0">please</option>
<option value="1_1">J2SE</option>
<option value="1_2">J2EE</option>
<option value="1_3">J2ME</option>
<option value="2_1">C90</option>
<option value="2_2">C99</option>
<option value="2_3">C++</option>
<option value="3_1">perl</option>
<option value="4_1">VB</option>
<option value="4_2">VC</option>
<option value="4_3">C#</option>
</select>
</div>
</body>
</html>
GetAndPostExample.java:（重写doPost和doGet，将结果写入jsp）
package common;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GetAndPostExample extends HttpServlet{
/**
*
* @param request
* @param response
* @param method
* @throws IOException
*/
public void poressRequest(HttpServletRequest request, HttpServletResponse response,
String method) throws IOException {
response.setContentType("text/html");
String languageType = request.getParameter("languageType");
PrintWriter out = response.getWriter();
out.print(new CreateLanguageDesc().getLanguateDesc(languageType));
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
poressRequest(request, response, "GET");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
poressRequest(request, response, "Post");
}
}
CreateLanguageDesc.java（业务逻辑，组织数据）
package common;
/**
* This class user for chose language and translate the result into HTML
* @author ibm
*
*/
class CreateLanguageDesc {
/**
*
* @param languateType
* @return
*/
String getLanguateDesc(String languateType) {
StringBuffer select = new StringBuffer();
StringBuffer options = new StringBuffer();
select.append("<select id='languageDesc'>");
if(languateType == null || languateType.equals("")) {
createPlease();
}
else if(languateType.equals(LanguateType.JAVA)) {
options.append(createJava());
}
else if(languateType.equals(LanguateType.C)) {
options.append(createC());
}
else if(languateType.equals(LanguateType.Perl)) {
options.append(createPerl());
}
else if(languateType.equals(LanguateType.NET)) {
options.append(createNet());
}
else {
options.append(createAll());
}
select.append(options);
select.append("</select>");
return select.toString();
}
/**
* create please options
* @return
*/
private StringBuffer createPlease() {
StringBuffer options = new StringBuffer();
options.append("<option value='0'>Please</option>");
return options;
}
/**
* create javaDesc options
* @return
*/
private StringBuffer createJava() {
StringBuffer options = new StringBuffer();
options.append("<option value='1_1'>J2SE</option>");
options.append("<option value='1_2'>J2EE</option>");
options.append("<option value='1_3'>J2ME</option>");
return options;
}
/**
* create C/C++Desc options
* @return
*/
private StringBuffer createC() {
StringBuffer options = new StringBuffer();
options.append("<option value='2_1'>C90</option>");
options.append("<option value='2_2'>C99</option>");
options.append("<option value='2_3'>C++</option>");
return options;
}
/**
* create PerlDesc options
* @return
*/
private StringBuffer createPerl() {
StringBuffer options = new StringBuffer();
options.append("<option value='3_1'>Perl</option>");
return options;
}
/**
* create .netDesc options
* @return
*/
private StringBuffer createNet() {
StringBuffer options = new StringBuffer();
options.append("<option value='4_1'>VB</option>");
options.append("<option value='4_2'>VC</option>");
options.append("<option value='4_3'>C#</option>");
return options;
}
/**
* create all of languageDesc options
* @return
*/
private StringBuffer createAll() {
StringBuffer options = new StringBuffer();
options.append(createPlease());
options.append(createJava());
options.append(createC());
options.append(createPerl());
options.append(createNet());
return options;
}
}
相比之下，localRefresh_2.jsp的代码要简单的多，多利用开源工具不仅提高了效率，还提高了可读性。
createXHR.js:（创建XMLHttpRequest）
function createXMLHttpRequest() {
var xmlHttp;
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
startRequest.js:（向服务器发送数据）
function startRequest_get(xmlHttp, url) {
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function startRequest_post(xmlHttp, url, parameter) {
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send(parameter);
}
localRefresh_1.jsp:（自己编写JS）
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'test.jsp' starting page</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=path%>/js/createXHR.js"></script>
<script type="text/javascript" src="<%=path%>/js/startRequest.js"></script>
<script type="text/javascript">
<!--
var xmlHttp = createXMLHttpRequest();
function startRequest() {
var parameterStr = "languageType=" + document.getElementById("langeuage").value;
startRequest_post(xmlHttp, "<%=path%>/getAndPostExample.do", parameterStr);
}
function handleStateChange(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200 || xmlHttp.status == 0) {
getSecondList();
}
}
}
function getSecondList() {
document.getElementById("second").innerHTML = xmlHttp.responseText;
}
//-->
</script>
</head>
<body>
<br>This is my JSP page. <br>
<input type="button" value="button">
<br>
<select id="langeuage" onchange="startRequest()">
<option value="0">please</option>
<option value="1">Java</option>
<option value="2">C/C++</option>
<option value="3">Perl</option>
<option value="4">.net</option>
</select>
<div id="second" style="display:inLine">
<select id="languageDesc">
<option value="0">please</option>
<option value="1_1">J2SE</option>
<option value="1_2">J2EE</option>
<option value="1_3">J2ME</option>
<option value="2_1">C90</option>
<option value="2_2">C99</option>
<option value="2_3">C++</option>
<option value="3_1">perl</option>
<option value="4_1">VB</option>
<option value="4_2">VC</option>
<option value="4_3">C#</option>
</select>
</div>
</body>
</html>
localRefresh_2.jsp:（利用prototype.js实现局部刷新）
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'test.jsp' starting page</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=path%>/js/prototype-1.4.0.js"></script>
<script type="text/javascript">
<!--
function startRequest(){
var url = '<%=path%>/getAndPostExample.do';
var pars = "languageType=" + $F("langeuage");
var myAjax = new Ajax.Updater(
'second',
url,
{
method: 'post',
parameters: pars
});
}
//-->
</script>
</head>
<body>
This is my JSP page. <br>
<input type="button" value="button">
<br>
<select id="langeuage" onchange="startRequest()">
<option value="0">please</option>
<option value="1">Java</option>
<option value="2">C/C++</option>
<option value="3">Perl</option>
<option value="4">.net</option>
</select>
<div id="second" style="display:inLine">
<select id="languageDesc">
<option value="0">please</option>
<option value="1_1">J2SE</option>
<option value="1_2">J2EE</option>
<option value="1_3">J2ME</option>
<option value="2_1">C90</option>
<option value="2_2">C99</option>
<option value="2_3">C++</option>
<option value="3_1">perl</option>
<option value="4_1">VB</option>
<option value="4_2">VC</option>
<option value="4_3">C#</option>
</select>
</div>
</body>
</html>
GetAndPostExample.java:（重写doPost和doGet，将结果写入jsp）
package common;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GetAndPostExample extends HttpServlet{
/**
*
* @param request
* @param response
* @param method
* @throws IOException
*/
public void poressRequest(HttpServletRequest request, HttpServletResponse response,
String method) throws IOException {
response.setContentType("text/html");
String languageType = request.getParameter("languageType");
PrintWriter out = response.getWriter();
out.print(new CreateLanguageDesc().getLanguateDesc(languageType));
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
poressRequest(request, response, "GET");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
poressRequest(request, response, "Post");
}
}
CreateLanguageDesc.java（业务逻辑，组织数据）
package common;
/**
* This class user for chose language and translate the result into HTML
* @author ibm
*
*/
class CreateLanguageDesc {
/**
*
* @param languateType
* @return
*/
String getLanguateDesc(String languateType) {
StringBuffer select = new StringBuffer();
StringBuffer options = new StringBuffer();
select.append("<select id='languageDesc'>");
if(languateType == null || languateType.equals("")) {
createPlease();
}
else if(languateType.equals(LanguateType.JAVA)) {
options.append(createJava());
}
else if(languateType.equals(LanguateType.C)) {
options.append(createC());
}
else if(languateType.equals(LanguateType.Perl)) {
options.append(createPerl());
}
else if(languateType.equals(LanguateType.NET)) {
options.append(createNet());
}
else {
options.append(createAll());
}
select.append(options);
select.append("</select>");
return select.toString();
}
/**
* create please options
* @return
*/
private StringBuffer createPlease() {
StringBuffer options = new StringBuffer();
options.append("<option value='0'>Please</option>");
return options;
}
/**
* create javaDesc options
* @return
*/
private StringBuffer createJava() {
StringBuffer options = new StringBuffer();
options.append("<option value='1_1'>J2SE</option>");
options.append("<option value='1_2'>J2EE</option>");
options.append("<option value='1_3'>J2ME</option>");
return options;
}
/**
* create C/C++Desc options
* @return
*/
private StringBuffer createC() {
StringBuffer options = new StringBuffer();
options.append("<option value='2_1'>C90</option>");
options.append("<option value='2_2'>C99</option>");
options.append("<option value='2_3'>C++</option>");
return options;
}
/**
* create PerlDesc options
* @return
*/
private StringBuffer createPerl() {
StringBuffer options = new StringBuffer();
options.append("<option value='3_1'>Perl</option>");
return options;
}
/**
* create .netDesc options
* @return
*/
private StringBuffer createNet() {
StringBuffer options = new StringBuffer();
options.append("<option value='4_1'>VB</option>");
options.append("<option value='4_2'>VC</option>");
options.append("<option value='4_3'>C#</option>");
return options;
}
/**
* create all of languageDesc options
* @return
*/
private StringBuffer createAll() {
StringBuffer options = new StringBuffer();
options.append(createPlease());
options.append(createJava());
options.append(createC());
options.append(createPerl());
options.append(createNet());
return options;
}
}
相比之下，localRefresh_2.jsp的代码要简单的多，多利用开源工具不仅提高了效率，还提高了可读性。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js将number数值转化成为货币格式，货币格式化，金钱过滤器，货币过滤器，vue货币过滤金钱过滤全局和局部两种实现方式
- 2种方式实现局部刷新
- jQuery+ajax实现局部刷新的两种方法
- iOS UITableView 中局部刷新实现方式
- java绘制图片验证码两种方式实现，点击【图片】刷新和点击【看不清换一张】刷新
- 传统方式实现AJAX异步获取数据，局部刷新
- dwz局部刷新两种方式：
- NHibernate+spring.net+jquery打造UI控件库(mvc+webform两种实现) usercontrol,jtemplate两种方式打造无刷新分页（附NHbernate+Spring.net源码）
- Adnroid 两种下拉刷新 方式的实现 sina刷新 gmail刷新
- iframe局部刷新的两种实现方法
- jQuery实现局部刷新的几种方式
- Linux审计功能实现两种实现方式
- 快排的java两种实现方式
- jsp/servlet定时监控的两种实现方式 （2）
- python实现高速排序算法(两种不同实现方式)
- JAVA多线程机制有两种实现方式
- 前端ajax,后台java+springmvc实现异步表格局部刷新分页
- 两种动态代理的实现方式
- springMVC两种方式实现多文件上传及效率比较
- ASP EF框架，部分列查询。linq表达式和lamb表达式两种方式实现