在开始讲解之前,我假设你已经对ajax的基本原理有一定的理解,如果还有哪位朋友不怎么了解的话,请点击这里
。
首先我们先讲解下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,如下图:
![](http://dl.iteye.com/upload/attachment/230408/e7221394-ad1a-36a2-8708-e0f5a89dbf05.jpg)
图1-1
接下来我们再来看一下提交的这个http请求的详细信息:
![](http://dl.iteye.com/upload/attachment/230413/973ee110-fdb3-3e22-a34a-2ddd4ec6cec1.jpg)
图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,如下图:
![](http://dl.iteye.com/upload/attachment/230408/e7221394-ad1a-36a2-8708-e0f5a89dbf05.jpg)
图1-3
接下来我们再来看一下提交的这个http请求的详细信息:
![](http://dl.iteye.com/upload/attachment/230449/cbb974d8-12df-3550-aa29-5793d77933f8.jpg)
图1-4
由上图我们可以看出,使用post方式发送的http请求,参数不是跟在URL后面的,而是存放在http请求的body部分的,关于请求参数在http请求body中存放的形式类似get方式,见下图:
![](http://dl.iteye.com/upload/attachment/230455/4e9b65ca-1bcc-33dc-a875-a7b618bd193e.jpg)
图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,看一下输出结果:
![](http://dl.iteye.com/upload/attachment/230953/312fe8a7-e5e4-3135-9db5-48e733a57601.jpg)
到这里就差不多结束了,希望这篇文章能给大家带来一些帮助和启发,谢谢大家观赏。最后附上源码:
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0023/0408/e7221394-ad1a-36a2-8708-e0f5a89dbf05-thumb.jpg)
- 大小: 19.3 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0023/0413/973ee110-fdb3-3e22-a34a-2ddd4ec6cec1-thumb.jpg)
- 大小: 53 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0023/0449/cbb974d8-12df-3550-aa29-5793d77933f8-thumb.jpg)
- 大小: 55 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0023/0455/4e9b65ca-1bcc-33dc-a875-a7b618bd193e-thumb.jpg)
- 大小: 43.1 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0023/0953/312fe8a7-e5e4-3135-9db5-48e733a57601-thumb.jpg)
- 大小: 45.4 KB
分享到:
相关推荐
Ajax 发送请求时,get 请求的参数必须是 null 或 xhr.send(),否则可能会自动转换成 post 请求方式。可以通过 request.getMethod() 方法获取请求的方式。 实例代码: function getAjax(){ //获取 xhr 对象 var ...
Android Webview虽然提供了页面加载及资源请求的钩子,但是对于h5的ajax请求并没有提供干涉的接口,这意味着我们不能在webview中干涉javascript发起的http请求,而有时候我们确实需要能够截获ajax请求并实现一些功能...
### Ajax请求详解 #### 一、简单的Ajax请求 Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,这意味着可以在不重新...
对于Vue 1.0版本,推荐使用vue-resource库来发送AJAX请求。vue-resource 是一个为Vue.js提供的客户端HTTP请求库,它提供了一组简单、灵活的API来发送请求。开发者可以通过简单配置,即可在Vue项目中方便地发起HTTP...
### AJAX POST 与 GET 提交的区别详解 #### 一、GET与POST基本概念及应用场景 在探讨AJAX中GET和POST的区别之前,我们先来了解一下这两种请求方式的基本概念。 **GET**请求通常用于获取资源信息,它将参数拼接到...
**Ajax(Asynchronous JavaScript and XML)详解** Ajax 是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术结合了 JavaScript、XML、DOM、CSS 和 XMLHttpRequest 对象等多种 web 技术,使得网页...
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的基本概念及其请求的五个关键步骤,并探讨在实际开发过程中可能会遇到的问题...
AJAX(XMLHttpRequest)进行跨域请求方法详解 AJAX(XMLHttpRequest)跨域请求是指一个站点中的资源访问另外一个不同域名站点上的资源。这种情况很常见,比如说通过style标签加载外部样式表文件、通过img标签加载外部...
1. **JavaScript**: 用于创建和控制用户交互,处理AJAX请求和响应,并动态更新页面内容。 2. **XMLHttpRequest**: 这是AJAX的核心,它允许JavaScript在后台与服务器进行通信,而不会打断用户的交互。 3. **DOM...
这导致了在for循环中发送多个AJAX请求时可能出现的问题:由于循环速度过快,请求可能在前一个请求完成之前就被发送,导致请求队列积压,甚至某些请求被浏览器取消。 针对这个问题,有两种主要的解决策略: 1. **...
当需要向不同源发送Ajax请求时,就会遇到“跨域”问题。 **一、什么是Ajax跨域** Ajax跨域是指Ajax请求的目标URL与当前页面URL不在同一源下,浏览器出于安全考虑阻止了这种请求。这种行为是浏览器的默认行为,旨在...
- **异步请求**:Ajax请求是异步的,这意味着用户可以继续与页面交互,而请求在后台进行。 - **创建XMLHttpRequest对象**:首先,我们需要在JavaScript中创建一个XMLHttpRequest对象。 - **打开连接**:然后,使用...
- **安全性**:Ajax请求可能会受到跨域限制,需要通过CORS或其他方式解决。 - **用户体验**:合理使用Ajax可以提升体验,但过度使用可能导致用户失去导航感,需谨慎设计。 总结,Ajax异步请求是现代Web开发中的关键...
1. **创建XMLHttpRequest对象**:这是AJAX通信的核心,所有AJAX请求都是通过这个对象发送的。 2. **初始化请求**:设置请求的URL、HTTP方法(GET或POST)、是否异步等参数。 3. **打开连接**:调用`open()`方法...
**Ajax 跨域请求详解** Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下,通过JavaScript向服务器发送异步请求并获取数据。在Web开发中,跨域问题是一个常见的挑战,因为浏览器的...