POST方式发送ajax请求详解

传说の黄花菜

浏览: 202145 次
性别:
来自: 杭州

最近访客更多访客>>

yuyu1984

myblog1122

吖龙Sam

coolpest

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

Ajax Firefox 浏览器 JSP HTML

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

post和get

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

<!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稍做修改如下：

<!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>将数据值给抠出来。具体见如下代码：

//获取指定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对，代码如下：

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那样的格式组织起来。代码如下：

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控件，代码如下：

<!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">
<!--//
var request = getXMLHttpRequest();
function getFormInfo() {
	var postBody = serializeForm('Login');
	var url = document.getElementById('Login').action;
	request.open("post", url, true);
	request.onreadystatechange = updatePage;
	//
	request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	request.send(postBody);
}

function updatePage() {
	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的代码：

<?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，看一下输出结果：

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

demo.rar (1.9 KB)
描述: 示例源码下载
下载次数: 414

查看图片附件

20
顶

3
踩

分享到：

JVM specification对JVM内存的描述 | 常见算法稳定性分析排序算法稳定性

2010-04-08 11:11
浏览 88254
评论(22)
分类:Web前端
查看更多

22 楼 forrest_lv 2012-02-16

另外关于Tamper Popup插件，我没有用这个插件。我为了跟踪请求信息，我是用的web容器是tomcat,我修改了tomcat的server.xml，将其debug设置为debug="4" 这样就可以在控制台看到详细的请求跟踪信息。


我记得是修改成了这样：
<Host name="localhost" appBase="webapps"
            unpackWARs="true" autoDeploy="true"
             xmlValidation="false" xmlNamespaceAware="false" debug="4" reloadable="true" >
可是我改回来成这样：
<Host name="localhost" appBase="webapps"
            unpackWARs="true" autoDeploy="true"
             xmlValidation="false" xmlNamespaceAware="false" reloadable="true">
           
还是在控制台显示的信息是debug="4"级别，不知道为什么，我对server.xml做了几处修改，可能因为我在另外处的修改的原因吧。

21 楼 forrest_lv 2012-02-16

forrest_lv 写道

我注意到了3个细节：
处理了组件重名，如name="interest"；
 兼容不识别代码的浏览器；
result.jsp：<?xml version="1.0" encoding="ISO-8859-1" ?> 告诉浏览器以xml解释内容。

另外读这篇文章我们可以考虑以Servlet来实现响应。

哎，我理解处理了组件重名，如name="interest" 理解错了，我以为一次性获得name="interest"的所有元素的值哦，结果还是一个一个元素处理的

20 楼 forrest_lv 2012-02-16

19 楼 forrest_lv 2012-02-16

太感谢了，说的很清楚。

18 楼 hejiangtao 2011-12-01

17 楼 dickluo 2011-04-04

灰常感谢重新复习ajax

16 楼 flyingfish42 2010-08-11

传说の黄花菜写道

flyingfish42 写道

请问楼主用的是什么工具？

这个是firefox下的一个小插件叫tamper data 简单实用说明可看这篇blog
http://04101334.iteye.com/blog/656504

谢谢~

15 楼传说の黄花菜 2010-07-23

flyingfish42 写道

请问楼主用的是什么工具？

这个是firefox下的一个小插件叫tamper data 简单实用说明可看这篇blog
http://04101334.iteye.com/blog/656504

14 楼 flyingfish42 2010-07-19

请问楼主用的是什么工具？

13 楼传说の黄花菜 2010-04-23

马背上写道