HTTP Content-Type深入实践

引子

HTTP是一种网络应用层传输协议，协议就是约定。HTTP头部字段Content-Type约定请求和响应的HTTP body内容编码类型，客户端和服务端根据HTTP头部字段Content-Type正确解码HTTP body内容。
常见的HTTP头部Content-Type：

  • application/x-www-form-urlencoded
  • multipart/form-data
  • application/json
  • application/xml

当然还有更多的类型，比如请求html时是text/html，请求css时是text/css，请求js时是text/javascript...
本文将深入实践Content-Type对HTTP body内容的解码重要性，模拟发送HTTP头部Content-Type:application/json，后端使用Spring boot+Java，前端使用html+javascript+css+jquery。
Content-Type和Content-Length焦不离孟，关于Content-Length可以参考拙作HTTP Content-Length深入实践。

HTTP Request Content-Type

前端使用Content-Type:"application/json"编码HTTP请求内容并提交给服务端，服务端使用Content-Type:"application/json"解码HTTP请求内容。下面实践HTTP Request头部Content-Type的作用。
后端Spring boot+Java代码如下，Product类包含三个字段：id,name,price，请自建并引入。

package com.demo.web.http;

import com.demo.domain.http.Product;
import com.google.common.collect.Maps;
import com.google.gson.Gson;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("http")
public class ContentTypeController {
    @RequestMapping("/content-type-request")
    public String contentType4Request() {
        return "http/content-type-request";
    }

    @RequestMapping("content-type-request.json")
    @ResponseBody
    public void json4Request(@RequestBody List<Product> products, HttpServletResponse response) throws IOException {
        System.out.println(Arrays.deepToString(products.toArray()));
        response.getWriter().write("Add products success.");
    }
}

前端html+javascript+css+jquery代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <title>HTTP request Content-Type Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
</head>
<body>
<button type="button" onclick="addProducts();">向服务器发送json</button>
<p id="msg"></p>
<script>
    var products = new Array();
    products.push({
        id : 1,
        name : "iPhone 6 Plus",
        price : 4987.5
    });
    products.push({
        id : 2,
        name : "iPhone 7 Plus",
        price : 5987.5
    });
    function addProducts() {
        $.ajax({
            type: "POST",
            url: "content-type-request.json",
            data: JSON.stringify(products),
            contentType: "application/json",
            dataType: "text",
            success: function (result) {
                console.log(result);
                $("#msg").html(result);
            },
            error: function () {
                alert("error.");
            }
        });
    }
</script>
</body>
</html>

如图1，点击“向服务器发送json”按钮，ajax请求头部Content-Type:application/json，ajax请求后端方法com.demo.web.http.ContentTypeController#json4Request，后端方法解码HTTP请求内容的products json字段，并打印出来。

图1 HTTP request Content-Type:application/json

当把前端代码的contentType: "application/json",注释，前端页面报如下错误：

图2 HTTP Request头部Content-Type使用默认值

图3 HTTP Request头部Content-Type使用默认值

从图2、图3看，如果不明确指定HTTP Request头部Content-Type，将使用application/x-www-form-urlencoded; charset=UTF-8作为默认值，后端方法com.demo.web.http.ContentTypeController#json4Request不能解码Content-Type:application/x-www-form-urlencoded的HTTP Request body内容，返回HTTP 415错误：不支持的媒体类型(Unsupported media type)。如下后端报错信息也印证这点，说明后端方法com.demo.web.http.ContentTypeController#json4Request只能解码请求头部Content-Type为application/json的HTTP Request body内容。
2017-07-23 17:03:56.917 WARN 24723 --- [nio-8080-exec-2] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved exception caused by Handler execution: org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

HTTP Response Content-Type

服务端使用Content-Type:"application/json"编码HTTP响应body内容返回给前端，前端使用Content-Type:"application/json"解码HTTP响应body内容。下面实践HTTP Response头部Content-Type的作用。

情况1：服务端返回Response Content-Type:application/json，前端dataType不指定值

后端Spring boot+Java代码如下:

package com.demo.web.http;

import com.google.common.collect.Maps;
import com.google.gson.Gson;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Map;

@Controller
@RequestMapping("http")
public class ContentTypeController {
    private final static Gson GSON = new Gson();
    @RequestMapping("/content-type-response")
    public String contentType4Response() {
        return "http/content-type-response";
    }

    @RequestMapping("content-type-response.json")
    @ResponseBody
    public void json4Response(HttpServletResponse response) throws IOException {
        Map<String, Object> map = Maps.newHashMap();
        map.put("name", "datou");
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(GSON.toJson(map));
    }
}

前端html+javascript+css+jquery代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <title>HTTP response Content-Type Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<p>Name: <span id="name"></span></p>
<button onclick="show()">show name</button>
<script>
    function show() {
        $.get("content-type-response.json", function (data) {
            console.log(data);
            $("#name").text(data.name);
        });
    }
</script>
</body>
</html>

如图4，点击“show name”按钮，ajax请求后端方法com.demo.web.http.ContentTypeController#json4Response，后端方法返回HTTP响应头部Content-Type:application/json，前端$.get()方法在不指定dataType具体值的情况下解码HTTP响应body内容，data类型是Object，js获取并展示data.name的内容。

图4 服务端返回Response Content-Type:application/json，前端$.get() dataType不指定值

情况2：服务端不返回Response Content-Type:application/json，前端dataType指定值json

后端Spring boot+Java代码注释response.setContentType("application/json;charset=utf-8");
前端html+javascript+css+jquery代码如下，前端dataType指定值"json"：

<!DOCTYPE HTML>
<html>
<head>
    <title>HTTP response Content-Type Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<p>Name: <span id="name"></span></p>
<button onclick="show()">show name</button>
<script>
    function show() {
        $.get("content-type-response.json", function (data) {
            console.log(data);
            $("#name").text(data.name);
        }, "json");
    }
</script>
</body>
</html>

如图5，点击“show name”按钮，ajax请求后端方法com.demo.web.http.ContentTypeController#json4Response，后端方法返回HTTP响应没有头部字段Content-Type，前端$.get()指定dataType="json"解码HTTP响应body内容，data类型是Object，js获取并展示data.name的内容。

图5 服务端不返回Response Content-Type:application/json，前端dataType指定值"json"

情况3：服务端不返回Response Content-Type:application/json，前端dataType不指定值"json"

后端Spring boot+Java代码注释response.setContentType("application/json;charset=utf-8");。
前端html+javascript+css+jquery代码如下，前端$.get()dataType不指定值"json"

<!DOCTYPE HTML>
<html>
<head>
    <title>HTTP response Content-Type Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<p>Name: <span id="name"></span></p>
<button onclick="show()">show name</button>
<script>
    function show() {
        $.get("content-type-response.json", function (data) {
            console.log(data);
            $("#name").text(data.name);
        });
    }
</script>
</body>
</html>

如图6，点击“show name”按钮，ajax请求后端方法com.demo.web.http.ContentTypeController#json4Response，后端方法返回HTTP响应不返回头部字段Content-Type，前端$.get()在不指定dataType具体值为"json"的情况下不能解码HTTP响应body的json字符串，data类型是String，js不能获取data.name值，所以展示的Name:为空。

图6 服务端不返回Response Content-Type:application/json，前端dataType不指定值"json"

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,179评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,229评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,032评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,533评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,531评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,539评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,916评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,813评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,354评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,937评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2赞 342

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,580评论 18赞 139
  • http请求中的Content-Type
    http头部字段Content-Type约定请求和响应的HTTP body内容编码类型，客户端和服务端根据http...
    番薯大佬阅读 2,279评论 1赞 1
  • HTTP Content-Length深入实践
    引子 HTTP头部Content-Length用于描述HTTP消息实体的传输长度，浏览器对比Content-Len...
    大头8086阅读 25,830评论 1赞 6
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,386评论 25赞 707
  • 在路上---岩脚侗寨篇
    岩脚侗寨是其实是在一月份（二十六）去的 因着刚换了工作 一直没时间更 今天闲下来了 想着该动动手了...
    公子段_阅读 739评论 0赞 0