求ajax+jsp的局部刷新例子

shenhuazuoluo 2009-09-16 05:05:46

求ajax+jsp的局部刷新例子

...全文

1590 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

haoren_e 2009-10-24

打赏
举报

正确[Quote=引用 4 楼 swandragon 的回复:]
放到web项目的根目录下就可以运行
ajaxTest.jsp
HTML code<%@ page language="java" pageEncoding="UTF-8"%><%String path= request.getContextPath();String basePath= request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><basehref="<%=basePath%>"><title>My JSP 'ajaxIndex.jsp' starting page</title><metahttp-equiv="pragma" content="no-cache"><metahttp-equiv="cache-control" content="no-cache"><metahttp-equiv="expires" content="0"><metahttp-equiv="keywords" content="keyword1,keyword2,keyword3"><metahttp-equiv="description" content="This is my page"><scripttype="text/javascript">function test(){var url="getData.jsp?username="+document.getElementById("username").value;
sendRequest(url);
}var XMLHttpReq=false;//创建XMLHttpRequest对象function createXMLHttpRequest() {if(window.XMLHttpRequest) {//Mozilla 浏览器 XMLHttpReq=new XMLHttpRequest();
}elseif (window.ActiveXObject) {// IE浏览器try {
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {try {
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {}
}
}
}//发送请求函数function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url,true);
XMLHttpReq.onreadystatechange= processResponse;//指定响应函数 XMLHttpReq.send(null);// 发送请求}// 处理返回信息函数function processResponse() {if (XMLHttpReq.readyState==4) {// 判断对象状态if (XMLHttpReq.status==200) {// 信息已经成功返回，开始处理信息var result= XMLHttpReq.responseText;
document.getElementById("data").innerHTML= result;
}else {//页面不正常 window.alert("您所请求的页面有异常。");
}
}
}</script></head><body><table><tr><td>ajax提取数据：</td></tr><tr><td><divid="data">原始数据</div></td></tr><tr><td><inputtype="text" name="username" id="username"/></td></tr><tr><td><inputtype="button" value="submit" onclick="test()"/></td></tr></table></body></html>
getData.jsp
HTML code<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
out.print("username is :"+request.getParameter("username"));%>
[/Quote]

swandragon 2009-10-24

打赏
举报

放到web项目的根目录下就可以运行
ajaxTest.jsp



<%@ page language="java" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'ajaxIndex.jsp' starting page</title>

    

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">    

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->



<script type="text/javascript">

function test(){

	var url = "getData.jsp?username="+document.getElementById("username").value;

	sendRequest(url);

}	

var XMLHttpReq = false;

//创建XMLHttpRequest对象       

function createXMLHttpRequest() {

	if(window.XMLHttpRequest) { //Mozilla 浏览器

		XMLHttpReq = new XMLHttpRequest();

	}

	else if (window.ActiveXObject) { // IE浏览器

		try {

			XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {

			try {

				XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

			} catch (e) {}

		}

	}

}

//发送请求函数

function sendRequest(url) {

	createXMLHttpRequest();

	XMLHttpReq.open("GET", url, true);

	XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

	XMLHttpReq.send(null);  // 发送请求

}

// 处理返回信息函数

function processResponse() {

	if (XMLHttpReq.readyState == 4) { // 判断对象状态

		if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

			var result = XMLHttpReq.responseText;    

			document.getElementById("data").innerHTML = result;     

		} else { //页面不正常

			window.alert("您所请求的页面有异常。");

		}

	}

}

</script>

  </head> 

  <body>

    <table>

    	<tr>

    		<td>ajax提取数据：</td>

    	</tr>

    	<tr><td><div id="data">原始数据</div></td></tr>

    	<tr><td><input type="text" name="username" id="username"/></td></tr>

    	<tr><td><input type="button" value="submit" onclick="test()"/></td></tr>

    </table>

  </body>

</html>

getData.jsp



<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

out.print("username is :"+request.getParameter("username"));

%>

zhaojian19910220 2009-10-24

打赏
举报

我也在找啊

ouwarmth 2009-09-16

打赏
举报

ajax+jsp实现局部刷新，还要通过js去实现。。。。
你可以在jsp页面中设置事件并由js进行响应处理，在js中应用ajax技术实现异步处理，将业务交给ajax处理后返回到js，最后再通过js将处理结果显示到jso页面就可以了。

AZPVvnhcMuRLg5IlSzGk 2009-09-16

打赏
举报

用ajax在后台做下查询，或者删除，或者更新，新增操作，然后传个参数返回前台，在用JS操作DOM元素就可以了

jquery+jsp学习局部动态刷新用简单的例子来教会你如何使用ajax 还用例子来说明如何链接数据库下进行动态刷新

ajaxanywhere 刷新局部的例子。，返回一个list，更新jsp中的指定区域的list

JSP中Ajax+Servlet极简实操入门，内容包括：IDEA环境下Servlet完整示例步骤一、IDEA环境下Servlet完整示例步骤二、IDEA环境下Servlet完整示例步骤三、IDEA环境下Servlet完整示例步骤四、ajax应用举例步骤一（实体类...

jquery css菜单隐藏、显示 局部刷新小例子

AjaxWeb 基于Ajax的Web 2.0模式的刷新模式 AsyncAjaxSample Ajax异步调用的完整示例第2章（/C02/） 2.1.htm 3段JS使用形式 2.2.htm 不同浏览器使用“<noscript></noscript>” 2.3....

Web 开发

81,092

社区成员

341,717

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章