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

最新推荐文章于 2017-11-18 15:58:43 发布

babyduncan

最新推荐文章于 2017-11-18 15:58:43 发布

阅读量95

点赞数

分类专栏： javaEE 文章标签： HTML Java Servlet JSP Ajax

本文链接：https://blog.csdn.net/babyduncan/article/details/83765597

版权

javaEE 专栏收录该内容

37 篇文章 0 订阅

订阅专栏


<!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>