Recuperando dados do Servidor : Ajax com JQuery - Parte 1

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.