Ajax發送GET和POST的處理

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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基礎教程當筆記吧

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More