Retornar Objetos : Ajax com JQuery - Parte 2

Olá pessoal, continuando nossa série de artigos sobre Ajax utilizando jQuery , hoje vamos termina nossa estrutura JS e começar a testar e analisar as vantagens.

Vamos começar completando nosso código JavaScript, o seu código devera ficar assim.

<script type="text/javascript">

$(document).ready(function () {

var Control = {

_search: function (pNome) {

var Paramters = "{pNome:'" + pNome + "'}";

$.ajax({

type: "POST",

url: "Default.aspx/GetNomes",

contentType: "application/json",

data: Paramters,

success: function (data) {

$('#ddlTeste').find("option").remove();

$.each(data.d, function (index, value) {

$('#ddlTeste').append("" + value + "");

});

}

});

}

}

$('#aSearch').click(function () {

Control._search($('#txtSearch').val());

});

});

script>

Após completar o código inserimos dentro da função sucess o evento each para popular nosso dropdown, abaixo do objeto control, coloquei um evento click no botão de busca chamando o evento Search passando como parâmetro o valor do campo input.

Executando o projeto vamos ter como resultado a imagem 01, fazendo POST para servidor com 17bytes contando input de dados e resposta do servidor, na próxima imagem teremos o mesmo evento utilizando Ajax Microsoft com 846bytes para ter o mesmo resultado, com isso podemos perceber que existe uma grande diferença de performance quando utilizamos Jquery na maioria dos casos.

Imagem 01

Image 02 – Ajax Microsoft

Agora vamos retorna um objeto, primeiro precisamos criar uma classe como mostra abaixo.

public class Pessoa

{

public string _sobreNome { get; set; }

public int _idade { get; set; }

public Pessoa(string sobreNome,int idade)

{

this._sobreNome = sobreNome;

this._idade = idade;

}

}

Depois de criar a classe adicione esse novo método na sua página Default.

[System.Web.Services.WebMethod]

public static Pessoa LoadDados()

{

return new Pessoa("Jose", 20);

}

Após criar a classe e incluir o método precisamos colocar um novo botão e uma tag “p” aonde vamos adicionar o conteúdo após clicar no link.

   <a id="aLoad" href="javascript:void(0);">Load Conteúdoa>

<p>p>

Depois coloque no objeto control uma nova função e adicione um evento click para nosso novo link.

_loadDetalhe: function () {

$.ajax({

type: "POST",

url: "Default.aspx/LoadDados",

contentType: "application/json",

data: "{}",

success: function (data) {

$('p').html("Sobrenome:" + data.d._sobreNome + " idade:" + data.d._idade + "");

}

});

}

Embaixo do outro evento click coloque esse novo evento responsável por chamar o método de _LoadDetalhe do objeto control.

$('#aLoad').click(function () {

Control._loadDetalhe();

});

Espero que vocês tenham gostado e não deixem de comentar qualquer duvida entre em contato.

Att.

Emerson Jose

http://programmingcsharp.wordpress.com

Código Fonte:http://programmingcsharp.wordpress.com/codigo-fonte/