getAndPostExample.html-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_9891/article/details/81692310

本文通过一个示例展示了如何使用JavaScript中的GET和POST方法发送请求数据到服务器，并介绍了如何解析服务器返回的响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子来源：《Ajax 基础教程》金灵等译这本书非常不错

getAndPostExample.html


<html>
<head>
<title>Sending Request Data Using GET and POST </title>
<script type="text/javascript">
var xmlHttp;

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;
}

function doRequestUsingGET() {
	createXMLHttpRequest();
	var queryString = "GetAndPostExample?";
	queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open("GET", queryString, true);
	xmlHttp.send(null);
}

function doRequestUsingPOST() {
	createXMLHttpRequest();
	var url = "GetAndPostExample?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();
		}
	}
}

function parseResults() {
	var responseDiv = document.getElementById("serverResponse");
	if(responseDiv.hasChildNodes()) {
		responseDiv.removeChild(responseDiv.childNodes[0]);
	}
	var responseText = document.createTextNode(xmlHttp.responseText);
	responseDiv.appendChild(responseText);
}
</script>
</head>
<body>
<form action="#" >
	<h1>Enter your first name, middle name, and birthday:</h1>
	<table>
		<tbody>
			<tr>
				<td>First name:</td>
				<td><input type="text" id="firstName" /></td>
			</tr>
			<tr>
				<td>Middle name:</td>
				<td><input type="text" id="middleName" /></td>
			</tr>
			<tr>
				<td>Birthday:</td>
				<td><input type="text" id="birthday" /></td>
			</tr>
		</tbody>
	</table>
	<input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();" />
	<br />
	<br />
	<input type="button" value="Send parametters using POST" onclick="doRequestUsingPOST();" />
</form>
<br />
<h2>Server Response:</h2>
<div id="serverResponse"></div>
</body>
</html>