5、GET与POST方式发送请求参数——ajax基础笔记

junJZ_2008

浏览: 1335907 次
性别:
来自: 湖南澧縣

最近访客更多访客>>

fushangan

xiaoyuer9953

qq234766237

coollyj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax Servlet JavaScript XHTML 浏览器

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

运行结果：