AJAX基础教程－4 GetAndPostExample

java 代码

package ajax.foundations_of_ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GetAndPostExample extends HttpServlet {
    protected void processRequest(HttpServletRequest request,
            HttpServletResponse response, String method)
            throws ServletException, IOException {
        // Set content type of the response to text/xml
        response.setContentType("text/html");
        // Get the user's input
        String firstName = request.getParameter("firstName");
        String middleName = request.getParameter("middleName");
        String birthday = request.getParameter("birthday");

        // Create the response text
        String responseText = "Hello " + firstName + " " + middleName
                + ". Your birthday is " + birthday + "." + " [Method: "
                + method + "]";
        // Write the response back to the browser
        PrintWriter out = response.getWriter();
        out.println(responseText);
        // Close the writer
        out.close();
    }

    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        // Process the request in method processRequest
        processRequest(request, response, "GET");
    }

    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        // Process the request in method processRequest
        processRequest(request, response, "POST");
    }
}

js 代码

<script type="text/javascript">
var xmlHttp;
//创建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();
        alert (queryString);
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.open("GET", queryString, true);
        xmlHttp.send(null);
    }

    function doRequestUsingPOST() {
        createXMLHttpRequest();
        var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
        var queryString = createQueryString();
        alert (url);
        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>