例子来源：《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>
分享到：
相关推荐
在"GetAndPostExample"中，我们有两个主要的文件：`GetAndPostExample.java`和`getAndPostExample.jsp`。前者是服务器端的Java代码，后者是客户端的JSP页面。 1. **服务器端 - GetAndPostExample.java** `...
例如，`getAndPostExample.html`可能是一个示例，演示了GET和POST请求在处理缓存时的区别。GET请求通常会被缓存，而POST请求通常不会，因为POST请求通常用于提交数据，不适用于缓存。理解这些差异对于优化应用性能和...
登录后，选择"Applications" > "Deploy"，然后浏览并上传你的"getAndPostExample.war"文件。最后，点击"Deploy"按钮完成部署。 步骤四：验证部署 部署成功后，可以通过访问URL...
在 MyEclipse 中，实例还包括一个名为 `GetAndPostExample.java` 的 Servlet 文件，该文件是服务器端的处理程序，它接收 Ajax 请求，处理数据，然后返回响应。Servlet 接收到 GET 或 POST 请求后，会根据请求类型...
var url = "GetAndPostExample?" + queryString + "&timeStamp=" + new Date().getTime(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", url, true); xmlHttp.send(null); } ``` -...