DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax發送GET和POST的處理
Ajax發送GET和POST的處理
編輯: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>

<form action="#">
  <input type="button" value="發送GET請求" />
  <br /><br />
 
  <input type="button" value="發送POST請求" />
</form>

<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() {
  }
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved