JAva実装Ajaxプログラム例(サーブレットとJSPを用いた)5例ソースコードHtml部分

4907 ワード

<!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>
参考画像:
linuxは占有ポートを表示しkillを落とす
Bound methods注意