AJAX基础教程－4 GetAndPostExample

java 代码

1. package ajax.foundations_of_ajax;   
2.   
3. import java.io.IOException;   
4. import java.io.PrintWriter;   
5.   
6. import javax.servlet.ServletException;   
7. import javax.servlet.http.HttpServlet;   
8. import javax.servlet.http.HttpServletRequest;   
9. import javax.servlet.http.HttpServletResponse;   
10.   
11. public class GetAndPostExample extends HttpServlet {   
12.     protected void processRequest(HttpServletRequest request,   
13.             HttpServletResponse response, String method)   
14.             throws ServletException, IOException {   
15.         // Set content type of the response to text/xml   
16.         response.setContentType("text/html");   
17.         // Get the user's input   
18.         String firstName = request.getParameter("firstName");   
19.         String middleName = request.getParameter("middleName");   
20.         String birthday = request.getParameter("birthday");   
21.            
22.         // Create the response text   
23.         String responseText = "Hello " + firstName + " " + middleName   
24.                 + ". Your birthday is " + birthday + "." + " [Method: "  
25.                 + method + "]";   
26.         // Write the response back to the browser   
27.         PrintWriter out = response.getWriter();   
28.         out.println(responseText);   
29.         // Close the writer   
30.         out.close();   
31.     }   
32.   
33.     protected void doGet(HttpServletRequest request,   
34.             HttpServletResponse response) throws ServletException, IOException {   
35.         // Process the request in method processRequest   
36.         processRequest(request, response, "GET");   
37.     }   
38.   
39.     protected void doPost(HttpServletRequest request,   
40.             HttpServletResponse response) throws ServletException, IOException {   
41.         // Process the request in method processRequest   
42.         processRequest(request, response, "POST");   
43.     }   
44. }   

js 代码

1. <script type="text/javascript">   
2. var xmlHttp;   
3. //创建xmlHttp对象   
4.     function createXMLHttpRequest() {   
5.         if (window.ActiveXObject) {   
6.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
7.         }   
8.         else if (window.XMLHttpRequest) {   
9.         xmlHttp = new XMLHttpRequest();   
10.         }   
11.     }   
12.   
13.     function createQueryString() {   
14.     var firstName = document.getElementById("firstName").value;   
15.     var middleName = document.getElementById("middleName").value;   
16.     var birthday = document.getElementById("birthday").value;   
17.     var queryString = "firstName=" + firstName + "&middleName=" + middleName   
18.     + "&birthday=" + birthday;   
19.     return queryString;   
20.     }   
21.        
22.     function doRequestUsingGET() {   
23.         createXMLHttpRequest();   
24.         var queryString = "GetAndPostExample?";   
25.         queryString = queryString + createQueryString()   
26.         + "&timeStamp=" + new Date().getTime();   
27.         alert (queryString);   
28.         xmlHttp.onreadystatechange = handleStateChange;   
29.         xmlHttp.open("GET", queryString, true);   
30.         xmlHttp.send(null);   
31.     }   
32.        
33.     function doRequestUsingPOST() {   
34.         createXMLHttpRequest();   
35.         var url = "GetAndPostExample?timeStamp=" + new Date().getTime();   
36.         var queryString = createQueryString();   
37.         alert (url);   
38.         xmlHttp.open("POST", url, true);   
39.         xmlHttp.onreadystatechange = handleStateChange;   
40.         xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");   
41.         xmlHttp.send(queryString);   
42.     }   
43.        
44. function handleStateChange() {   
45.     if(xmlHttp.readyState == 4) {   
46.         if(xmlHttp.status == 200) {   
47.             parseResults();   
48.         }   
49.     }   
50. }   
51.   
52.     function parseResults() {   
53.         var responseDiv = document.getElementById("serverResponse");   
54.         if(responseDiv.hasChildNodes()) {   
55.         responseDiv.removeChild(responseDiv.childNodes[0]);   
56.     }   
57.     var responseText = document.createTextNode(xmlHttp.responseText);   
58.     responseDiv.appendChild(responseText);   
59.     }   
60. </script>