Ajax com jQuery com $.ajax() e load()

Com a explosão da Web 2.0 uma tecnologia ficou muito popular, estamos falando do AJAX, que do inglês quer dizer Asynchronous Javascript And XML.

Resumidamente, com Ajax ficou possível buscar ou enviar dados no servidor sem precisar sair da página em uso. Isto é muito útil pois dá uma sensação de “Em Tempo Real”.

Como jQuery pode me ajudar com AJAX?

De todas as maneiras possíveis!

jQuery possui uma vasta gama de funções criadas para agilizar e facilitar solicitações em AJAX.

Vamos ver as formas de utilização possíveis com $.ajax() e load(). Em outros post vou explorar outras funções.

$.ajax( option )

Realiza uma solicitação HTTP carregando uma página remota. Com esta função é possível controlar o envio da solicitação monitorando o status da mesma. Para mais informações acesse http://docs.jquery.com/Ajax/jQuery.ajax#options e clique na aba Options.

Um exemplo:

[testes-ajax.html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Testes Ajax</title>

<script src="jquery.js"></script>

<script>

$(document).ready(

 function()

  {

	// Carregamos o conteúdo da home quando a página é carregada

	$("#conteudo").load("paginas.php?p=home");

	// Ao clicar em algum link, o conteúdo principal é modificado

	// de acordo como valor do atributo "href" de "A"

	$('ul li a').click(

                 function()

	      {

		  var olink = $(this).attr("href");

		  $.ajax(

		  {

		  // Especificamos o método que quermos utilizar

			method: "get",

			// Especificamos o arquivo que vai processar a solicitação

			url: "paginas.php",

			// A QUERY STRING contendo os dados necessários

			data: "p=" + olink,

			// O que deve acontecer antes de ser enviado

			beforeSend: function(){

			  // Mostra a mensagem de carregando

			  $("#carregando").show("fast");

			},

			// O que deve acontecer quando o processo estiver completo

			complete: function(){

			  // Oculta a mensagem carregando

			  $("#carregando").hide("slow");

			},

			// Se houve sucesso vamos carregar o resultado para o argumento

			// "conteudo" para utilizá-lo onde desejarmos

			success: function(conteudo){

			  // Muda o html do div de acordo com o que foi carregado

			  $("#conteudo").html(conteudo);

			}

		  }

		);

	    // Cancela o efeito do atributo href

		return false;

	  }

	);

  }

 );

</script>

</head>



<body>

<ul style="float:left; margin-right:20px">

	<li><a href="home">Home</a></li>

	<li><a href="quemsou">Quem Sou</a></li>

	<li><a href="contato">Contato</a></li>

</ul>

<div id="carregando"

style="display:none; font-weight:bold; position:absolute; right:0; top:0">

Carregando a página, aguarde....</div>

<div id="conteudo">

</div>

</body>

</html>

[paginas.php]

<?php if($_GET['p'] == 'home') : ?>

<h1>Home</h1>

<p>Seja bem-vindo, você está na homepage!</p>

<?php endif; ?>



<?php if($_GET['p'] == 'quemsou') : ?>

<h1>Quem Sou</h1>

<p>Sabe que eu num sei!</p>

<?php endif; ?>



<?php if($_GET['p'] == 'contato') : ?>

<h1>Contato</h1>

<p>Sei lá, me procura no google!</p>

<?php endif; ?>

load()

Carrega o HTML de um arquivo remoto e o injeta diretamente dentro do DOM.

Nós usamos load() para carregar o conteúdo da homepage já quando a página é carregada, mas você pode utilizar load() para qualquer evento. Veja meu tutorial Criar Combo Dinâmico em Ajax com jQuery + PHP para ver como esta função é muito útil para injetar html dentro do DOM.

5 comentários sobre “Ajax com jQuery com $.ajax() e load()”

  1. amigo,

    se o link for puxar um arquivo .php na pasta como seria?

    exemplo: ao inv?s de todo o conteudo das outras paginas estarem em 1 so arquivo, ele fica separado, cada um com sua pagina: o contato chama contato.php, quem sou puxa quemsou.php, deu pra entender?

  2. Bom, F?bio,
    eu usei a l?gica de pegar o valor do atributo “href” para passar ? solicita??o qual conte?do eu gostaria de obter, ent?o ? por ai que n?s come?amos as mudan?as.

    Veja:

    url: “paginas.php”,
    // A QUERY STRING contendo os dados necess?rios
    data: “p=” + olink,

    Podemos mudar isto. Ao inv?s de soliciar o url “paginas.php”, podemos colocar assim:

    url: olink + .”php”

    E voc? pode retirar o parametro “data” porque n?o vai mais ser usado e vai conflitar com “olink”.

    Feito isto agora ser? solicitado arquivos no lugar de acessar vari?veis em um s? arquivo.

    Falous!!!

  3. amigo,

    realizei os testes aqui e n?o funcionou, testei criando um arquivo contato.php e alterei o link puxando contato.php com extensao mesmo e nao funcionou, fiz no link sem a extensao .php, tbm nao, tirei e coloquei o do arquivo contato e tbm nada, coloquei e tirei uma virgula no url: olink + .?php? e nada tambem, e pagina principal q seria home.php nao estava sendo puxava assim que abriu a pagina, da uma testada ai pra ver http://www.fabiolino.net/ajax

    abra?o amigo, desculpa qualquer coisa em pleno domingao de sol doido pra ir pra praia aSUEOAI sem onda eh foda ;p

  4. realizei algumas programa??es e consegui fazer com que ele venha puxar o seu devido arquivo mas o problema agora eh fazer os links no flash pelo que vejo ele so puxa pela ul e li, como poderiamos fazer? abs

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *