O JQuery oferece algumas opções para fazer suas solicitações AJAX com retorno JSON, neste post vamos analisar três opções, uma utilizando o método getJSON outra com método post e por fim uma com o método ajax.

Antes de começar os exemplos com JQuery precisamos preparar a aplicação no lado do servidor. Para o modelo vou utilizar o Entity Framework com o banco de dados Northwind , no EF vou manter todas as configurações padrão e vou utilizar a entidade Customers, após as configurações do EF podemos criar o "CustomersController", conforme o código abaixo.

public class CustomersController : Controller
{
    //
    // GET: /Customers/

    public ActionResult Index()
    {
        return View();
    }


    public ActionResult ActionGetJSON(string termo)
    {
        Entities context = new Entities();
        var resultado = from customer in context.Customers
                        where customer.CompanyName.Contains(termo)
                        select new { CompanyName = customer.CompanyName, CustomerID = customer.CustomerID };
        return Json(resultado, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult ActionPostJSON(string termo)
    {
        Entities context = new Entities();
        var resultado = from customer in context.Customers
                        where customer.CompanyName.Contains(termo)
                        select new { CompanyName = customer.CompanyName, CustomerID = customer.CustomerID };
        return Json(resultado);
    }
}

Para montar os nosso exemplos vou utilizar as Actions "ActionGetJSON " e "ActionPostJSON", como você já deve ter percebido uma é acessada via GET e a outra via POST, note que a Action acessada via GET passa dois parâmetros para o método Json que é responsável pela serialização do objeto, se você não passar o segundo parâmetro indicando que o GET é permitido uma execption será lançada.

Agora podemos definir a view Index,veja o código abaixo.

<div>
    <%=Html.TextBox("termo") %>
    <button id="btnBuscarComGetJson">Buscar com método getJSON</button>
    <button id="btnBuscarComPost">Buscar com método  post</button>
    <button id="btnBuscarComAjax">Buscar com método ajax</button>
</div>

<div id="resultado"></div>

Vamos definir os eventos onclick dos três botões abaixo, em um arquivo JavaScript separado do HTML, esse arquivo será criado no decorrer do post.

Método getJSON

O nome do método define o que ele faz, ele faz uma solicitação get e espera um retorno JSON, ele espera três parâmetros url,data e callback.O parâmetro url: define a url da solicitação,data: define os parâmetros da solicitação e callback: define a função que vai tratar o retorno do servidor, a função de callback será executada somente se a solicitação for executada com sucesso.

function btnBuscarComGetJson_click() {
    $.getJSON("/customers/ActionGetJSON/", { termo: $("#termo").val() }, function(data) {
        $("#resultado").empty();
        $("#resultado").append("<table><thead><tr><th>Company Name</th><th>Customer ID</th></tr></thead><tbody id='bodyTable'>");

        $(data).each(function() {
            $("#bodyTable").append("<tr><td>" + this.CompanyName + "</td><td>" + this.CustomerID + "</td></tr>");
        });

        $("#resultado").append("</tbody></table>");
    });
}

O código acima define o método que trata o evento onclick do botão "btnBuscarComGetJson", a função de callback que foi definida de forma anônima escreve uma table dentro da DIV "resultado".

Método post

Esse método também diz o que faz, ele faz uma solicitação post, você pode passar quatro parâmetros para esse método url,data,callback que já conhecemos e dataType.O parâmetro dataType defini o tipo de retorno, ele é um parâmetro opcional caso você não defina o tipo de retorno ele será identificado automaticamente.

function btnBuscarComPost_click() {
    $.post("/customers/ActionPostJSON/", { termo: $("#termo").val() }, function(data) {
        $("#resultado").empty();
        $("#resultado").append("<table><thead><tr><th>Company Name</th><th>Customer ID</th></tr></thead><tbody id='bodyTable'>");

        $(data).each(function() {
            $("#bodyTable").append("<tr><td>" + this.CompanyName + "</td><td>" + this.CustomerID + "</td></tr>");
        });

        $("#resultado").append("</tbody></table>");
    },"json");
}

O método acima define a função que vai tratar o evento onclick do botão "btnBuscarComPost", ele é muito parecido com o método "getJSON", a única diferença é o quarto parâmetro que foi definido como JSON.

Método ajax

O método ajax é o mais completo de todos, ele recebe apenas um parâmetro que é um objeto com todas configurações, para esse exemplo eu vou definir um objeto com sete propriedades, você pode ver a lista completa de opção na documentação http://api.jquery.com/jQuery.ajax/

function btnBuscarComAjax_click() {
    $.ajax({
        url: "/customers/ActionPostJSON/",
        data: { termo: $("#termo").val() },
        type:"post",
        dataType: "json",
        beforeSend: function(XMLHttpRequest) {
            alert('Inicio....');
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert('Erro....');
        },
        success: function(data, textStatus, XMLHttpRequest) {
            $("#resultado").empty();
            $("#resultado").append("<table><thead><tr><th>Company Name</th><th>Customer ID</th></tr></thead><tbody id='bodyTable'>");

            $(data).each(function() {
                $("#bodyTable").append("<tr><td>" + this.CompanyName + "</td><td>" + this.CustomerID + "</td></tr>");
            });

            $("#resultado").append("</tbody></table>");
        }
    });
}

O método acima define a função que vai tratar o evento onclick do botão "btnBuscarComAjax", o objeto de configuração passado como parâmetro para a função ajax possui sete propriedades:

url :define a url da solicitação.

data: defini os parâmetros.

type: define o tipo de solicitação os mais comuns são GET ou POST.

dataType: define o tipo de retorno os mais comuns são xml, json, script, ou html.

beforeSend: define a função que será executada antes da solicitação, você pode utilizar esse método para fazer confirmações e validações, essa função pode ser utilizada também para mostrar um modal com uma animação ou um simples "Aguarde...".

error: define a função que será executada caso ocorra algum erro na solicitação.

success: define a função que vai tratar o resultado quando a função for executada com sucesso.

Para finalizar falta apenas adicionar o código que registra o evento click para os três botões.

$(document).ready(function() {
    $("#btnBuscarComGetJson").click(btnBuscarComGetJson_click);
    $("#btnBuscarComPost").click(btnBuscarComPost_click);
    $("#btnBuscarComAjax").click(btnBuscarComAjax_click);
});

Acho que deu para perceber que o método ajax é o mais flexível de todos, a partir deste método você pode criar rotinas especificas para sua aplicação, por exemplo, você pode criar um método que utiliza o método ajax e colocar um loading padrão para todas solicitações, colocar uma mensagem de erro padrão,tratar o resultado de forma padrão em fim as possibilidades são muitas.

Os método getJSON e post são excelentes opções, mais por padrão eles não tem suporte a métodos auxiliares ,por exemplo, se eu quiser fazer algum tratamento antes das minhas solicitações ou tratar erros eles não possui definições para isso, você poderia utilizar métodos globais que o JQuery disponibiliza para resolver esse problema, mais isso é assunto para outro post.

Daniel Fonseca Castro