5、GET与POST方式发送请求参数——ajax基础笔记
GET与POST方式发送请求参数
getAndPostExample.html清单：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
}
//GET方式发送异步请求
function doRequestUsingGET() {
createXMLHttpRequest();
//请求一个Servlet
var queryString = "GetAndPostExample?";
//以防读取缓存页面，所以每次发送时多带一个时间参数
queryString = queryString + createQueryString()
+ "&timeStamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", queryString, true);
xmlHttp.send(null);
}
//POST方式发送请求
function doRequestUsingPOST() {
createXMLHttpRequest();
//以防读取缓存页面，所以每次发送时多带一个时间参数
var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
//POST方式时还要设置以下HTTP头信息
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//POST方式时参数用send方法发送出去
xmlHttp.send(queryString);
}
//回调用方法
function handleStateChange() {
//状态为4时表示请求已完成
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>
<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="#">
<input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();"/>
<br/><br/>
<input type="button" value="Send parameters using POST" onclick="doRequestUsingPOST();"/>
</form>
<br/>
<h2>Server Response:</h2>
<!-- 存放结果区 -->
<div id="serverResponse"></div>
</body>
</html>
GetAndPostExample.java清单：
package ajaxbook.chap3;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class GetAndPostExample extends HttpServlet {
protected void processRequest(HttpServletRequest request,
HttpServletResponse response, String method)
throws ServletException, IOException {
//设置响应头类型text/xml
response.setContentType("text/xml");
//获取用户输入参数
String firstName = request.getParameter("firstName");
String middleName = request.getParameter("middleName");
String birthday = request.getParameter("birthday");
//创建返回文本
String responseText = "Hello " + firstName + " " + middleName
+ ". Your birthday is " + birthday + "."
+ " [Method: " + method + "]";
//向浏览器写回响应信息
PrintWriter out = response.getWriter();
out.println(responseText);
//关闭流
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//处理GET请求
processRequest(request, response, "GET");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//处理POST请求
processRequest(request, response, "POST");
}
}
运行结果：
