java实现Ajax程序例子（运用Servlet和JSP）五例子源码 Html部分 -

BabyDuncan

浏览: 584331 次
性别:
来自: 北京

最近访客更多访客>>

fww4022

AAsssss2222222

test_8teye1

yksky

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

java实现Ajax程序例子（运用Servlet和JSP）五例子源码 Html部分

博客分类：

javaEE

HTML Java Servlet JSP Ajax

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>getAndPostExamplel.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript">
var xmlHttp;
//创建XMLhttpRequest对象
function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

//生成传递到服务器的参数查询串，参数值由页面表单填写得到
function createQueryString() {
	var firstName = document.getElementById("firstName").value;
	var middleName = document.getElementById("middleName").value;
	var birthday = document.getElementById("birthday").value;
	var queryString = "firstName=" + firstName + "&middleName=" + middleName
			+ "&birthday=" + birthday;
	return queryString;
}

//点击按钮响应的Get方法主函数
//Get方法把参数值以名=值方式在xmlHttp.open("GET", queryString, true)中传递,queryString的形式为URL?参数名=值&参数名=值...;而xmlHttp.send(null);
function doRequestUsingGET() {
	createXMLHttpRequest();//第一步：创建XMLHttpRequest对象
	var queryString = "NameAndSchool?";
	queryString = queryString + createQueryString() + "&timeStamp="
			+ new Date().getTime();//第二步：定义传递的参数值字符串
	xmlHttp.open("GET", queryString, true);//第三步：建立与服务器的请求
	xmlHttp.onreadystatechange = handleStateChange;//第四步：监听状态-->转到监听状态函数    
	xmlHttp.send(null);//第五步：发送请求，并且立即返回
}

//点击按钮响应的POST方法主函数
//POST方法把参数值以名=值方式在xmlHttp.send(queryString)中传递,queryString的形式为参数名=值&参数名=值...;
function doRequestUsingPOST() {
	createXMLHttpRequest();//第一步：创建XMLHttpRequest对象
	var url = "NameAndSchool?timeStamp=" + new Date().getTime();
	var queryString = createQueryString();//第二步：定义传递的参数值字符串
	xmlHttp.open("POST", url, true);//第三步：建立与服务器的请求
	xmlHttp.onreadystatechange = handleStateChange;//第四步：监听状态-->转到监听状态函数
	xmlHttp.setRequestHeader("Content-Type",
			"application/x-www-form-urlencoded;");
	xmlHttp.send(queryString);//第五步：发送请求，并且立即返回
}

//监听状态函数
function handleStateChange() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			parseResults();//-->转到函数parseResults输出从服务器返的值
		}
	}
}

//在页面显示从服务器传来的结果
function parseResults() {
	var responseDiv = document.getElementById("serverResponse");
	//if(responseDiv.hasChildNodes()) {
	//responseDiv.removeChild(responseDiv.childNodes[0]);
	//}
	//var responseText = document.createTextNode(xmlHttp.responseText);//
	//responseDiv.appendChild(responseText);
	responseDiv.innerHTML = xmlHttp.responseText;
	alert(xmlHttp.responseText);
}
</script>
	</head>

	<body>
		<h1>
			Enter your first name, middle name, and birthday:
		</h1>
		<table>
			<tbody>
				<tr>
					<td>
						First name:
					</td>
					<td>
						<input type="text" id="firstName" />
				</tr>
				<tr>
					<td>
						Middle name:
					</td>
					<td>
						<input type="text" id="middleName" />
				</tr>
				<tr>
					<td>
						Birthday:
					</td>
					<td>
						<input type="text" id="birthday" />
				</tr>
			</tbody>
		</table>
		<!-- <form action="/NameAndSchool">  -->
		<input type="button" value="Send parameters using GET"
			onclick="doRequestUsingGET();" />
		<!--调用Get方法主函数-->
		<br />
		<br />
		<input type="button" value="Send parameters using POST"
			onclick="doRequestUsingPOST();" />
		<!--调用POST方法主函数-->
		<!--   </form>-->
		<br />
		<h2>
			Server Response:
		</h2>
		<div id="serverResponse"></div>
	</body>
</html>

参考图片：

查看图片附件

分享到：

java实现Ajax程序例子（运用Servlet和JSP ... | java实现Ajax程序例子（运用Servlet和JSP ...

2010-11-16 23:40
浏览 2144
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

java实现Ajax程序例子（运用Servlet和JSP）五例子源码 Html部分

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

java实现Ajax程序例子（运用Servlet和JSP）五 例子源码 Html部分

评论

发表评论

相关推荐

一些技术牛人的博客

Spring MVC 的请求参数获取的几种方法

Java版短网址(ShortUrl)的算法

Spring mvc与JKaptcha组合生成验证码

第一次使用resin的安装和配置问题

jsp页面跳转的方法

实验看看Servlet之间的跳转（dispatch-forward&sendRedirect）

读取web.xml文件中数据的三种方法

根据responseServlet生成图片验证码

通过request的请求获取客户端信息

firstServlet 写一个最基本的servlet程序

Spring的七大模块简介

Servlet获取客户端ip地址和mac地址

Servlet相比CGI的好处

include指令简介

关于foward和redirect的详细描述（比一般的要详细）

实验证明Servlet生命周期

Servlet生命周期的简单描述

Servlet获取上下文参数以及资源注入

servlet中web.xml的配置

最近访客更多访客>>

java实现Ajax程序例子（运用Servlet和JSP）五例子源码 Html部分