json

[xanburzum 169]

Ao utilizar a Asynchronous JavaScript e XML (AJAX) para permitir uma aplicação web de enviar solicitações assíncronas a partir do navegador cliente para o servidor para recuperar alguns dados e depois deixar o navegador do cliente executando o aplicativo, onde receberá uma resposta mais uma vez em um servidor assíncrono. O intercâmbio de dados foi feito normalmente, quer sob a forma de simples humano legível cordas ou em um formato XML.

 

Neste artigo, irei apresentar-lhe uma nova forma de intercâmbio de dados entre o cliente e o servidor. A idéia discutida incidirá em JavaScript Object Notation (JSON). Não vou estar discutindo o que é AJAX e como o AJAX a resposta é processada no lado do cliente em especial se os dados recebidos do server XML é um dado, uma vez que este está fora do tema deste artigo, no entanto, vou mostrar-lhe simplesmente como usar JSON para intercâmbio de dados.

 

O que é JSON?

 

JSON é um formato de dados de peso leve que é um texto de base,num formato legível humano que é usado para representar objetos, matrizes, e outros tipos de dados que é utilizada principalmente para troca de tais tipos de dados sobre o rede.

 

JSON é utilizado principalmente em aplicações web AJAX. Tais aplicações em vigor do seu código do lado servidor, que pode ser ASP, PHP, JSP, ASP.NET, etc ... para formatar os dados que eles têm de devolver ao requerente um aplicativo cliente no formato JSON. Muitos benefícios podem ser adquiridos fora deste processo, especialmente o ganho desempenho no lado do cliente uma vez que não haverá nenhuma sobrecarga nos geradores XML DOM fora dos Dados XML e seria melhor do que simples texto em uma string em formato de JSON, porque representaria a Os dados recebidos em um objeto-fashion! E tudo o que tens a fazer sobre o cliente é apenas analisar o objeto-string-formatados em um objeto JSON e acessar esse objeto como se você está lidando com um objeto C # ou JAVA!

 

Desde que estou a falar de objectos e arrays, vale a pena mencionar que o JSON é um subconjunto do objeto literal notação de JavaScript e é comumente usada com essa linguagem. Assim, uma vez que depende de objetos JSON e esses tipos Orientadosa Objetos, ele pode ser facilmente utilizado com uma Object Oriented Language, uma vez que todos partilhamos o mesmo conceito de representação de dados como objetos. Deixe-me mostrar um exemplo de um objeto JSON antes de passar a ter uma pequena ideia sobre o que tenho de falar a partir do início deste artigo.

 

Listagem 1: simples objeto JSON

 

( 
	   "Nome": "xanburzum", 
	   "Apelido": "x@nburzum", 
	   "Idade": 30, 
	   "Experiência": 
			 [ "2004", "2005", "2006"] 
)

Como gerar JSON do lado do servidor

 

 

 

Gerando um objeto JSON string do lado do servidor pode ser facilmente feito usando um objeto StringBuilder e anexando os objetos' propriedades para a instância da classe StringBuilder. Por exemplo, você converte um objeto em C # string JSON string objeto da seguinte forma:

 

Listagem 7

 

public class Person
{
  #region Member fields
  int id =  - 1;
  string nome = "";
  #endregion
  #region Properties
  public int ID
  {
	get
	{
	  return this.id;
	}
	set
	{
	  this.id = value;
	}
  }
  public string Nome
  {
	get
	{
	  return this.nome;
	}
	set
	{
	  this.name = value;
	}
  }
  #endregion
 
  #region Constructors
  public Person(): this( - 1, ""){}
 
  public Person(int id, string nome)
  {
	this.id = id;
	this.name = nome;
  }
  #endregion
}
 
/ / Cria uma nova instância do objeto Person
Person p = new Person(5, "Xanburzum X@nburzum");
// Construct the JSON string object
StringBuilder sb = new StringBuilder();
sb.Append("{");
sb.AppendFormat("\"{0}\": \"{1}\"", p.ID, p.Name);
sb.Append("}");
Response.Write(sb.ToString());

Você pode ver como é fácil transformar seus negócios para objetos JSON string objetos. Você só precisa seguir o formato JSON e você está aí!

 

Se você tivesse objetos mais complicado que podem incluir arrays de objetos ou de simples valores. Não é sábio fazer a conversão em si mesmo uma forma manual. Portanto, vou guiar-vos para uma grande JSON DLL que é chamado Jason.NET.

 

Um exemplo de como você pode utilizar a Jason.NET para obter um objeto JSON string é mostrado na listagem abaixo.

 

Listagem 8

 

/ / Criar uma nova instância do objeto Pessoa
Person p = new Person(5, "Xanburzum X@nburzum");
// Convert the C# object into a JSON string object.
string jsonStringObj = JavaScriptConvert.SerializeObject(p);		
/ / Mostrar a saída que deve ser algo como:
// {"ID":5,"Nome":"Xanburzum X@nburzum"} 
Response.Write(jsonStringObj);

Você pode ver e sentir como é fácil usar o objeto JavaScriptConvert e ter sua seqüência objetos JSON a partir de objetos do C #.

Não vou entrar em detalhes sobre como usar a DLL Json.NET.

 

Como a consumir JSON no lado do cliente

Vocês já assistiram a forma como o servidor pode gerar uma resposta em um objeto no formato JSON string . Agora é hora de saber como pretende consumir o objeto JSON string no lado do cliente que é possível analisar a forma como o objeto JSON string em um verdadeiro objeto JSON para ser acessado como um objeto que seria normal em um acesso Programação Orientada a Objeto Linguagem.

Vou mostrar-vos um exemplo ajaxified que irá enviar uma solicitação assíncrona para o servidor e processa a resposta do servidor, assumindo que o servidor irá responder por formatar os dados em um JSON moda.

Listagem 9

function ReadyStateChangeHandler()
{
  if (xmlHttpRequest.readyState == 4)
// Completo {
	if (xmlHttpRequest.status == 200)
// Response OK {
// Process data
  var jsonStringObj = xmlHttpRequest.responseText;
 
/ / Parse do objeto JSON string para um verdadeiro objeto JSON

  var jsonObj = jsonStringObj.parseJSON();
 
// mostrar alguns dados
  alert("Person ID: " + jsonObj.ID.toJSONString());
}
 
else
{
  alert("Error: HTTP " + xmlHttpRequest.status + " " +
	xmlHttpRequest.statusText);
}
}
}

A função JavaScript acima é geralmente usado para disparar uma resposta quando estiver pronta a partir do servidor. Assuma que XMLHttpRequest é um exemplo válido do objeto XMLHttpRequest que tenha sido utilizado para enviar uma solicitação assíncrona para o servidor, o primeiro código verifica se o readystate do objeto XMLHttpRequest é 4; um valor de 4 significa que o pedido tenha sido concluído.

 

Uma vez que estamos a certeza de que o pedido tenha sido concluído, vamos verificar se o status de resposta do servidor está OK. OK significa que não houve qualquer problema no processamento do pedido e uma resposta válida foi gerada pelo servidor. O estatuto da resposta tem o valor de 200 e a descrição do estado que está OK.

 

Se as duas etapas acima foram concluídas com sucesso, então seguramente teremos a resposta do servidor. Assumindo que a resposta do servidor é formatada em uma string objeto JSON, o primeiro código apreende a resposta texto usando a propriedade denominada responseText XMLHttpRequest. Depois que o texto está disponível, o código analisa o texto utilizando a function parseJSON (). Esta função irá converter qualquer formato de objeto JSON string em um objeto JSON.

 

Uma vez que temos um objeto JSON válido, temos acesso as propriedades objeto da mesma maneira que qualquer acesso a objeto C # ou VB.NET, por simplesmente especificando o nome do objeto, um "." E o nome da propriedade.

 

O código alerta o ID do objeto Person que foi gerado no servidor, em ambas as listagens 7 e 8.

 

E o que faz os métodos parseJSON () e toJSONString ()?

 

Bem, essas são duas importantes funções, entre outras funções úteis. O JSON preparou um arquivo chamado json.js utilitário JavaScript que você precisa para incluir em suas páginas se você estiver indo usar qualquer um desses métodos. Recomenda-se usar os métodos que podem tornar sua vida mais fácil quando se trata de processar JSON string objects, arrays e outros tipos de JSON data no lado do cliente.

 

Para fazer o download do arquivo utilitário JavaScript, siga este link: http://www.json.org/js.html. Nesta página você pode encontrar uma extensa análise de todos os métodos disponíveis para você pronto para uso, fora desse grande utilidade arquivo e prestativos.

 

Exemplo

 

Iremos percorrer o código passo a passo e mostrar-lhe todas as informações necessárias para lhe permitir desenvolver tais AJAX / JSON em aplicações ASP.NET.

Para começar, deixe-me explicar a idéia principal. Como você pode ver a partir do formulário acima, que solicita aos usuários para selecionar um funcionário da name DropDownList. Depois que um funcionário for selecionado usando AJAX / JSON, os detalhes do empregado será exibido abaixo do DropDownList.

 

Listing 10

 

<div id="page">
		<div id="header">
			<h1>Populando Dados com JSON</h1>
		</div>
		<div id="content">
			Selecione um empregado para verificar o seu registro:<br />
			<asp:DropDownList ID="ddlEmployees" runat="server" onchange="GetEmployeeDetails()">
				<asp:ListItem Value="-1" Text="Select Employee"></asp:ListItem>
				<asp:ListItem Value="1" Text="Xanburzum"></asp:ListItem>
				<asp:ListItem Value="2" Text="Keka"></asp:ListItem>
				<asp:ListItem Value="3" Text="Gulau"></asp:ListItem>
				<asp:ListItem Value="4" Text="Ri"></asp:ListItem>
			</asp:DropDownList>
			<br /><br />
			<div id="statusDisplay">
				<div id="innerStatusDisplay"></div>
			</div>
			<br /><br />
			<div id="employeeDetails" style="visibility:hidden">
				<table>
					<tr style="font-weight: bold">
						<td>First Name</td><td>Last Name</td><td>anos de Experiencia</td>
					</tr>
					<tr>
						<td class="datacell"><span id="empFname"></span></td>
						<td class="datacell"><span id="empLname"></span></td>
						<td class="datacell"><span id="empExperience"></span></td>
					</tr>
				</table>
			</div>
		</div>
</div>

Uma função onchange foi adicionado ao DropDownList, para que, quando o usuário seleciona um item da DropDownList, uma função JavaScript vai ser despearadao! O método JavaScript chamado GetEmployeeDetails irá iniciar um pedido AJAX para o servidor ao solicitar um formulário Web ASP.NET e fornecimento ID do empregado a quem as informações devem ser exibidas.

 

Listando 11: GetEmployeeDetails função

 

function GetEmployeeDetails() {	
	postRequest = new HttpRequest();
	postRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	postRequest.failureCallback = requestFailed;
	
	setStatusText("");
	ResetEmployeeDetails();
 
	// pega empregado selecionado
	var n = document.forms[0].elements["ddlEmployees"].selectedIndex;
	var empID = document.forms[0].elements["ddlEmployees"].options[n].value;
	
	// Validar o employee ID
	if (empID == -1) {
		setStatusText("Selecione um funcionário válido.");
		return;
	}
 
	var empID = encodeURI(empID);	
	postRequest.url = "GetEmployeeDetails.aspx";
	postRequest.successCallback = responseOK;
	postRequest.post("EmpID=" + empID);
}

A função começa a criar uma nova instância do objecto XMLHttpRequest usando uma classe HttpRequest. Em seguida, ele define o tipo de conteúdo do pedido e ao fracasso da chamada ao método no caso de um problema ocorrido durante o envio do pedido ou a receber uma resposta do servidor.

 

A classe HttpRequest é um wrapper.É uma referência AJAX se está a planear introduzir AJAX para suas aplicações web.

 

O código, em seguida, obtém o empregado que foi selecionado a partir do DropDownList. O empregado ID é codificado e, em seguida, este passo é feito intencionalmente, porque a função está usando POST para pedir outro formulário Web ASP.NET para processar o pedido.

 

Por último, a URL a ser solicitado é atribuído à propriedade URL da instância do objeto HttpRequest o sucesso e callback um método é especificado, que é o método para quando o pedido AJAX está concluído e que a resposta está OK. A última linha do método à solicitação assíncrona para o servidor, solicitando o formulário da Web ASP.NET GetEmployeeDetails.

 

Listando 12:

 

protected void Page_Load(object sender, EventArgs e)
{
// Validar o Form objeto
  if (Request.Form["EmpID"] != null)
  {
	if (!string.IsNullOrEmpty(Request.Form["EmpID"].ToString()))
	{
// Request OK
	  this.requestOK = true;
 
// pega o valor EmployeeID
	  Employee employee = null;
	  int empID = Convert.ToInt32(Request.Form["EmpID"].ToString());
 
// Prepara object
	  switch (empID)
	  {
		case 1:
// funcionario  selecionado
		  employee = new Employee("Xanburzum", "X@nburzum", 1, new string[]
		  {
			"2005", "2006"
		  }
		  );
		  break;
		case 2:
// Employee Keka selecionado
		  employee = new Employee("Lika", "keka", 2, new string[]
		  {
			"2004", "2005", "2006"
		  }
		  );
		  break;
		case 3:
// Employee Gulau selecionado
		  employee = new Employee("Gulau", "ASKE", 3, new string[]
		  {
			"2003", "2004"
		  }
		  );
		  break;
		case 4:
// Employee Ri selecionado
		  employee = new Employee("Ri", "Abdul Malak", 4, new string[]
		  {
			"2005", "2006"
		  }
		  );
		  break;
		default:
// empregado Errado selecionado
		  this.requestOK = false;
		  break;
	  }
 
	  Response.Clear();
	  Response.ContentType = "application/json";
	  if (this.requestOK)
	  {
// JSON response
		string output = Newtonsoft.Json.JavaScriptConvert.SerializeObject
		  (employee);
		Response.Write(output);
	  }
	  Response.End();
	}
  }
}

A page load GetEmployeeDetails primeiro recupera o ID do empregado, que foi destacado para a sua realização através do pedido AJAX. Este é apenas um manequim que irá utilizar uma declaração switch C # para verificar o ID do empregado e, conseqüentemente, um novo objeto Empregado é construída.

 

Depois que o empregado objeto é criado, o código limpa o resposta atual, e define o tipo de conteúdo da resposta ao pedido / json, que é o certo tipo de conteúdo quando você está enviando dados JSON para o cliente.

 

Depois disso, o objeto é empregado serializada em um objeto JSON string. Finalmente, o objeto JSON string é escrito de volta para o cliente.

 

Assumindo o pedido / resposta é feito em segurança (na maioria das vezes), a função requestOK vai disparar no cliente. Este é o método que foi definido para o sucesso do método de callback HttpRequest instância.

 

Listando 13: função callback

 

function responseOK(httpRequest)
{
  var statusText = "Employee not found!"
 
// Preencha o FirstName, LastName, e anos de experiência, se disponível.
  try
  {
// Mostrar detalhes do employee 
	var empDetails = document.getElementById("employeeDetails");
	if (empDetails != null)
	  empDetails.style.visibility = "";
 
	var jsonObj = postRequest.responseText.parseJSON();
 
// Set FirstName
	var fname = document.getElementById("empFname");
	if (fname != null)
	  fname.innerHTML = jsonObj.FName.toJSONString();
 
// Set LastName
	var lname = document.getElementById("empLname");
	if (lname != null)
	  lname.innerHTML = jsonObj.LName.toJSONString();
 
	var exp = document.getElementById("empEmployment");
	var splitExp = "";
	for (i = 0; i < jsonObj.YearsOfEmployment.length; i++)
	{
	  splitExp = splitExp + jsonObj.YearsOfEmployment[i].toJSONString();
 
	  if (i != (jsonObj.YearsOfEmployment.length - 1))
		splitExp = splitExp + ",";
	}
	if (exp != null)
	  exp.innerHTML = splitExp;
 
// Update status
	statusText = "Employee Details Found";
  }
  catch (ex){}
 
  setStatusText(statusText);
}

A função acima recebe a resposta do servidor, ele analisa o objeto JSON string em um objeto JSON usando o utilitário do arquivo de métodos JSON.Você deve verificar se o response text is null ou não,antes de fazer qualquer análise!

 

Finalmente, o formulário on-line é preenchida com as informações do trabalhador que foi selecionado a partir do DropDownList.

 

O seguinte é um instantâneo da página exibe os detalhes de um empregado que foi selecionado a partir do DropDownList:

 

 

Conclusão

 

 

Neste artigo,foi apresentado JSON. Primeiro, eu comecei com uma pequena introdução ao JSON e à diferença entre XML e JSON. Eu expliquei em detalhes o que é JSON, discutindo os tipos de dados JSON, mostrando como gerar JSON dados formatados no servidor, como consumir JSON sobre o cliente e, finalmente, uma amostra que a maioria das funções de que seria necessária quando se utilizar JSON como o principal formato de intercâmbio de dados entre o cliente e servidor em uma forma assíncrona.

[eibon 2]

Muito interessante!

Dei uma "folheada",mas pretendo ler ainda hoje (daqui a poucos minutos)!

Bem legal estar se interando sobre o tal JSON,um amigo disse que algumas empresas já estao requerindo conhecimentos em cima disso.

Abraço!

[xanburzum 169]

sem duvida, é um ótimo recurso...

[Ted k' 126]

agora cara, só faltou a fonte de tradução:

http://aspalliance.com/1168_Introducing_JSON.1

[xanburzum 169]

na verdade eu nem tinha mais a fonte, pois como sempre estamos estudando , muitas vezes na correria copiamos para estudra depois.

 

Valeu a dica