Carregando o conteúdo de um arquivo numa página com AJAX

Depois de um grande dia sendo mesário nas eleições para presidente, vamos a mais um interessante post sobre jQuery!

Neste tutorial simples, vamos carregar um conteúdo qualquer de um arquivo de texto dentro de uma div numa página html.

Para começar, crie uma página html básica com mais ou menos essa cara:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
// a programação vai aqui
</script>
</head>

<body>
<div id="ajax">
<!--O conteúdo da div vai ser carregado aqui -->
</div>
</body>

</html>

 
Na div com o id ajax, será carregado o conteúdo do arquivo de texto assim que a página carregar. Então vamos à programação!

Para carregarmos o conteúdo do arquivo usaremos o método load() fornecido pela nossa inestimável biblioteca jQuery. A assinatura do método é essa:

$(seletor).load(url,dados,funcao_callback);

 
Parâmetros:

  • url: Obrigatório. Endereço para o qual será enviada a requisição
  • dados: Opcional. Dados adicionais que podem ser enviados ao servidor
  • funcao_callback: Opcional. Função que será chamada automaticamente quando a requisição for completada

Como faremos a requisição mais básica possível, só vamos especificar a url do arquivo de texto. Veja como fica a programação jQuery:

$(document).ready(function(){
    $("ajax").load("arquivo.txt");
});

 

Feito isso, assim que o conteúdo html da página for carregado, será chamada a função load(), que fará a requisição do conteúdo do arquivo arquivo.txt e o exibirá na div com o id ajax.

Bom, esse tutorial foi fácil, mas é só o início da jornada pelas entranhas do nosso AJAX.
Até mais!

Sobre d!

Aluno dos cursos de Análise de Sistemas (cefet-sp) e Técnico em Informática (etesp)
Esse post foi publicado em jQuery. Bookmark o link permanente.

Deixe um comentário