Recuperando dados do Servidor : Ajax com JQuery - Parte 1

No artigo o autor ensina como trabalhar com Ajax utilizando jQuery passando parâmetros e recuperar as informações do servidor.



Olá pessoal sejam bem vindos a mais um artigo de Ajax, faz um bom tempo que não venho escrevendo sobre Ajax com jQuery mas no artigo de hoje pretendo mostrar como passar parâmetros e recuperar com Ajax.

Vamos aplicar aqui alguns conceitos que aprendemos no último artigo que escrevi sobre javascript orientado a objeto.

Vamos começar montando nossa estrutura, como mostra o exemplo abaixo.

<script type="text/javascript">

$(document).ready(function () {

 

var Control = {

_search: function (pNome) {

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

$.ajax({

type: "POST",

url: "Default.aspx/GetNomes",

contentType: "application/json",

data: Parameters,

success: function (data) {

}

});

}

 

}

});

script>

 

 

Nossa estrutura começa no objeto control, dentro vamos colocar todas as nossas funções mantendo um código limpo e legível.

O primeiro método que temos search que faz uma chamada Ajax do tipo POST pegando todos os parâmetros colocados na variável Parameters e enviando as informações para servidor.

Vamos começar a criar os métodos no Code Behind da forma que conseguimos recuperar na chamada Ajax.

[System.Web.Services.WebMethod]

public static string[] GetNomes(string pNome)

{

return new string[] {"Emerson", "Eder", "Angelica" }.Where(t => t.Contains(pNome)).ToArray();

}

 

Criei um método estático que tem uma assinatura WebMethod, os métodos sempre precisam ser estáticos é obrigatoriamente com essa assinatura para funcionar.

Usei uma Expression Lambda, que faz uma busca no nosso Array procurando o nome que recebeu como parâmetro.

Voltando para nossa página aspx vamos montar a estrutura HTML e complementar nosso Js.

<input type="text" id="txtSearch" />

 

<a id="aSearch" href="javascript:void(0);">Pesquisara>

 

<select id="ddlResultado">

select>

 

A resposta do servidor vai preencher o dropdown, cada vez que fazer uma nova busca.

Na próxima parte do artigo vamos terminar o código JS, e analisar no browser o tamanho do POST, e resposta utilizando Ajax com jQuery.

Até mais Emerson Jose.

 

Artigos relacionados