DEV Community

Guilherme Govaski
Guilherme Govaski

Posted on

1

Content-Type e as diferenças entre x-www-form-urlencoded e JSON

Ao trabalhar com APIs e comunicação entre cliente e servidor, existe um header muito importante para comunicação entre as duas partes, este é o Content-Type. O Content-Type é usado para informar ao receptor o tipo de dados que estão sendo trafegados na rede. Os dois formatos mais comuns para o envio de dados simples em uma requisição HTTP são os: application/json e application/x-www-form-urlencoded.

Características

Content-Type: application/json

É um formato baseado em JSON (JavaScript Object Notation), muito utilizado para a comunicação e a troca de dados entre APIs. O JSON surgiu como uma alternativa ao tradicional XML. O JSON segue a sintaxe do JavaScript, tornando possível o envio de estruturas complexas como objetos e arrays, tornando mais fácil a legibilidade.

Exemplo de requisição HTTP usando Content-Type: application/json

POST /api/usuarios HTTP/1.1
Host: exemplo.com
Content-Type: application/json

{
  "id": 1253
  "nome": "João Silva",
  "email": "joao@example.com",
  "idade": 30,
  "endereço": {
    "rua": "Barão da Cidade",
    "Número": 782
    "bairro": "Mimoso Jacarandá",
    "cidade": "São Paulo",
    "Estado": "São Paulo"
  },
  "numeros_de_telefone": [
    { "id": 1432, "DDD": 41, "numero": 981843617 },
    { "id": 1433, "DDD": 27, "numero": 974272074 }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Content-Type: application/x-wwww-form-urlencoded

É o formato padrão para envio de dados através de formulários HTML. Os dados são codificados em estrutura de URL como chaves e valores, exemplo: "nome=Jonas&idade=28". Quando precisamos utilizar objetos complexos de dados, a legibilidade do conteúdo fica um pouco prejudicada.

Exemplo de requisição HTTP usando Content-Type: application/x-wwww-form-urlencoded

POST /api/usuarios HTTP/1.1
Host: exemplo.com
Content-Type: application/x-wwww-form-urlencoded

id=1253&nome=João Silva&email=joao@example.com&idade=30&endereço.rua=Barão da Cidade&endereço.Número=782&endereço.bairro=Mimoso Jacarandá&endereço.cidade=São Paulo&endereço.Estado=São Paulo&numeros_de_telefone[0].id=1432&numeros_de_telefone[0].DDD=41&numeros_de_telefone[0].numero=981843617&numeros_de_telefone[1].id=1433&numeros_de_telefone[1].DDD=27&numeros_de_telefone[1].numero=974272074
Enter fullscreen mode Exit fullscreen mode

Vantagens de um relacionado ao outro

aplication/json

  • Melhor suporte a estruturas complexas.
  • Facilita a manipulação e a serialização de objetos em diversas linguagens de programação.
  • Padrão amplamente utilizado em APIs RESTful.

application/x-www-form-urlencoded

  • Simples e leve para pequenos conjuntos de dados.
  • Nativo para formulários HTML sem necessidade de JavaScript.
  • Bem suportado em servidores web e frameworks.

Resumo

O header Content-Type é essencial na comunicação entre cliente e servidor, pois informa o tipo de dados trafegados. Os formatos mais comuns são application/json e application/x-www-form-urlencoded. O application/json é ideal para APIs RESTful, oferecendo suporte a estruturas complexas e facilitando a leitura e manipulação dos dados. Já o application/x-www-form-urlencoded é amplamente utilizado em formulários HTML, sendo mais leve e simples para pequenos conjuntos de dados. A escolha entre os dois depende do contexto e da necessidade da aplicação.

Co-autor: @afariaflp
Link: https://dev.to/afariaflp/content-type-e-as-diferencas-entre-x-www-form-urlencoded-e-json-537f

Top comments (1)

Collapse
 
afariaflp profile image
Felipe Faria

Excelente artigo, um prazer em cooperar contigo;