Phaneronsoft » iniciante http://www.phaneronsoft.com/phaneronsoft Desenvolvimento Web Sat, 28 Aug 2010 00:11:28 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Exemplo Básico de AJAX com JQUERY http://www.phaneronsoft.com/phaneronsoft/2009/10/28/exemplo-basico-de-ajax-com-jquery/ http://www.phaneronsoft.com/phaneronsoft/2009/10/28/exemplo-basico-de-ajax-com-jquery/#comments Wed, 28 Oct 2009 16:33:42 +0000 Marcelo Korjenioski http://www.phaneronsoft.com/phaneronsoft/?p=403 Hoje estava conversando com um amigo que começou a estudar AJAX
para fazer uma entrevista de emprego para programador Jr e que pediam conhecimentos básicos de PHP, AJAX e JQuery.

Perguntei para ele o que você entende por AJAX?
“É um bagulho que pega informações do lado servidor sem
precisar recarregar a página.”

A resposta esta certa e o conceito é este.

Então hoje resolvi criar um post sobre o que é o tal de AJAXem um
exemplo pratico e simples de entender que mostrei para meu amigo.

Vamos usar o JQuery para fazer a conexão AJAX.
No exemplo vamos pegar o conteúdo de uma pagina “texto.html” e adicionar
o conteúdo na página “index.html” em uma tag span.

Vamos criar uma página index.html com o código abaixo.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EXEMPLO BASICO DO USO DO AJAX COM JQUERY</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<input type="button" onclick="ajax();" value="Pegar texto" name="Pegar texto" />
<br />
<span id="conteudo_ajax"></span>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ajax () {
// Caso queira limpar o valor do elemento antes de adicionar remova o comentario abaixo.
//$("#conteudo_ajax").empty();
jQuery.ajax({
type: "get", // Defino o método de envio POST / GET
url: 'texto.html', // Informo a URL que será pesquisada.
success: function(html){
$("#conteudo_ajax").append(html); // Adiciono o valor dentro do elemento.
}
});
}
</script>

Agora crie uma página  texto.html com o texto para pesquisa


Texto que foi pego usando AJAX.

O código é simples mas já dá uma idéia de como funciona o AJAX para quem esta começando a estudar.

Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apre­sen­ta­dos.
É isso pes­soal uma ótima semana e até o próximo post.

]]> http://www.phaneronsoft.com/phaneronsoft/2009/10/28/exemplo-basico-de-ajax-com-jquery/feed/ 8