原贴地址: http://04101334.iteye.com/blog/637695
在开始讲解之前,我假设你已经对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>
<!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>
<!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;
- }
//获取指定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;
- }
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('&');
- }
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">
- <!--//
- 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>
<!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的代码:
- <?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>
<?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,看一下输出结果:
到这里就差不多结束了,希望这篇文章能给大家带来一些帮助和启发,谢谢大家观赏。最后附上源码:
发表评论
-
关于Session的详细解释(二)
2010-05-25 12:12 727session机制是一种服务器端的机制,服务器使用一种类似于散 ... -
关于Session的详细解释(一)
2010-05-25 12:10 883一、术语session 在我的经验里,session ... -
全面剖析XMLHttpRequest对象
2010-04-02 11:45 761XMLHttpRequest对象是当今所有AJAX和Web 2 ... -
Dom4j笔记总结《入门总结》
2010-03-22 16:45 6831. Parsing XML 2. ... -
关于Servlet的面试题
2009-10-09 19:13 8221、 Servlet与JSP有什么区别? Servlet ...
相关推荐
通过这种方式,我们就可以截获 Ajax 请求,并实现统一的网络请求管理、Cookie 同步、证书校验、访问控制等功能。 * Android Webview 拦截 Ajax 请求 * JavaScript Bridge:DSBridge * HTTP 请求库:Fly.js * ...
Ajax 发送请求时,get 请求的参数必须是 null 或 xhr.send(),否则可能会自动转换成 post 请求方式。可以通过 request.getMethod() 方法获取请求的方式。 实例代码: function getAjax(){ //获取 xhr 对象 var ...
### Ajax请求详解 #### 一、简单的Ajax请求 Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,这意味着可以在不重新...
### AJAX POST 与 GET 提交的区别详解 #### 一、GET与POST基本概念及应用场景 在探讨AJAX中GET和POST的区别之前,我们先来了解一下这两种请求方式的基本概念。 **GET**请求通常用于获取资源信息,它将参数拼接到...
AJAX请求的发送可以通过GET或POST方法,分别对应type参数的"get"和"post"。此外,还有其他HTTP请求方法,如PUT和DELETE,但在某些浏览器上可能不支持。 timeout参数用于设定请求的超时时间,以毫秒为单位。超过这个...
- **安全问题**:由于Ajax请求通常局限于同源策略,跨域请求需要服务器端配合。 - **SEO难题**:搜索引擎爬虫无法执行JavaScript,可能影响内容的抓取。 - **用户体验**:若处理不当,可能导致用户界面卡顿或失去...
Vue 使用 Axios 做 Ajax 请求详解 Vue.js 是一个流行的前端框架,Axios 是一个流行的 JavaScript 库,用于发送 HTTP 请求。本文将详细介绍如何使用 Axios 在 Vue.js 项目中发送 Ajax 请求。 一、安装 Axios 要...
### AJAX请求基础知识与示例解析 #### 一、AJAX技术概述 AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着...
其中,第一个参数表示请求方式(GET 或 POST),第二个参数是请求的 URL,第三个参数表示是否异步执行。 - **发送请求**: 调用`send`方法发送请求。 #### 三、ASP 示例 接下来,我们来看一个简单的ASP页面`gethint...
### Ajax请求的五个步骤详解 #### 一、引言 Ajax技术作为一种强大的前端技术,能够实现局部刷新网页,提升用户体验。本文将详细介绍Ajax的基本概念及其请求的五个关键步骤,并探讨在实际开发过程中可能会遇到的问题...
这导致了在for循环中发送多个AJAX请求时可能出现的问题:由于循环速度过快,请求可能在前一个请求完成之前就被发送,导致请求队列积压,甚至某些请求被浏览器取消。 针对这个问题,有两种主要的解决策略: 1. **...
当需要向不同源发送Ajax请求时,就会遇到“跨域”问题。 **一、什么是Ajax跨域** Ajax跨域是指Ajax请求的目标URL与当前页面URL不在同一源下,浏览器出于安全考虑阻止了这种请求。这种行为是浏览器的默认行为,旨在...
- **安全性**:Ajax请求可能会受到跨域限制,需要通过CORS或其他方式解决。 - **用户体验**:合理使用Ajax可以提升体验,但过度使用可能导致用户失去导航感,需谨慎设计。 总结,Ajax异步请求是现代Web开发中的关键...
1. **创建XMLHttpRequest对象**:这是AJAX通信的核心,所有AJAX请求都是通过这个对象发送的。 2. **初始化请求**:设置请求的URL、HTTP方法(GET或POST)、是否异步等参数。 3. **打开连接**:调用`open()`方法...
- **异步请求**:Ajax请求是异步的,这意味着用户可以继续与页面交互,而请求在后台进行。 - **创建XMLHttpRequest对象**:首先,我们需要在JavaScript中创建一个XMLHttpRequest对象。 - **打开连接**:然后,使用...
**Ajax 跨域请求详解** Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下,通过JavaScript向服务器发送异步请求并获取数据。在Web开发中,跨域问题是一个常见的挑战,因为浏览器的...
Ajax请求过程 - **创建XMLHttpRequest对象**: 在所有现代浏览器中,可以通过`new XMLHttpRequest()`来创建。 - **初始化连接**: 使用`open()`方法设置请求类型(GET/POST)、URL和是否异步。 - **发送请求**: 使用...