Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

arrow_back Aula 08 - jQuery (Parte 2)

Métodos – AJAX

Nesta seção, veremos alguns dos métodos que a API do jQuery disponibiliza para facilitar e aumentar a produtividade do desenvolvimento utilizando AJAX. A tabela a seguir faz esse resumo. Para a referência completa, dirija-se ao seguinte endereço: <http://api.jquery.com/category/ajax/>

play_circle_filled
Vídeo 04 - get JSON

 

Método Descrição
$.ajax(opções) Recupera dados remotos de acordo com as opções informadas como parâmetro.
$.get(url, dados, callback, type) Recupera dados remotos utilizando HTTP GET.
$.post(url, dados, callback, type) Recupera dados remotos utilizando HTTP POST.
$.getJSON(url, dados, callback) Recupera dados em formato JSON utilizando HTTP GET.
Tabela 3 - Principais métodos da API para facilitar desenvolvimento AJAX.

Veja a seguir um exemplo utilizando o método 'load':

​x
1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2
<html>
3
  <head>
4
  <title>Teste</title>
5
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
6
  </head>
7
8
  <body>
9
    <script type="text/javascript">
10
       $(document).ready(function() {
11
​
12
         $("#b1").click(function() {
13
           $("#ta1").load("info.txt");
14
         });
15
​
16
       });
17
    </script>
18
​
19
    <textarea id="ta1" rows="5" cols="50"></textarea>
20
    <br>
21
    <input id="b1" type="button" value="recuperar dados">
22
​
23
  </body>
24
</html>
25
​

 

Notas

  • Na linha 10, definimos as operações que serão realizadas após a página ser completamente carregada.
  • Na linha 12, definimos o código a ser executado quando o botão cujo id é 'b1' for clicado.
  • Na linha 13, através do método 'load' da API de AJAX do jQuery, buscamos do servidor os dados contidos no arquivo “info.txt" e preenchemos o campo de texto 'ta1'. Crie esse arquivo “info.txt” na pasta WebContent, assim como o HTML, e coloque algum conteúdo nele para que ele seja exibido no textarea do HTML.
[A] Anterior
6/12
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados