使用Ajax的Get和Post获取信息的入门示例

1.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;
}

function doRequestUsingGET() {
    createXMLHttpRequest();
    
    var queryString = "GetAndPostExample?";
    queryString = queryString + createQueryString() 
        + "&timeStamp=" + new Date().getTime();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET",queryString,true);
    xmlHttp.send(null);
}

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>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>

2.GetAndPostExample .java作为服务器端的控制代码：

package com.wch.ajax.servlet;

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;

/**
 * Servlet implementation class GetAndPostExample
 */
public class GetAndPostExample extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	protected void processRequest(HttpServletRequest request,HttpServletResponse response,String method) throws Exception
	{
		response.setContentType("text/html");
		String firstName = request.getParameter("firstName");
		String middleName = request.getParameter("middleName");
		String birthday = request.getParameter("birthday");
		
		String responseText = "Hello"+firstName+" "+middleName+"<br/>"+"your birthday is :"+birthday+"<br/>"+"Method :"+method;
		PrintWriter out = response.getWriter();
		out.println(responseText);
		System.out.println(responseText);
		out.close();
	}
    
	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
		try {
			processRequest(request,response,"Get");
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	
	protected void doPost(HttpServletRequest request,"Post");
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

}

3.web.xml配置文件：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <display-name>Ajax</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  	<servlet-name>getAndPostExample</servlet-name>
  	<servlet-class>com.wch.ajax.servlet.GetAndPostExample</servlet-class>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>getAndPostExample</servlet-name>
  	<url-pattern>/GetAndPostExample</url-pattern>
  </servlet-mapping>
  
</web-app>

4.运行效果：

需要注意的是：

使用Ajax的Get和Post获取信息的入门示例

相关文章