Meu objetivo com esta série de POSTs é mostrar como fazer uma requisição via AJAX com o JQuery. Desde os meios mais simples aos mais porradas!
O JQuery tem alguns metodos para fazer requisições AJAX, são eles: $.ajax(), $.post(), $.get() e $.load(). E também tem $.getJSON() e $.getScript para aplicações um tanto complexas.
Vamos ver sobre todos estes metodos nesta série de POSTs.
Neste POST vamos ver a seguinte função:
load( url , [data] , [callback] )
onde:
url String
É a URL da pagina a ser carregada.
data (Opcional) Map string
São pares de chave e valor que serão enviados ao servidor, via POST.
callback (Opcional) Callback function
Uma função chamada assim que a requisição ajax estiver completa. Independente do resultado ela será executada.
O nome dessa função ja diz tudo. Ela serve para carregar (load) uma pagina. Para entende-la melhor vamos colocar a mão na massa.
Exemplo1:
carrega via ajax
Aqui vem a resposta!
5. Quando a pagina estiver carregada,
6. Todos os <a> (links) quando forem clicados,
7. Carrega na DIV com id resposta a pagina teste.html.
8. E retorna falso. Por que? para que o link não seja normalmente, somente via ajax.
Muito simples!
Agora vamos tornar a coisa um pouco mais dinamica.
Exemplo2:
carrega via ajax
Aqui vem a resposta!
5. Quando a pagina estiver carregada,
6. Todos os <a> (links) quando forem clicados,
7. Carrega na DIV com id resposta a pagina definida no href.
8. E retorna falso. Por que? para que o link não seja carregado normalmente, somente via ajax.
Assim voce pode definir na propriedade href a pagina a ser carregada via ajax. Simples também não?
Dica:
Sempre que dermos uma nova ação para um objeto que ja possui uma ação, temos que fazer com que a nova ação retorne falso (return false). A menos que desejemos que as duas ações sejam executadas, que raramente é esperado.
Com estes codigos acima TODOS os links do site serão carregados via ajax. E agora? como definir links para carregar via ajax e outros normalmente? Vamos la:
Exemplo3:
carrega via ajax
carrega via normal
Aqui vem a resposta!
5. Quando a pagina estiver carregada,
6. Todos os <a class=”ajax”> (links com a classe ajax) quando forem clicados,
7. Carrega na DIV com id resposta a pagina definida no href.
8. E retorna falso. Por que? para que o link não seja carregado normalmente, somente via ajax.
Agora sim ficou uma aplicação simples e usavel. Voce pode tranquilamente usar este codigo simples em suas aplicações sem problemas.
Por hoje ficaremos por isso mesmo. Nós não vimos as opções data e callback function mas no próximo POST vamos tratar destas opções alem de vermos alguns metodos para requisição AJAX.
