Hoje estava conÂverÂsando com um amigo que comeÂçou a estuÂdar AJAX
para fazer uma entreÂvista de emprego para proÂgraÂmaÂdor Jr e que pediam conheÂciÂmenÂtos básiÂcos de PHP, AJAX e JQuery.
PerÂgunÂtei para ele o que você entende por AJAX?
“É um baguÂlho que pega inforÂmaÂções do lado serÂviÂdor sem
preÂciÂsar recarÂreÂgar a página.â€
A resÂposta esta certa e o conÂceito é este.
Então hoje resolvi criar um post sobre o que é o tal de AJAÂXem um
exemÂplo praÂtico e simÂples de entenÂder que mosÂtrei para meu amigo.
Vamos usar o JQuery para fazer a coneÂxão AJAX.
No exemÂplo vamos pegar o conÂteúdo de uma pagina “texto.html†e adiÂciÂoÂnar
o conÂteú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 é simÂples mas já dá uma idéia de como funÂciÂona 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.
