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

来源：互联网发布：啪到哭是什么体验知乎编辑：程序博客网时间：2024/06/05 08:17

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 blocke.printStackTrace();}}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {processRequest(request,response,"Post");} catch (Exception e) {// TODO Auto-generated catch blocke.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.运行效果：

需要注意的是：