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); } 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" /> <br/><br/> <input type="button" value="Send parameters using POST" /> </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 + "." + " "; //向浏览器写回响应信息 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"); }} 运行结果：
http://dl.iteye.com/upload/attachment/157624/8b49473b-3065-3e6b-ad3f-7801b7385e87.gif
页:
[1]