Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2566427
  • 博文数量: 245
  • 博客积分: 4125
  • 博客等级: 上校
  • 技术积分: 3113
  • 用 户 组: 普通用户
  • 注册时间: 2009-03-25 23:56
文章分类

全部博文(245)

文章存档

2015年(2)

2014年(26)

2013年(41)

2012年(40)

2011年(134)

2010年(2)

分类: 系统运维

2011-09-06 13:27:57


要想充分发挥ajax的强大功能,这要求你向服务器发送一些上下文数据。

XMLHttpRequest对象的工作与以往惯用的HTTP技术(GET和POST)是一样的。

在下面的例子中,主要介绍这两种请求方式。
其中GET请求,我们向应用程序发送了3个参数:firstName,middleName,birthday.
其中资源URL和参数之间要用一个问号(?),问号后面就是名/值对。其采用name=value的形式,各个名值对之间用与(&)号分隔。
如:

服务器知道如何获取URL中的命名参数。

采用POST方法向服务器发送命名参数时,与采用GET时类似。POST方法也会将参数编码为名/值对。
这两种方式的主要区别在于,POST方法将参数串放在请求体中发送,而GET方法是将参数追加到URL中发送。

该示例有两个文件,其一为getandpost.html,另一个为servlet GetAndPostExample.java

详细代码如下:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <title>getAndPost.html</title>
  5.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <script language="javascript" type="text/javascript">
  7.   var xmlHttp;
  8.   function createXMLHttpRequest(){
  9.     if(window.ActiveXObject)
  10.       {
  11.          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  12.       }
  13.       else if(window.XMLHttpRequest)
  14.       {
  15.         xmlHttp = new XMLHttpRequest();
  16.       }else{
  17.         alert("浏览器不支持XMLHttpRequest对象");
  18.       }
  19.   }
  20.   
  21.   function createQueryString(){
  22.     var firstName = document.getElementById("firstName").value;//document.getElementById("firstName").value;
  23.     //alter(document.getElementById("firstName").value);
  24.     var middleName = document.getElementById("middleName").value;
  25.     var birthday = document.getElementById("birthday").value;
  26.   //var birthday = document.getElementByID("birthday").value; //这句是错的!!!因为ID的d要小写!!!!!
  27.     
  28.     var queryString = "firstName="+ firstName + "&middleName="+ middleName + "&birthday=" + birthday;
  29.     //alert(queryString);
  30.     return queryString;
  31.   }
  32.   
  33.   function doRequestUsingPOST(){
  34.     createXMLHttpRequest();
  35.     
  36.     var url = "servlet/GetAndPostExample?timeStamp=" + new Date().getTime();
  37.     var queryString = createQueryString();
  38.     xmlHttp.open("POST",url,true);
  39.    
  40.     xmlHttp.onreadystatechange = handleStateChange;
  41.    
  42.     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
  43.     xmlHttp.send(queryString);
  44.   }
  45.    function doRequestUsingGET(){
  46.     
  47.      createXMLHttpRequest();

  48.      
  49.        var queryString = "servlet/GetAndPostExample?";
  50.      //alert(createQueryString());
  51.      queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();
  52.      alert("oo");
  53.      xmlHttp.onreadystatechange = handleStateChange;
  54.      xmlHttp.open("GET",queryString,true);
  55.     
  56.      xmlHttp.send(null);
  57.   }
  58.   function handleStateChange(){
  59.      if(xmlHttp.readyState == 4){
  60.         if(xmlHttp.status == 200){
  61.            parseResult();
  62.            alert("OK");
  63.         }
  64.      }
  65.   }
  66.   
  67.   function parseResult(){
  68.     var responseDiv = document.getElementById("serverResponse");
  69.     if(responseDiv.hasChildNodes()){
  70.       responseDiv.removeChild(responseDiv.childNodes[0]);
  71.     }
  72.     var responseText = document.createTextNode(xmlHttp.responseText);
  73.     responseDiv.appendChild(responseText);
  74.   }
  75.   
  76.   function test(){
  77.   
  78.     alert(document.getElementById("firstName").value);
  79.   }
  80.   </script>
  81.     </head>

  82.     <body>
  83.         <h2>
  84.             Enter your first name, middle name ,and birthday:
  85.         </h2>
  86.         
  87.         <form action="#" id="form1" name="form1" >
  88.          <table>
  89.             <tbody>
  90.                 <tr>
  91.                     <td>
  92.                         First Name:
  93.                     </td>
  94.                     <td>
  95.                         <input type="text" id="firstName" value="Harry" />
  96.                     </td>
  97.                 </tr>
  98.                 <tr>
  99.                     <td>
  100.                         Middle Name:
  101.                     </td>
  102.                     <td>
  103.                         <input type="text" id="middleName" value="Poter" />
  104.                     </td>
  105.                 </tr>
  106.                 <tr>
  107.                     <td>
  108.                         Birthday:
  109.                     </td>
  110.                     <td>
  111.                         <input type="text" id="birthday" value="2020-8-9" />
  112.                     </td>
  113.                 </tr>
  114.             </tbody>

  115.         </table>
  116.             <input type="button" value="Send parameters using GET"
  117.                 onclick="doRequestUsingGET();" />
  118.             <input type="button" value="Send parameters using POST"
  119.                 onclick="doRequestUsingPOST()" />
  120.          <input type="button" value="Test"
  121.                 onclick="return test()" />

  122.         </form>
  123.         <br />
  124.         <h2>
  125.             Server Response:
  126.         </h2>
  127.         <div id="serverResponse">
  128.             这里将会显示来自服务器端的相应信息
  129.         </div>
  130.     </body>
  131. </html>


  1. package ajax.study;

  2. import java.io.IOException;
  3. import java.io.PrintWriter;

  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;

  8. public class GetAndPostExample extends HttpServlet {

  9.     
  10.     protected void processRequest(HttpServletRequest request,HttpServletResponse response,String method)
  11.     throws ServletException, IOException{
  12.         //set content type of the response to text/xml
  13.         response.setContentType("text/xml");
  14.         
  15.         //get the user's input
  16.         String firstName = request.getParameter("firstName");
  17.         String middleName = request.getParameter("middleName");
  18.         String birthday = request.getParameter("birthday");
  19.         
  20.         //Create the response text
  21.         String responseText = "hello "+ firstName + " " + middleName +". Your birthday is " + birthday +"."
  22.         + "[Method: " + method + "]";
  23.         
  24.         //write the response back to the brower
  25.         PrintWriter out = response.getWriter();
  26.         out.println(responseText);
  27.         
  28.         //close the writer
  29.         out.close();
  30.         
  31.         
  32.     }
  33.     


  34.     
  35.     public void doGet(HttpServletRequest request, HttpServletResponse response)
  36.             throws ServletException, IOException {
  37.         //process the request in method processRequest
  38.         processRequest(request,response,"GET");
  39.         
  40.     }

  41.     public void doPost(HttpServletRequest request, HttpServletResponse response)
  42.             throws ServletException, IOException {
  43.         //process the request in method processRequest
  44.         processRequest(request,response,"POST");
  45.     }

  46.     

  47. }




阅读(1950) | 评论(0) | 转发(1) |
给主人留下些什么吧!~~