Ajax发送GET和POST的处理

2022-07-15 80酷酷网 80kuku.com

　　ajax 业务逻辑：页面三个文本框，分别要求输入姓，中间名和生日。两个按钮处理GET和POST请求，显示输入的结果。

页面：getAndPostExample.html

<% page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
用GET和POST发送页面请求
</title>
<script type="text/javascript">
//xmlHttpRequest对象
var xmlHttp;

        //创建xmlHttpRequest对象
        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 quertString = "firstName=" + firstName + "&middleName=" + middleName
                + "&birthday=" + birthday;

                return quertString;
        }

        //处理GET请求
        function doRequestUsingGET(){
        createXMLHttpRequest();

                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;
                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>
<h1>
输入你的姓，中间名，和生日:
</h1>
<table>
<tbody>
<tr>
            <td>姓:</td>
            <td><input type="text" id="firstName"/>
</tr>
        <tr>
            <td>中间名:</td>
            <td><input type="text" id="middleName"/>
</tr>
          <tr>
            <td>生日：</td>
            <td><input type="text" id="birthday"/>
</tr>
</tbody>
</table>

<br />
<h2>
服务器响应：
</h2>
<div id="serverResponse">
</div>
</body>
</html>

服务器端处理

GetAndPostExample.java

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;

public class GetAndPostExample
extends HttpServlet {
private static final String CONTENT_TYPE = "text/html; charset=GBK";

//处理方法
protected void processRequest(HttpServletRequest request,
                                HttpServletResponse response, String method) throws
      ServletException, IOException {
    //设置响应内容类别
    response.setContentType(CONTENT_TYPE);

    //得到参数
    String firstName = request.getParameter("firstName");
    String middleName = request.getParameter("middleName");
    String birthday = request.getParameter("birthday");

    //创建响应文本
    String responseText = "您好 " + firstName + " " + middleName + ". 您的生日是" + birthday
        + "." + " [传参方法: " + method + "]";

    //传回浏览器
    PrintWriter out = response.getWriter();
    out.println(responseText);

    //关闭写出流
    out.close();
}

//Initialize global variables
public void init() throws ServletException {
}

//处理GET方法
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
      ServletException, IOException {
    processRequest(request,response,"GET");
}

//处理POST方法
public void doPost(HttpServletRequest request, HttpServletResponse response) throws
      ServletException, IOException {
    processRequest(request,response,"POST");
}

//Clean up resources
public void destroy() {
}
}

参考：Ajax基础教程当笔记吧