Ajax的text/plain、application/x-www-form-urlencoded和application/json
Ajax的text/plain、application/x-www-form-urlencoded和application/json
HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value&name1=value1的形式在请求体中。通过chrome的开发者工具可以看到如下(这里是可读的形式,不是真正的HTTP请求协议的请求格式):
get请求:
[plain] view plain copy
- RequestURL:http://127.0.0.1:8080/test/test.do?name=mikan&address=street
- Request Method:GET
- Status Code:200 OK
- Request Headers
- Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
- Accept-Encoding:gzip,deflate,sdch
- Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
- AlexaToolbar-ALX_NS_PH:AlexaToolbar/alxg-3.2
- Connection:keep-alive
- Cookie:JSESSIONID=74AC93F9F572980B6FC10474CD8EDD8D
- Host:127.0.0.1:8080
- Referer:http://127.0.0.1:8080/test/index.jsp
- User-Agent:Mozilla/5.0 (Windows NT 6.1)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.149 Safari/537.36
- Query String Parameters
- name:mikan
- address:street
- Response Headers
- Content-Length:2
- Date:Sun, 11 May 2014 10:42:38 GMT
- Server:Apache-Coyote/1.1
Post请求:
[plain] view plain copy
- RequestURL:http://127.0.0.1:8080/test/test.do
- Request Method:POST
- Status Code:200 OK
- Request Headers
- Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
- Accept-Encoding:gzip,deflate,sdch
- Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
- AlexaToolbar-ALX_NS_PH:AlexaToolbar/alxg-3.2
- Cache-Control:max-age=0
- Connection:keep-alive
- Content-Length:25
- Content-Type:application/x-www-form-urlencoded
- Cookie:JSESSIONID=74AC93F9F572980B6FC10474CD8EDD8D
- Host:127.0.0.1:8080
- Origin:http://127.0.0.1:8080
- Referer:http://127.0.0.1:8080/test/index.jsp
- User-Agent:Mozilla/5.0 (Windows NT 6.1)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.149 Safari/537.36
- Form Data
- name:mikan
- address:street
- Response Headers
- Content-Length:2
- Date:Sun, 11 May 2014 11:05:33 GMT
- Server:Apache-Coyote/1.1
这里要注意post请求的Content-Type为application/x-www-form-urlencoded,参数是在请求体中,即上面请求中的Form Data。
在servlet中,可以通过request.getParameter(name)的形式来获取表单参数。
而如果使用原生AJAX POST请求的话:
[javascript] view plain copy
- function getXMLHttpRequest() {
- var xhr;
- if(window.ActiveXObject) {
- xhr= new ActiveXObject("Microsoft.XMLHTTP");
- }else if (window.XMLHttpRequest) {
- xhr= new XMLHttpRequest();
- }else {
- xhr= null;
- }
- return xhr;
- }
- function save() {
- var xhr = getXMLHttpRequest();
- xhr.open("post","http://127.0.0.1:8080/test/test.do");
- var data = "name=mikan&address=street...";
- xhr.send(data);
- xhr.onreadystatechange= function() {
- if(xhr.readyState == 4 && xhr.status == 200) {
- alert("returned:"+ xhr.responseText);
- }
- };
- }
通过chrome的开发者工具看到请求头如下:
[plain] view plain copy
- RequestURL:http://127.0.0.1:8080/test/test.do
- Request Method:POST
- Status Code:200 OK
- Request Headers
- Accept:*/*
- Accept-Encoding:gzip,deflate,sdch
- Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
- AlexaToolbar-ALX_NS_PH:AlexaToolbar/alxg-3.2
- Connection:keep-alive
- Content-Length:28
- Content-Type:text/plain;charset=UTF-8
- Cookie:JSESSIONID=C40C7823648E952E7C6F7D2E687A0A89
- Host:127.0.0.1:8080
- Origin:http://127.0.0.1:8080
- Referer:http://127.0.0.1:8080/test/index.jsp
- User-Agent:Mozilla/5.0 (Windows NT 6.1)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.149 Safari/537.36
- Request Payload
- name=mikan&address=street
- Response Headers
- Content-Length:2
- Date:Sun, 11 May 2014 11:49:23 GMT
- Server:Apache-Coyote/1.1
注意请求的Content-Type为text/plain;charset=UTF-8,而请求表单参数在RequestPayload中。
那么servlet中通过request.getParameter(name)却是空。为什么呢?而这样的参数又该怎么样获取呢?
为了搞明白这个问题,查了些资料,也看了Tomcat7.0.53关于请求参数处理的源码,终于搞明白了是怎么回事。
HTTP POST表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。
由于Tomcat对于Content-Type multipart/form-data(文件上传)和application/x-www-form-urlencoded(POST请求)做了“特殊处理”。下面来看看相关的处理代码。
Tomcat的HttpServletRequest类的实现类为org.apache.catalina.connector.Request(实际上是org.apache.coyote.Request),而它对处理请求参数的方法为protected void parseParameters(),这个方法中对Content-Type multipart/form-data(文件上传)和application/x-www-form-urlencoded(POST请求)的处理代码如下:
[java] view plain copy
- protectedvoid parseParameters() {
- //省略部分代码......
- parameters.handleQueryParameters();// 这里是处理url中的参数
- //省略部分代码......
- if ("multipart/form-data".equals(contentType)) { // 这里是处理文件上传请求
- parseParts();
- success = true;
- return;
- }
- if(!("application/x-www-form-urlencoded".equals(contentType))) {// 这里如果是非POST请求直接返回,不再进行处理
- success = true;
- return;
- }
- //下面的代码才是处理POST请求参数
- //省略部分代码......
- try {
- if (readPostBody(formData, len)!= len) { // 读取请求体数据
- return;
- }
- } catch (IOException e) {
- // Client disconnect
- if(context.getLogger().isDebugEnabled()) {
- context.getLogger().debug(
- sm.getString("coyoteRequest.parseParameters"),e);
- }
- return;
- }
- parameters.processParameters(formData, 0, len); // 处理POST请求参数,把它放到requestparameter map中(即request.getParameterMap获取到的Map,request.getParameter(name)也是从这个Map中获取的)
- // 省略部分代码......
- }
- protected int readPostBody(byte body[], int len)
- throws IOException {
- int offset = 0;
- do {
- int inputLen = getStream().read(body, offset, len - offset);
- if (inputLen <= 0) {
- return offset;
- }
- offset += inputLen;
- } while ((len - offset) > 0);
- return len;
- }
从上面代码可以看出,Content-Type不是application/x-www-form-urlencoded的POST请求是不会读取请求体数据和进行相应的参数处理的,即不会解析表单数据来放到request parameter map中。所以通过request.getParameter(name)是获取不到的。
那么这样提交的参数我们该怎么获取呢?
当然是使用最原始的方式,读取输入流来获取了,如下所示:
[java] view
plain copy
- privateString getRequestPayload(HttpServletRequest req) {
- StringBuildersb = new StringBuilder();
- try(BufferedReaderreader = req.getReader();) {
- char[]buff = new char[1024];
- intlen;
- while((len = reader.read(buff)) != -1) {
- sb.append(buff,0, len);
- }
- }catch (IOException e) {
- e.printStackTrace();
- }
- returnsb.toString();
- }
当然,设置了application/x-www-form-urlencoded的POST请求也可以通过这种方式来获取。
所以,在使用原生AJAX POST请求时,需要明确设置Request Header,即:
[javascript] view
plain copy
- xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
另外,如果使用jQuery,我使用1.11.0这个版本来测试,$.ajax post请求是不需要明确设置这个请求头的,其他版本的本人没有亲自测试过。相信在1.11.0之后的版本也是不需要设置的。不过之前有的就不一定了。这个没有测试过。
2015-04-17后记:
最近在看书时才真正搞明白,服务器为什么会对表单提交和文件上传做特殊处理,因为表单提交数据是名值对的方式,且Content-Type为application/x-www-form-urlencoded,而文件上传服务器需要特殊处理,普通的post请求(Content-Type不是application/x-www-form-urlencoded)数据格式不固定,不一定是名值对的方式,所以服务器无法知道具体的处理方式,所以只能通过获取原始数据流的方式来进行解析。
jquery在执行post请求时,会设置Content-Type为application/x-www-form-urlencoded,所以服务器能够正确解析,而使用原生ajax请求时,如果不显示的设置Content-Type,那么默认是text/plain,这时服务器就不知道怎么解析数据了,所以才只能通过获取原始数据流的方式来进行解析请求数据。
当后台使用@RequestBody以对象的形式来接收数据时,在前台必须以application/json的形式进行传递,同时使用JSON.stringify(data)将json对象转换为json字符串。
当你使用application/x-www-form-urlencoded格式来传递数据时,tomcat会将其组装进一个Map中,后台只能用request.getParameter来访问。
原生Ajax默认格式:text/plain
Jquery Ajax默认格式(Map) + Form表单POST提交格式:application/x-www-form-urlencoded
字符流 Ajax格式(Map):application/json
( 同时使用JSON.stringify(data)将json对象转换为json字符串 )
文件上传:multipart/form-data
Ajax的text/plain、application/x-www-form-urlencoded和application/json的更多相关文章
- application/x-www-form-urlencoded multipart/form-data text/plain 后台返回的数据响应的格式类型
application/x-www-form-urlencoded multipart/form-data text/plain 为什么上传文件的表单里要加个属性 enctype 后台返回的数据响应 ...
- application/x-www-form-urlencoded multipart/form-data text/plain 的区别和作用
我们知道在通过POST方式向服务器发送AJAX请求时最好要通过设置请求头来指定为application/x-www-form-urlencoded编码类型.知道通过表单上传文件时必须指定编码类型为&q ...
- application/x-www-form-urlencoded ,multipart/form-data, text/plain
APPLICATION/X-WWW-FORM-URLENCODED MULTIPART/FORM-DATA TEXT/PLAIN 后台返回的数据响应的格式类型 application/x-www-fo ...
- 完整的 dataType=text/plain jquery ajax 登录验证
Html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <m ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- form编码方式application/x-www-form-urlencoded和multipart/form-data的区别
form元素有个enctype属性,可以指定数据编码方式,有如下三种: 1. application/x-www-form-urlencoded: 表单数据编码为键值对,&分隔 2. mult ...
- 四种常见的 POST 提交数据方式(application/x-www-form-urlencoded,multipart/form-data,application/json,text/xml)
四种常见的 POST 提交数据方式(application/x-www-form-urlencoded,multipart/form-data,application/json,text/xml) 转 ...
- form编码方式application/x-www-form-urlencoded和multipart/form-data的区别?
application/x-www-form-urlencoded: 表单数据编码为键值对,&分隔 multipart/form-data: 表单数据编码为一条消息,每个控件对应消息的一部分 ...
- 让ASP.NET Web API支持text/plain内容协商
ASP.NET Web API的内容协商(Content Negotiation)机制的理想情况是这样的:客户端在请求头的Accept字段中指定什么样的MIME类型,Web API服务端就返回对应的M ...
随机推荐
- Redis学习二:Redis入门介绍
一.入门概述 1.是什么 Redis:REmote DIctionary Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵守BSD协议,是一个高性能的(key/value)分布式内 ...
- An Insight to References in C++
[An Insight to References in C++] 引用的本质是常指针.占用的内存和指针一样. 参考:http://www.codeproject.com/Articles/13363 ...
- 谈谈动态地加载Jquery库文件的方法
有时候,我们可能不会在网页中<script src="jquery.min.js" 来加载 Jquery 库,可能在用户点击某个按钮后,才去加载 Jquery 库. 好处不用 ...
- element-UI 表单图片判空验证问题
本文地址:http://www.cnblogs.com/veinyin/p/8567167.html element-UI的表单验证似乎并没有覆盖到文件上传上面,当我们需要在表单里验证图片时,就会出 ...
- HDU 1263 水果 结构体排序
解题报告:一个结构体排序的题,用了一个运算符重载,要注意的是不同的地方可能会产相同的水果,一开始没注意. #include<cstdio> #include<cstring> ...
- 【leetcode 简单】 第五十九题 同构字符串
给定两个字符串 s 和 t,判断它们是否是同构的. 如果 s 中的字符可以被替换得到 t ,那么这两个字符串是同构的. 所有出现的字符都必须用另一个字符替换,同时保留字符的顺序.两个字符不能映射到同一 ...
- C语言实现线性表
#include <stdio.h> #include <stdlib.h> //提供malloc()原型 /* 线性表需要的方法: 1. List MakeEmpty():初 ...
- Linux基础-yum软件包管理
任务目标:自定义yum仓库:createrepo,自定义repo文件,使用yum命令安装httpd软件包,卸载httpd软件包:yum –y remove 软件名 ,使用yum安装组件'KDE 桌面' ...
- 【数据库】软件安全测试之SQL注入
这些年我们发现越来越多的公司开始注重安全测试了,为什么?因为安全测试可以在某种程度上可以排查掉你项目的一些安全漏洞,这样你的系统上线后才会相对安全,才有可能尽量避免来自外部的攻击.每一年互联网都会发生 ...
- log4net记录系统错误日志到文本文件用法详解(最新)
此配置文件可以直接拿来用,配置文件上面有详细用法说明,里面也有详细注释说明.此配置文件涵盖按照日期记录和按照文件大小(建议)的实例. 又包括:按照Fatal.Info.Error.Debug.Warn ...