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

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (1)

Collapse
 
afariaflp profile image
Felipe Faria

Excelente artigo, um prazer em cooperar contigo;

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay