`
刘琛颖
  • 浏览: 50237 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
dyu2012
社区版块
存档分类
最新评论

POST方式发送ajax请求详解(转)

AjaxJSPHTMLJavaScriptJ# 
阅读更多

原贴地址: http://04101334.iteye.com/blog/637695

 

在开始讲解之前，我假设你已经对ajax的基本原理有一定的理解，如果还有哪位朋友不怎么了解的话，请点击这里 。

 

  • post和get

首先我们先讲解下post和get发送方式的特点， GET 方法提交数据不安全，数据置于请求行，客户端地址栏可见; GET 方法提交的数据大小限制在255 个字符之内。为了验证以上说法，我们接下来做个试验。首先看如下代码：

 

Html代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <title>test-get_post</title>  
  5. </head>  
  6. <body>  
  7. <form name="Login" method="get" action="test.jsp">  
  8. User ID: <input type="text" name="name"><br>  
  9. Password: <input type="password" name="password">  
  10. <input type="HIDDEN" name="from" value="welcome">  
  11. <input type="submit" value="submit">  
  12. </form>  
  13. </body>  
  14. </html>   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test-get_post</title>
</head>
<body>
<form name="Login" method="get" action="test.jsp">
User ID: <input type="text" name="name"><br>
Password: <input type="password" name="password">
<input type="HIDDEN" name="from" value="welcome">
<input type="submit" value="submit">
</form>
</body>
</html>

 接着我们输入一些数据，然后点击submit，如下图：


                                               图1-1
 接下来我们再来看一下提交的这个http请求的详细信息：


                                                                      图1-2

 由于上图我们可以看出，使用get方式发送的http请求，参数都是直接跟在URL后面清晰可见的，而且我们也不难看出，该http请求的body部分也是空的，只有head部分显示了一个http的基本信息。关于 GET 方法提交的数据大小是否限制在255 个字符之内，这里就不再做实验了，大家可以自己去实验。

 

 

接下来我们来看看POST 方法是如何提交数据的，POST方法提交的数据置于消息主体内，客户端不可见， POST 方法提交的数据大小没有限制。我们对以上html稍做修改如下：

Html代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <title>test-get_post</title>  
  5. </head>  
  6. <body>  
  7. <form name="Login" method="Post" action="test.jsp">  
  8. User ID: <input type="text" name="name"><br>  
  9. Password: <input type="password" name="password">  
  10. <input type="HIDDEN" name="from" value="welcome">  
  11. <input type="submit" value="submit">  
  12. </form>  
  13. </body>  
  14. </html>   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test-get_post</title>
</head>
<body>
<form name="Login" method="Post" action="test.jsp">
User ID: <input type="text" name="name"><br>
Password: <input type="password" name="password">
<input type="HIDDEN" name="from" value="welcome">
<input type="submit" value="submit">
</form>
</body>
</html>

 接着我们输入一些数据，然后点击submit，如下图：

图1-3

 

接下来我们再来看一下提交的这个http请求的详细信息：


图1-4

由上图我们可以看出，使用post方式发送的http请求，参数不是跟在URL后面的，而是存放在http请求的body部分的，关于请求参数在http请求body中存放的形式类似get方式，见下图：


图1-5

 

  • 进入正题

在简单的讲述了get和post方式的特点后，我们正式进入正题，即如何以post形式向server发送ajax请求，在发送请求之前，第一个我们需要解决的问题就是如何去搜集并组织指定form表单中的数据。

 

一般来说form中存放数据的控件主要是<input>，而这个<input>type很多，如‘submit’，‘hidden’， ‘password’， ‘text’，‘checkbox’， ‘radio’等。因此第一步我们要做的就是先写一个方法，将将form中各种类型的<input>将数据值给抠出来。具体见如下代码：

Js代码 复制代码
  1. //获取指定form中的所有的<input>对象   
  2. function getElements(formId) {   
  3.     var form = document.getElementById(id);   
  4.     var elements = new Array();   
  5.     var tagElements = form.getElementsByTagName('input');   
  6.     for (var j = 0; j < tagElements.length; j++)   
  7.         elements.push(tagElements[j]);   
  8.     return elements;   
  9. }  
//获取指定form中的所有的<input>对象
function getElements(formId) {
    var form = document.getElementById(id);
    var elements = new Array();
	var tagElements = form.getElementsByTagName('input');
    for (var j = 0; j < tagElements.length; j++)
        elements.push(tagElements[j]);
    return elements;
}

 

接着我们需要获取每个input对象的name-value对，代码如下：

Js代码 复制代码
  1. function inputSelector(element) {   
  2.   if (element.checked)   
  3.      return [element.name, element.value];   
  4. }   
  5.      
  6. function input(element) {   
  7.     switch (element.type.toLowerCase()) {   
  8.       case 'submit':   
  9.       case 'hidden':   
  10.       case 'password':   
  11.       case 'text':   
  12.         return [element.name, element.value];   
  13.       case 'checkbox':   
  14.       case 'radio':   
  15.         return inputSelector(element);   
  16.     }   
  17.     return false;   
  18. }  
function inputSelector(element) {
  if (element.checked)
     return [element.name, element.value];
}
  
function input(element) {
    switch (element.type.toLowerCase()) {
      case 'submit':
      case 'hidden':
      case 'password':
      case 'text':
        return [element.name, element.value];
      case 'checkbox':
      case 'radio':
        return inputSelector(element);
    }
    return false;
}

 

接着我们就可以将所有这些input对象中的name-value对以图1-5中POSTDATA那样的格式组织起来。代码如下：

 

Js代码 复制代码
  1. function serializeElement(element) {   
  2.     var method = element.tagName.toLowerCase();   
  3.     var parameter = input(element);   
  4.   
  5.     if (parameter) {   
  6.       var key = encodeURIComponent(parameter[0]);   
  7.       if (key.length == 0) return;   
  8.   
  9.       if (parameter[1].constructor != Array)   
  10.         parameter[1] = [parameter[1]];   
  11.          
  12.       var values = parameter[1];   
  13.       var results = [];   
  14.       for (var i=0; i<values.length; i++) {   
  15.         results.push(key + '=' + encodeURIComponent(values[i]));   
  16.       }   
  17.       return results.join('&');   
  18.     }   
  19.  }   
  20.      
  21. function serializeForm(formId) {   
  22.     var elements = getElements(formId);   
  23.     var queryComponents = new Array();   
  24.   
  25.     for (var i = 0; i < elements.length; i++) {   
  26.       var queryComponent = serializeElement(elements[i]);   
  27.       if (queryComponent)   
  28.         queryComponents.push(queryComponent);   
  29.     }   
  30.   
  31.     return queryComponents.join('&');   
  32. }  
function serializeElement(element) {
    var method = element.tagName.toLowerCase();
    var parameter = input(element);

    if (parameter) {
      var key = encodeURIComponent(parameter[0]);
      if (key.length == 0) return;

      if (parameter[1].constructor != Array)
        parameter[1] = [parameter[1]];
	  
	  var values = parameter[1];
	  var results = [];
	  for (var i=0; i<values.length; i++) {
	  	results.push(key + '=' + encodeURIComponent(values[i]));
	  }
      return results.join('&');
    }
 }
  
function serializeForm(formId) {
    var elements = getElements(formId);
    var queryComponents = new Array();

    for (var i = 0; i < elements.length; i++) {
      var queryComponent = serializeElement(elements[i]);
      if (queryComponent)
        queryComponents.push(queryComponent);
    }

    return queryComponents.join('&');
}

 

 

接下来我们来创建一个form表单，里面包含各种input控件，代码如下：

Html代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <%@page import="java.util.Enumeration"%>  
  3. <html>  
  4. <head>  
  5. <title>test-get_post</title>  
  6. <script src="demo.js" type="text/javascript"></script>  
  7. <script type="text/javascript">  
  8. <!--//   
  9. function getFormInfo() {   
  10.     var postBody = serializeForm('Login');   
  11.     var url = document.getElementById('Login').action;   
  12.     var request = getXMLHttpRequest();   
  13.     request.open("post", url, true);   
  14.     request.onreadystatechange = updatePage;   
  15.        request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');   
  16.     request.send(postBody);   
  17. }   
  18.   
  19. function updatePage(obj) {   
  20.     var request  = obj.target;   
  21.     if (request.readyState == 4) {   
  22.     if (request.status == 200) {   
  23.     var response = request.responseText;   
  24.         alert(response);   
  25.     } else   
  26.         alert("status is " + request.status);   
  27.     }   
  28. }   
  29.   
  30.   
  31.   
  32. //-->  
  33. </script>  
  34. </head>  
  35. <body>  
  36. <form id="Login" name="Login" method="post" action="result.jsp">  
  37. User ID: <input type="text" name="name"><br>  
  38. Password: <input type="password" name="password"><br>  
  39. sex:<input type="radio" name="sex" value="man"> man <input type="radio" name="sex" value="woman"> woman<br>  
  40. interest:<input type="checkbox" name="interest" value="piu">PIU <input type="checkbox" name="interest" value="dss">DSS <input type="checkbox" name="interest" value="ddr">DDR<br>  
  41. <input type="hidden" name="from" value="welcome"><br>  
  42. <input type="button" name="submit" value="submit" onclick="getFormInfo();">  
  43. </form>  
  44. </body>  
  45. </html>   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%@page import="java.util.Enumeration"%>
<html>
<head>
<title>test-get_post</title>
<script src="demo.js" type="text/javascript"></script>
<script type="text/javascript">
<!--//
function getFormInfo() {
	var postBody = serializeForm('Login');
	var url = document.getElementById('Login').action;
	var request = getXMLHttpRequest();
	request.open("post", url, true);
	request.onreadystatechange = updatePage;
       request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	request.send(postBody);
}

function updatePage(obj) {
	var request  = obj.target;
	if (request.readyState == 4) {
	if (request.status == 200) {
	var response = request.responseText;
		alert(response);
	} else
		alert("status is " + request.status);
	}
}



//-->
</script>
</head>
<body>
<form id="Login" name="Login" method="post" action="result.jsp">
User ID: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
sex:<input type="radio" name="sex" value="man"> man <input type="radio" name="sex" value="woman"> woman<br>
interest:<input type="checkbox" name="interest" value="piu">PIU <input type="checkbox" name="interest" value="dss">DSS <input type="checkbox" name="interest" value="ddr">DDR<br>
<input type="hidden" name="from" value="welcome"><br>
<input type="button" name="submit" value="submit" onclick="getFormInfo();">
</form>
</body>
</html>

 

另外值得注意的是，上述代码这句

 

request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

 

非常重要，没有这句的话，server就无法正常读取postdata中的任何数据，因为如果在 HTTP 流中传递空白和标点之类的字符，则它们在接收端可能会被错误地解释。URL 编码将 postdata 中不允许使用的字符转换为等效字符实体；URL 解码会反转此编码过程。例如，当嵌入到要在 URL 中传输的文本块中时，字符 < 和 > 分别被编码为 %3c 和 %3e。

 

接着我看一下接收端result.jsp的代码：

Html代码 复制代码
  1. <?xml version="1.0" encoding="ISO-8859-1" ?>  
  2. <%@page import="java.util.Enumeration"%>  
  3. <%@ page language="java" contentType="text/xml; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>  
  4. <%   
  5.     String name = request.getParameter("name");   
  6.     String pwd = request.getParameter("password");   
  7.     String sex = request.getParameter("sex");   
  8.     String[] interest = request.getParameterValues("interest");   
  9.     String from = request.getParameter("from");   
  10. %>  
  11.   
  12. <validation>  
  13.     <name><%=name %></name>  
  14.     <password><%=pwd %></password>  
  15.     <sex><%=sex %></sex>  
  16.     <interest><%   
  17.         for (int i=0; i<interest.length; i++)   
  18.             out.print(interest[i] + " ");   
  19.     %></interest>  
  20.     <from><%=from %></from>  
  21. </validation>   
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/xml; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%
	String name = request.getParameter("name");
	String pwd = request.getParameter("password");
	String sex = request.getParameter("sex");
	String[] interest = request.getParameterValues("interest");
	String from = request.getParameter("from");
%>

<validation>
	<name><%=name %></name>
	<password><%=pwd %></password>
	<sex><%=sex %></sex>
	<interest><%
		for (int i=0; i<interest.length; i++)
			out.print(interest[i] + " ");
	%></interest>
	<from><%=from %></from>
</validation>

 最后，我们点击submit，看一下输出结果：



 到这里就差不多结束了，希望这篇文章能给大家带来一些帮助和启发，谢谢大家观赏。最后附上源码：

分享到：
| 体验J2SE 1.5新特性之增强For循环
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    实例详解Android Webview拦截ajax请求

    通过这种方式，我们就可以截获 Ajax 请求，并实现统一的网络请求管理、Cookie 同步、证书校验、访问控制等功能。 * Android Webview 拦截 Ajax 请求 * JavaScript Bridge：DSBridge * HTTP 请求库：Fly.js * ...

    Ajax中get与post请求详解

    Ajax 发送请求时，get 请求的参数必须是 null 或 xhr.send()，否则可能会自动转换成 post 请求方式。可以通过 request.getMethod() 方法获取请求的方式。 实例代码： function getAjax(){ //获取 xhr 对象 var ...

    Ajax请求详解

    ### Ajax请求详解 #### 一、简单的Ajax请求 Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新...

    ajax POST 与GET提交的区别

    ### AJAX POST 与 GET 提交的区别详解 #### 一、GET与POST基本概念及应用场景 在探讨AJAX中GET和POST的区别之前，我们先来了解一下这两种请求方式的基本概念。 **GET**请求通常用于获取资源信息，它将参数拼接到...

    ajax参数详解

    AJAX请求的发送可以通过GET或POST方法，分别对应type参数的"get"和"post"。此外，还有其他HTTP请求方法，如PUT和DELETE，但在某些浏览器上可能不支持。 timeout参数用于设定请求的超时时间，以毫秒为单位。超过这个...

    Ajax 开发详解,Ajax开发详解

    - **安全问题**：由于Ajax请求通常局限于同源策略，跨域请求需要服务器端配合。 - **SEO难题**：搜索引擎爬虫无法执行JavaScript，可能影响内容的抓取。 - **用户体验**：若处理不当，可能导致用户界面卡顿或失去...

    vue使用Axios做ajax请求详解

    Vue 使用 Axios 做 Ajax 请求详解 Vue.js 是一个流行的前端框架，Axios 是一个流行的 JavaScript 库，用于发送 HTTP 请求。本文将详细介绍如何使用 Axios 在 Vue.js 项目中发送 Ajax 请求。 一、安装 Axios 要...

    ajax请求例子

    ### AJAX请求基础知识与示例解析 #### 一、AJAX技术概述 AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着...

    ajax请求,asp的实例

    其中，第一个参数表示请求方式（GET 或 POST），第二个参数是请求的 URL，第三个参数表示是否异步执行。 - **发送请求**: 调用`send`方法发送请求。 #### 三、ASP 示例 接下来，我们来看一个简单的ASP页面`gethint...

    Ajax请求的五个步骤！！！

    ### Ajax请求的五个步骤详解 #### 一、引言 Ajax技术作为一种强大的前端技术，能够实现局部刷新网页，提升用户体验。本文将详细介绍Ajax的基本概念及其请求的五个关键步骤，并探讨在实际开发过程中可能会遇到的问题...

    详解JavaScript for循环中发送AJAX请求问题

    这导致了在for循环中发送多个AJAX请求时可能出现的问题：由于循环速度过快，请求可能在前一个请求完成之前就被发送，导致请求队列积压，甚至某些请求被浏览器取消。 针对这个问题，有两种主要的解决策略： 1. **...

    Ajax跨域详解与代码

    当需要向不同源发送Ajax请求时，就会遇到“跨域”问题。 **一、什么是Ajax跨域** Ajax跨域是指Ajax请求的目标URL与当前页面URL不在同一源下，浏览器出于安全考虑阻止了这种请求。这种行为是浏览器的默认行为，旨在...

    Ajax异步请求

    - **安全性**：Ajax请求可能会受到跨域限制，需要通过CORS或其他方式解决。 - **用户体验**：合理使用Ajax可以提升体验，但过度使用可能导致用户失去导航感，需谨慎设计。 总结，Ajax异步请求是现代Web开发中的关键...

    AJAX详解，菜鸟请进

    1. **创建XMLHttpRequest对象**：这是AJAX通信的核心，所有AJAX请求都是通过这个对象发送的。 2. **初始化请求**：设置请求的URL、HTTP方法（GET或POST）、是否异步等参数。 3. **打开连接**：调用`open()`方法...

    Ajax开发详解诶

    - **异步请求**：Ajax请求是异步的，这意味着用户可以继续与页面交互，而请求在后台进行。 - **创建XMLHttpRequest对象**：首先，我们需要在JavaScript中创建一个XMLHttpRequest对象。 - **打开连接**：然后，使用...

    ajax跨越请求

    **Ajax 跨域请求详解** Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下，通过JavaScript向服务器发送异步请求并获取数据。在Web开发中，跨域问题是一个常见的挑战，因为浏览器的...

    ajax详解与实战

    Ajax请求过程 - **创建XMLHttpRequest对象**: 在所有现代浏览器中，可以通过`new XMLHttpRequest()`来创建。 - **初始化连接**: 使用`open()`方法设置请求类型（GET/POST）、URL和是否异步。 - **发送请求**: 使用...

Magicbox
Global site tag (gtag.js) - Google Analytics