java ajax from post_POST方式发送ajax请求详解

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

post和get

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

Html代码  

HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

test-get_post

User ID: 

Password: 

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

图1-1

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

图1-2

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

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

Html代码  

HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

test-get_post

User ID: 

Password: 

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

图1-3

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

图1-4

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

图1-5

进入正题

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

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

Js代码  

//获取指定form中的所有的对象

function getElements(formId) {

var form = document.getElementById(id);

var elements = new Array();

var tagElements = form.getElementsByTagName('input');

for (var j = 0; j 

elements.push(tagElements[j]);

return elements;

}

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

Js代码  

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代码  

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

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 

var queryComponent = serializeElement(elements[i]);

if (queryComponent)

queryComponents.push(queryComponent);

}

return queryComponents.join('&');

}

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

Html代码  

HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

test-get_post

User ID: 

Password: 

sex: man  woman

interest:PIU DSS DDR

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

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

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

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

Html代码  

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

%>

for (int i=0; i

out.print(interest[i] + " ");

%>

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

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