JQuery + ASP.NET: Chamando um WebMethod usando JQuery.ajax

Hoje vamos ver uma coisa simples, mas que pode confundir alguns desprevinidos ao tentar usá-lo: chamar um WebMethod com Ajax. Um WebMehtod é um método que é disponibilizado como um XML Web Service (mas que não necessáriamente retorna um XML) e é muito utilizado no ASP.Net para fazer requisições no banco de dados, entre outros tipos de requisições sem ter que recarregar a página totalmente.


Para fazer a requisição AJAX pelo JQuery, temos a seguinte sintaxe:

$.ajax( [settings] );

Onde settings é a configuração do AJAX no formato de objeto.

Vamos pegar um código de exemplo, começando pelo JavaScript:

01. $.ajax({
02.    type:"POST",
03.    url: "Default.aspx/carregarAlbum",
04.    data:'{user:"Fulano", idAlbum:15}',
05.    contentType:"application/json; charset=utf-8",
06.    dataType: "json",
07.    success: function(resposta){
08.        alert("Função após procedimento ser sucesso:"+JSON.stringify(resposta.d));
09.    },
10.    failure: function(erro){
11.       alert("Função para tratamento de erros");
12.    }
13. });


Explicando o código:
Na linha 1 temos a invocação de uma requisição AJAX, que leva como parâmetro, um objeto com alguns atributos de configuração, que aqui estamos usando o seguinte:

• type: como será enviado a requisição. Para quem sabe HTML, é o mesmo conceito do GET e POST dos formulários;
• url: aqui estará a URL para onde os dados serão enviados, mas aqui tem um detalhe: além da url da página, você deve colocar o nome do método que a página deve executar. Na linha 03 temos uma requisição para a página "Default.aspx" no qual executará o método "Carregar Album";
• data: são dados contendo as informações que serão enviadas para a página. Perceba que quando nós implementarmos o método no aspx.cs da página, cada atributo deste objeto será um parâmetro deste método.
• contentType: É o tipo da formatação de dado que está utilizando. Neste exemplo, estou enviando um objeto no formato JSON, com a codificação UTF-8;
• dataType: indica o tipo de dado que você deseja obter como retorno;
• success: função de callback para quando a requisição AJAX for executada com sucesso. É aqui que fará os procedimentos e recuperação dos dados obtidos. Essa função deve ter um parâmetro, no qual as informações, inclusive os dados obtidos estarão disponível. Os dados obtidos ficam no atributo "d" do parâmetro que colocar na função.
• failure: função de callback para quando ocorre um erro.

Existem outras configurações e atributos que podem ser modificados. Para maiores detalhes, veja a documentação aqui.

Agora, no lado do servidor, temos a seguinte estrutura (no caso, estou fazendo no C#):

01. [System.Web.Services.WebMethod]

02. public static Album carregarAlbum(string user, int idAlbum)

03. {

04.     return new Album(user,idAlbum);

05. }

Vamos ver o que temos neste trecho:
Na linha 01, temos uma declaração que o método a seguir será um WebMethod, ou seja, um método que pode ser invocado através de uma URL.
Na linha 02, temos a declaração do método, se ele for static ou não, vai depender da ocasião, mas como não vamos acessar nenhum atributo da classe, podemos estar seguro de usar static. E também temos dois parâmetros, que levam o mesmo nome dos atributos que declaramos na requisição (linha 04 do Javascript).
Então, na linha 04, nós retornamos um objeto Album, que usará os parâmetros passados. Esses dados vão estar disponível no atributo "d" na função de callback de sucesso. Se por algum motivo, um erro ocorrer, e o método não for executado com sucesso, um erro será lançado.

Então é isso, espero que o artigo possa ser de grande ajuda e vamos programar.