讲到这里首先必须要介绍一下 HTTP 协议和 GET, POST 的工作方式.
当用户在Web浏览器地址栏中输入一个带有http://前缀的URL并按下Enter后,或者在Web页面中某个以http://开头的超链接上单击鼠标,HTTP事务处理的第一个阶段--建立连接阶段就开始了.HTTP的默认端口是80.
随着连接的建立,HTTP就进入了客户向服务器发送请求的阶段.客户向服务器发送的请求是一个有特定格式的ASCII消息,其语法规则为:
< Method > < URL > < HTTP Version > <\n>
{ <Header>:<Value> <\n>}*
<\n>
{ Entity Body } |
请求消息的顶端是请求行,用于指定方法,URL和HTTP协议的版本,请求行的最后是回车换行.方法有GET,POST,HEAD,PUT,DELETE等.
在请求行之后是若干个报头(Header)行.每个报头行都是由一个报头和一个取值构成的二元对,报头和取值之间以":"分隔;报头行的最后是回车换行.常见的报头有Accept(指定MIME媒体类型),Accept_Charset(响应消息的编码方式),Accept_Encoding(响应消息的字符集),User_Agent(用户的浏览器信息)等.
在请求消息的报头行之后是一个回车换行,表明请求消息的报头部分结束.在这个\n之后是请求消息的消息实体(Entity Body).
Web服务器在收到客户请求并作出处理之后,要向客户发送应答消息.与请求消息一样,应答消息的语法规则为:
< HTTP Version> <Status Code> [<Message>]<\n>
{ <Header>:<Value> <\n> } *
<\n>
{ Entity Body } |
应答消息的第一行为状态行,其中包括了HTTP版本号,状态码和对状态码进行简短解释的消息;状态行的最后是回车换行.状态码由3位数字组成,有5类:
1XX 保留
2XX 表示成功
3XX 表示URL已经被移走
4XX 表示客户错误
5XX 表示服务器错误
例如:415,表示不支持改媒体类型;503,表示服务器不能访问.最常见的是200,表示成功.常见的报头有:Last_Modified(最后修改时间),Content_Type(消息内容的MIME类型),Content_Length(内容长度)等.
在报头行之后也是一个回车换行,用以表示应答消息的报头部分的结束,以及应答消息实体的开始.
下面是一个应答消息的例子:
HTTP/1.0 200 OK
Date: Moday,07-Apr-97 21:13:02 GMT
Server:NCSA/1.1
MIME_Version:1.0
Content_Type:text/html
Last_Modified:Thu Dec 5 09:28:01 1996
Coentent_Length:3107
<HTML><HEAD><TITLE>...</HTML> |
那么 GET 和 POST 有什么区别? 区别就是一个在 URL 请求里面附带了表单参数和值, 一个是在 HTTP 请求的消息实体中. 用下面的例子可以很容易的看到同样的数据通过GET和POST来发送的区别, 发送的数据是 username=张三 :
GET 方式, 浏览器键入 http://localhost?username=张三
GET /?username=%E5%BC%A0%E4%B8%89 HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
Host: localhost
Connection: Keep-Alive |
POST 方式:
POST / HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
Accept-Language: zh-cn
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
Host: localhost
Content-Length: 28
Connection: Keep-Alive
username=%E5%BC%A0%E4%B8%89 |
比较一下上面的两段文字, 您会发现 GET 方式把表单内容放在前面的请求头中, 而 POST 则把这些内容放在请求的主体中了, 同时 POST 中把请求的 Content-Type 头设置为 application/x-www-form-urlencoded. 而发送的正文都是一样的, 可以这样来构造一个表单提交正文:
encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(arg2)=encodeURIComponent(value2)&.....
注: encodeURIComponent 返回一个包含了 charstring 内容的新的 String 对象（Unicode 格式）， 所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字符的十六进制数。 例如，空格返回的是 "%20" 。 字符的值大于 255 的用 %uxxxx 格式存储。参见 JavaScript 的 encodeURIComponent() 方法.
下面就讨论一下如何在 JavaScript 中执行一个 GET 或者 POST 请求. 如果您用过 Java, 那么您可能熟悉下列的用 java.net.URLConnection 类进行 POST 操作的代码(参考 Java Tip 34: POSTing via Java ):
URL url;
URLConnection urlConn;
DataOutputStream printout;
// URL of CGI-Bin or jsp, asp script.
url = new URL ("somepage");
// URL connection channel.
urlConn = url.openConnection();
// ......
// No caching, we want the real thing.
urlConn.setUseCaches (false);
// Specify the content type.
urlConn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
// Send POST output.
printout = new DataOutputStream (urlConn.getOutputStream ());
String content = "name=" + URLEncoder.encode ("Buford Early") + "&email=" + URLEncoder.encode ("buford@known-space.com");
printout.writeBytes (content);
printout.flush ();
printout.close (); |
以上的代码向 somepage 发送了一次 POST 请求, 数据为 name = Buford Early, email = buford@known-space.com.
用 JavaScript 来执行 POST/GET 请求是同样的原理, 下面的代码展示了分别用 XMLHttpRequest 对象向 somepage 用 GET 和 POST 两种方式发送和上例相同的数据的具体过程:
GET 方式
var postContent =
"name=" + encodeURIComponent("Buford Early") + "&email=" + encodeURIComponent("buford@known-space.com");
xmlhttp.open("GET", "somepage" + "?" + postContent, true);
xmlhttp.send(null); |
POST 方式
var postContent =
"name=" + encodeURIComponent("Buford Early") + "&email=" + encodeURIComponent("buford@known-space.com");
xmlhttp.open("POST", "somepage", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(postContent); |
至此希望你已经能够理解如何用 JavaScript 中的 XMLHttpRequest 对象来执行 GET/POST 操作, 剩下的工作就是您如何来构造这些提交的参数了, 最后我给出一个将现有的 form 提交代码修改为异步的 AJAX 提交的代码(注意目前作者还不知道如何让 file 上传表单域也能异步上传文件). 首先请看两个 JavaScript 函数:
// form - the form to submit
// resultDivId - the division of which to display result text in, in null, then
// create an element and add it to the end of the body
function ajaxSubmitForm(form, resultDivId) {
var elements = form.elements;// Enumeration the form elements
var element;
var i;
var postContent = "";// Form contents need to submit
for(i=0;i<elements.length;++i) {
var element=elements[i];
if(element.type=="text" || element.type=="textarea" || element.type=="hidden") {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}
else if(element.type=="select-one"||element.type=="select-multiple") {
var options=element.options,j,item;
for(j=0;j<options.length;++j){
item=options[j];
if(item.selected) {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(item.value) + "&";
}
}
} else if(element.type=="checkbox"||element.type=="radio") {
if(element.checked) {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}
} else if(element.type=="file") {
if(element.value != "") {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}
} else {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}
}
alert(postContent);
ajaxSubmit(form.action, form.method, postContent);
}
// url - the url to do submit
// method - "get" or "post"
// postContent - the string with values to be submited
// resultDivId - the division of which to display result text in, in null, then
// create an element and add it to the end of the body
function ajaxSubmit(url, method, postContent, resultDivId)
{
var loadingDiv = document.getElementById('loading');
// call in new thread to allow ui to update
window.setTimeout(function () {
loadingDiv.innerText = "Loading....";
loadingDiv.style.display = "";
}, 1);
// code for Mozilla, etc.
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp) {
xmlhttp.onreadystatechange = function() {
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4)
{
if(resultDivId) {
document.getElementByID(resultDivId).innerHTML = xmlhttp.responseText;
} else {
var result = document.createElement("DIV");
result.style.border="1px solid #363636";
result.innerHTML = xmlhttp.responseText;
document.body.appendChild(result);
}
loadingDiv.innerHTML =
"Submit finnished!";
}
};
if(method.toLowerCase() == "get") {
xmlhttp.open("GET", url + "?" + postContent, true);
xmlhttp.send(null);
} else if(method.toLowerCase() == "post") {
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(postContent);
}
} else {
loadingDiv.innerHTML =
"Can't create XMLHttpRequest object, please check your web browser.";
}
}
|
函数 ajaxSubmitForm 将表单要提交的内容进行封装, 然后调用 ajaxSubmit 函数来执行真正的异步提交, 表单提交后所返回的结果则显示在给定的 DIV 容器中或者没有指定参数时用 DOM 对象动态生成一个 DIV 容器来显示结果并添加到页面末尾. 这样, 对原来的表单只需要改动一个地方就可以将原来的表单提交改为异步模式, 即在 form 标签里加入: onSubmit="ajaxSubmitForm(this);return false;" 即可, return false 确保表单不会被浏览器同步提交. 完整的例子请看这里.
分享到：
相关推荐
在探讨AJAX中GET和POST的区别之前，我们先来了解一下这两种请求方式的基本概念。 **GET**请求通常用于获取资源信息，它将参数拼接到URL后面，并通过URL传输数据。这种方式适合于那些不会更改服务器状态的操作，例如...
二、 Ajax 中 Get 和 Post 的区别 1. Get 方式：使用 get 方式可传送简单数据，但大小一般限制在 1KB 下，数据追加到 url 中发送（http 的 header 传送）。另外，get 方式会被客户端的浏览器缓存起来，这可能会带来...
本主题将深入探讨如何利用这些技术实现POST和GET方式的表单提交以及如何处理服务器返回的数据。 首先，让我们了解这三种技术的基本概念： 1. PHP（Hypertext Preprocessor）是一种服务器端脚本语言，主要用于处理...
### Ajax中POST和GET的区别详解 #### 一、概述 在Web开发中，尤其是在使用Ajax进行前后端交互的过程中，GET和POST是最常见的两种HTTP请求方式。这两种方式虽然都是用来发送请求给服务器，但在具体实现机制、适用...
### Web应用安全：HTTP协议GET和POST的使用区别实验 #### 实验背景及目标 本实验旨在通过实际操作深入理解HTTP协议中POST方法的工作机制及其与GET方法的区别。实验将利用Firefox浏览器的Firebug插件以及Wireshark...
此外，jQuery的`$.ajax()`函数提供了一个更通用的方式来发送Ajax请求，它可以同时处理GET和POST，还可以自定义更多的选项，如请求头、数据类型等： ```javascript $.ajax({ type: 'POST', // 或者 'GET' url: '...
1. **jQuery**：简化了Ajax操作，提供了$.ajax()、$.get()和$.post()等函数。 2. **Fetch API**：作为XMLHttpRequest的替代，Fetch API更现代，提供了Promise支持，易于链式调用。 3. **Vue.js、React和Angular**：...
通过设置`method`属性，我们可以指定表单使用GET还是POST方式提交数据。例如： ```html <form action="your-api-url" method="post"> <!-- 输入字段 --> <!-- 提交按钮 --> 提交 ``` 对于POST请求，特别是...
jQuery提供了一套简洁的API，如`$.ajax()`、`$.post()`和`$.get()`，使得异步请求更加容易编写和维护。 10. **文件结构**： "AJAX验证表单下载"可能包含HTML文件（包含表单元素和JavaScript代码）、CSS文件（用于...
总的来说，这个Ajax示例是学习如何利用GET和POST方式实现页面无刷新交互的好起点。它通过实际操作展示了如何使用Ajax技术提升用户体验，同时强调了GET和POST在不同场景下的应用。通过深入理解这些概念，你可以进一步...
### jQuery中的GET、POST与LOAD方法详解...jQuery 的 GET、POST 和 LOAD 方法以及 AJAX 方法为开发者提供了强大的工具来处理客户端与服务器之间的数据交互。通过合理运用这些方法，可以极大地提升 Web 应用的用户体验。
JavaScript 和 AJAX 跨域访问分为两大类，一是本域和子域的交互，二是本域和其他域的交互。 一、本域和子域的交互：www.s135.com 和 blog.s135.com 二、本域和其他域的交互：blog.s135.com 和 api.bz 本域和...
在这个示例中，我们创建了一个`ajaxGet`函数，它接收URL和回调函数作为参数。回调函数会在请求完成且状态成功时调用，传递错误（如果有）和响应文本。 ### 2. Ajax POST 请求小封装 POST请求常用于向服务器发送...
PHP和AJAX的结合使得表单验证更加高效和用户友好。通过实时验证，用户可以立即看到其输入是否有效，减少了无效提交和重复输入，提高了用户满意度。在实际项目中，可以根据具体需求进行定制，如添加更多复杂的验证...
4.1 jQuery简化了Ajax操作，提供了`$.ajax()`,`$.get()`,`$.post()`等方法，使代码更简洁易懂。 4.2 使用jQuery处理Ajax异步请求，可以方便地处理错误，统一响应格式，并支持链式调用。 五、Ajax的局限性 5.1 ...
#### 二、AJAX框架详细介绍 ##### 1. Bindows (2003) - **简介**：Bindows是一款基于DHTML、JavaScript、CSS和HTML的框架，它提供了Windows风格的Web应用体验。该框架支持Java、ActiveX、Flash等多种插件，并且...
本篇文章将深入探讨如何使用jQuery的`ajax`方法中的`post`和`get`来向指定URL发送数据。 首先，让我们了解`GET`和`POST`这两种HTTP请求方法的基本概念。`GET`是最常见的请求方式，用于从服务器获取数据，通常显示在...
综上所述，GET和POST请求各有优缺点，在实际开发过程中应根据需求选择合适的方法。对于简单的数据获取可以使用GET，而对于涉及敏感信息的操作则推荐使用POST。同时，随着现代Web技术的发展，如Fetch API和axios等库...
- **Ajax交互**：`.ajax()`, `.get()`, `.post()`等方法。 4. **Bootstrap框架**： Bootstrap是流行的响应式前端框架，用于快速构建美观的、响应式的网站。关键组件包括： - **栅格系统**：用于布局和响应式设计...
- **jQuery 和 Axios**：学习Ajax时，可以了解jQuery的$.ajax()方法和现代JavaScript库Axios，它们都提供了更方便的接口来处理Ajax请求。 在项目中，Ajax常用于实现动态加载、表单提交、实时通讯等功能。随着前端...