No meu último post, prometi que escreveria sobre JSON, por isso vou tentar apresentar um pouco do que já aprendi rapidamente. Desde que comecei a desenvolver o projeto do HighCharts.Net tenho lido bastante sobre o padrão de serialização JSON que é usado pela API de renderização do projeto. Devo admitir que sempre que leio sobre javascript me surpreendo como algumas pessoas conseguem inovar usando coisas que sempre estiveram aí para a gente usar. Vide por exemplo, todas as implementações de jQuery e Ajax… não tem nada novo ali, todas aquelas coisas já eram possível há muitos anos, mas apenas há alguns poucos é que atinamos para isso. Com o JSON, não é diferente, pois mesmo que você só esteja lendo sobre este assunto por agora, ele passa bem longe de ser uma tecnologia nova, já que é javascript puro.

Primeiramente, precisamos explicar o nome, JSON é um acrônimo de “JavaScript Object Notation”, ou seja, é a notação JavaScript para descrever objetos. Por ter esse objetivo de armazenar dados (também podemos entender assim), o JSON pode substituír o XML que é largamente usado nas implementações de AJAX.

JSON ou XML quando desenvolver AJAX?

Falando sobre essa possibilidade de subistituir o XML por JSON nas respostas de servidor para nossas chamadas AJAX, é que evidenciamos as duas grandes vantagens do JSON sobre o XML, velocidade no tempo de execução e transporte de dados.

Como o JSON possui uma estrutura de sintaxe bem mais simples que o XML, ou seja, ele exige que se escreva menos para descrever os objetos. O tamanho dos “arquivos” que precisam ser transportados pelas requisições podem atingir uma redução de mais de 90% em relação do XML. Vamos ver um exemplo prático das diferenças de notação.

Veja um exemplo de dados descritos com XML:

<?xml version="1.0"?>
<blogs>
   <blog>
	  <id>1</id>
      <author>André Paulovich</author>
      <alias>Pogvich</alias>
      <age>26</age>
      <visits>254</visits>
   </blog>
   <blog>
	  <id>2</id>
      <author>Ivan Paulovich</author>
      <alias>Cabeção</alias>
      <age>24</age>
      <visits>10547</visits>
   </blog>
   <blog>
      <id>3</id>
      <author>André Castro</author>
      <alias>Liminha</alias>
      <age>23</age>
      <visits>847</visits>
   </blog>
</blogs>

Agora os mesmos dados com JSON:

var dados = {
	blogs :
	[
		{
		"id": 1,
		"author": "André Paulovich",
		"alias": "Pogvich",
		"age": 26,
		"visits": 254
		},
		{
		"id": 2,
		"author": "Ivan Paulovich",
		"alias": "Cabeção",
		"age": 24,
		"visits": 10547
		},
		{
		"id": 3,
		"author": "André Castro",
		"alias": "Liminha",
		"age": 23,
		"visits": 847
		}
	]
}

Neste caso a redução foi de 40% no tamanho do arquivo JSON em relação ao XML. Mas esta é apenas a primeira vantagem, pois com as velocidades de banda crescendo cada vez mais… essa diferença em bytes vai ficando para segundo plano, em relação ao tempo de execução que ainda é um limitador, uma vez que as implementações ainda funcionam no browser e precisam ser processados no cliente e é aí para mim que a está a grande vantagem do JSON.

Compare o tempo de execução

Quando temos que fazer o parser das informações e transformar a “string de dados” em “informação consultável”  – acho que podemos definir desta forma – é que vemos o quanto o JSON pode facilitar nossa vida na hora de programar as soluções. Veja por exemplo, como fazemos o parser de um XML em JavaScript.  Repare que precisamos utilizar um sistema diferente em cada browser, pois eles possuem suportes diferentes para executar estas tranformações.

Microsoft Internet Explorer:

<script type="text/javascript">
	var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	xmlDoc.async = false;
	xmlDoc.onreadystatechange = OnLoaded;
	xmlDoc.load("blogs.xml");

	function OnLoaded() {
	    // implementações
	}
</script>

Mozilla Firefox

<script type="text/javascript">
	var xmlDoc=document.implementation.createDocument("","",null);
	xmlDoc.load("blogs.xml");
	xmlDoc.onload = OnLoaded

	function OnLoaded() {
		// implementações
	}
</script>

Isso implica em várias coisas, mas principalmente, no tempo de execução no script e logicamente no tempo de desenvolvimento também, pois exige vários cuidados extras. Você pode encontrar outras informações sobre o assunto neste site. Já com o JSON, podemos fazer o mesmo trabalho de parser da string usando um comando nativo do JavaScript – e portanto crossbrowser. Veja como fica bem mais simples:

// nativo dos browsers mais novos
var jsonBlogs = JSON.parse(jsonString);

Feito isso, seu objeto jsonBlogs está pronto para ser consumido. Sem dúvida, mais muito mais simples que XML e com a vantagem de ser crossbrowser e mais rápido.

Você pode recuperar as informações do objeto json com uma notação que acompanha o mesmo princípio de simplicidade. Veja:

// considerando a estrutura do json acima
document.write(jsonBlogs.blogs[0].author); // André Paulovich

É isso aí pessoal, em breve vou escrever sobre JSON e o que já temos disponível no .Net.