云中烛火

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
用ajax的get和post方法 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <title>getAndPostExample.html</title>

<script language=javascript>
    var xmlHttp;

    function createXMLHttpRequest(){
    	try
        {
       // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
        }
     catch (e)
        {

      // Internet Explorer
       try
          {
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
       catch (e)
          {

          try
             {
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
          catch (e)
             {
             alert("您的浏览器不支持AJAX！");
             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="/ajax/GetAndPostExample?";
        queryString=queryString+createQueryString()+"&timeStamp="+new Date().getTime();
        xmlHttp.open("GET",queryString,true);
        xmlHttp.onreadystatechange=handleStateChange;
        xmlHttp.send(null);
    }

    function doRequestUsingPOST(){
        createXMLHttpRequest();
        var url="/ajax/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 firstname,middlename,and birthday:</h1>
  <table>
     <tbody>
        <tr>
           <td>First name:</td>
           <td><input type="text" id="firstName"/></td>
        </tr>
        
        <tr>
           <td>Middle name:</td>
           <td><input type="text" id="middleName"/></td>
        </tr>
        
        <tr>
           <td>birthday:</td>
           <td><input type="text" id="birthday"/></td>
        </tr>
     </tbody>
  </table>
  <form action="#">
     <input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();"/>
     <br/><br/>
     <input type="button" value="Send paramters using POST" onclick="doRequestUsingPOST();">
  </form>
  <br/>
  <h2>Server Response:</h2>
  <div id="serverResponse"></div>
  </body>
</html>

　　

posted on 2013-06-20 15:56  云中烛火  阅读(95)  评论(0)    收藏  举报