Chinaunix首页 | 论坛 | 博客

天空从何开始hzm.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

tkchks

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

全部博文（245）

文章存档

2015年（2）

2014年（26）

2013年（41）

2012年（40）

2011年（134）

2010年（2）

我的朋友
最近访客
推荐博文
相关博文
Ajax与服务器通信：发送请求和处理响应(2/4)

分类： 系统运维

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();

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

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

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

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


  1. package ajax.study;

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

  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;

  11. public class GetAndPostExample extends HttpServlet {

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


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

  48.     public void doPost(HttpServletRequest request, HttpServletResponse response)
  49.             throws ServletException, IOException {
  50.         //process the request in method processRequest
  51.         processRequest(request,response,"POST");
  52.     }

  54.     

  56. }




阅读(1942) | 评论(0) | 转发(1) |
0

上一篇：ajax 与XMLHttpRequest对象(1/4)

下一篇：Ajax实现验证(3/4)

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6