Exemplo Básico de AJAX com JQUERY

HTML, Javascript, JQuery Comentar >> Marcelo Korjenioski

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.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn
Tags: , , ,


  • Asné­sio

    Mas onde é que entra o XML aí?
    Não pre­cisa ter alguma inte­ra­ção com XML, já que o AJAX tra­ba­lha com XML_HTTP_REQUEST ?

    Obri­gado!

  • http://www.phaneronsoft.com Mar­celo Korjenioski

    Ele suporta XML ou Plain Text. O con­ceito de XMLHtt­pRe­quest foi cri­ado pela Micro­soft para ser usado no Outlook Web Access para Micro­soft Exchange Ser­ver 2000 e um tempo depois foi adi­ci­o­nado no Inter­net Explo­rer 5.0 em março de 1999.
    Hoje o XMLHtt­pRe­quest faz parte da API do DOM que pode ser usando no Javas­cript.
    Atu­al­mente é muito usado a for­ma­ção dos dados usando o padrão JSON com Plain Text.

  • http://www.programei.org Andre

    Opa mar­celo gos­tei muito do tópico, mais tem um pro­blema, e se eu quero pegar a página que está loca­li­zada em outro ser­vi­dor, isso não é possivel ?

    eu li que teria que criar um CGI para o ser­vi­dor, mais nada é cer­teza, Pode­ria me aju­dar com isso !?

  • http://www.phaneronsoft.com Mar­celo Korjenioski

    É pos­sí­vel ser em outro ser­vi­dor sim. Basta infor­mar a URL e ter per­mis­são para acessar.

  • Karla

    Quando clico no botão nada ocorre. O que pode ser?

  • Laís

    Estou cli­cando no botão e nada ocorre! Alguém pode me aju­dar? O que pode­ria ser?
    Obri­gada.
    Laís

  • http://www.phaneronsoft.com Mar­celo Korjenioski

    Olá Laís vc che­gou a criar o arquivo texto.html com algum texto nele?
    Você pre­cisa criar este arquivo no mesmo dire­to­rio do arquivo index.html para que ele possa fazer a lei­tura.
    Outro deta­lhe é que estou usando o Jquery que esta hos­pe­dado no goo­gle entao para rodar o soft­ware é neces­sa­rio ter cone­xão com a internet.

  • http://www.phaneronsoft.com Mar­celo Korjenioski

    Olá Karla vc criou o arquivo texto.html?

blog comments powered by Disqus
Designed by NattyWP Wordpress Themes.
Images by desEXign.