Primeiros passos com AJAX

Afinal, o que � AJAX?

Para entender o AJAX, � interessante recapitular o funcionamento de requisi��es / respostas e a exibi��o de paginas web, e solu��es para problemas comuns que ocorrem com essas opera��es. Numa paginas web, quando o usu�rio clica num link ou submete um formul�rio,o servidor processa as informa��es submetidas e devolve como resposta outra p�gina web completa, que ent�o � renderizada pelo browser em substitui��o � primeira. Um problema � que o atraso da transfer�ncia dos dados, somando ao tempo de renderiza��o pelo browser resulta na apresenta��o de p�ginas vazias e lentid�o na resposta a a��es do usu�rio.

Para minimizar esse efeito, uma abordagem � fazer a submiss�o de par�metros e dados por um �canal separado� (atrav�s de uma thread pr�pria dentro do browser) utilizando JavaScript. Em seguida o servidor devolve a resposta atrav�s do mesmo canal, evitando a necessidade de uma nova renderiza��o da p�gina. Dessa forma, a resposta n�o ter� o conte�do de uma p�gina inteira, mas apenas os dados que necessitam ser modificados (ex.: o conte�do de uma combobox). Um trecho de c�digo JavaScript se encarrega de manipular esses dados e atualizar a p�gina � e � dada a impress�o para o usu�rio de uma aplica��o mais interativa e responsiva.

Tal id�ia existe desde que se come�ou a usar scripts para manipular elementos de p�ginas HTML. Inicialmente, a t�cnica do �canal separado� era implementada por meio de um frame HTML de tamanho m�nimo, que realizava a requisi��o e obtinha como resposta uma pagina contendo, al�m dos dados, um script que atualizava o frame principal. O problema � que tal abordagem aumenta demais a complexidade de gerenciamento. Construir uma p�gina desse modo exige uma p�gina contendo o frameset (que define o layout dos frames na janela), um frame principal para mostrar os dados, e uma ou mais p�ginas para implementar a atualiza��o do frame principal (cada atualiza��o normalmente precisa de uma p�gina de resposta espec�fica).

A situa��o melhorou com a introdu��o, no Internet Explorer 5, da classe XMLHttpRequest, que permite a requisi��o ass�ncrona de p�ginas web e a manipula��o do conte�do dessas p�ginas na forma de dados (desde que a p�gina esteja num formato apropriado). Isso simplificou muito a implementa��o de requisi��es atrav�s de threads pr�prias dentro do browser, sem a necessidade de utiliza��o de utiliza��o de artif�cios como frames escondidos.

Al�m disso, num esfor�o por maior compatibilidade entre browser, o grupo Mozilla implementou uma classe equivalente ao XMLHttpRequest, o que foi seguido por outros browsers como Safari, Konqueror, OmniWeb e Opera. Criou-se ent�o uma ambiente prop�cio para atualiza��o da classe XMLHttpRequest (ou equivalentes) por grandes aplica��es como GMail, Google Earth, Google Suggest e Yahoo! Flickr, entre outras.

A t�cnica de criar uma p�gina atualizada dinamicamente e parcialmente atrav�s de requisi��es ao servidor, utilizando o objeto XMLHttpRequest, ficou conhecida como AJAX.

Implementa��o AJAX

Ap�s esse posicionamento hist�rico e tecnol�gico, est� na hora de vermos a t�cnica em a��o. Como exemplo, vamos criar uma p�gina simples, onde temos uma combobox com projetos cadastrados num sistema: ao mudar o projeto selecionado, � mostrada logo abaixo da combo uma tabela com as atividades cadastradas naquele projeto.

A Listagem 1 apresenta a p�gina de exemplo. A chamada a Fabrica.getProjetos() simula a obten��o de todos os projetos cadastrados no sistema; sua implementa��o n�o � discutida neste artigo, por�m os fontes completos podem ser obtidos no site da Java Magazine.

O fragmento JavaScript abaixo cria a refer�ncia para o objeto XMLHttpRequest:


var xmlhttp=false;

try {

   xmlhttp=new ActiveXObject(�Msxml2.XMLHTTP�);

} catch (e) {

   try { xmlhttp=new ActiveXObject(�Microsoft.XMLHTTP�);}

   catch (E) { xmlhttp=false;}

}

if (!xmlhttp && typeof XMLHttpRequest!=�undefined�){

 xmlhttp=new XMLHttpRequest();

}

Este script � encontrado como exemplo em v�rios sites sobre AJAX e tem sido considerado um dos padr�es para a cria��o da inst�ncia de XMLHttpRequest de forma independente de browser. Inicialmente, tenta-se obter a inst�ncia de Msxml12.XMLHTTP ou Microsoft.XMLHTTP, para o Internet Explorer (o nome da classe depende da vers�o da biblioteca de XML da Microsoft instalada na m�quina cliente). Caso o browser tenha a sua pr�pria implementa��o do tipo XMLHttpRequest, o script cria uma inst�ncia desse tipo no bloco condicional no final do script.

O evento onchange da combobox invoca a fun��o JavaScript alteraProjeto():


function alteraProjeto() {

  var theUrl=�obtemAtividadesXML.jsp?projeto=�

     +document.getElementByld(�projeto�).value;

  xmlhttp.open(�GET,theUrl,true);

  xmlhttp.onreadystatechange=function() {

    if (xmlhttp.readyState==4) {

       criaTabela(xmlhttp.responseXML);

    }

  }

  xmlhttp.send(null);

};

Essa fun��o requisita a p�gina obtemAtividadesXML.jsp, passando como par�metros a identifica��o do projeto selecionado. Note que a execu��o de uma chamada AJAX segue sempre os mesmos passos:

� invocado o m�todo open() do objeto XMLHttpRequest, passando o m�todo http desejado (normalmente GET ou POST), al�m da URL a ser requisitada e um flag indicando se a chamada � ass�ncrona ou n�o.
Como a chamada � ass�ncrona, � definido no nosso caso um manipulador de eventos para notificar quando a resposta do servidor estiver completa (readyState igual a 4). Ser� invocada a fun��o criaTabela(), passando-se o conte�do XML obtido como resposta do servidor.

Caso o flag passado a open() seja false, a chamada do m�todo ser� s�ncrona, ou seja, o m�todo send() ir� bloquear a execu��o do script at� que a resposta completa da requisi��o chegue do servidor. Nesse caso, a resposta do servidor pode ser obtida logo ap�s o send(), sem a necessidade de cria��o de um manipulador de eventos. Entretanto, isso far� com que a p�gina �congele� at� que a resposta chegue, diminuindo a percep��o de interatividade pelo usu�rio.

Finalmente, o m�todo send() realiza o envio da requisi��o, passando como par�metro o corpo da mensagem a ser enviado (no caso de uma requisi��o POST).

A p�gina obtemAtividadesXML.jsp, apresentada na Listagem 2, � respons�vel por gerar um documento XML com os dados de atividades do projeto passado como par�metro. A Listagem 3 apresenta o resultado da execu��o da p�gina JSP: esse XML ser� utilizado para facilitar a explica��o do c�digo JavaScript que faz a cria��o da tabela.

A p�gina JSP utiliza somente conceitos de JSP e JSTL. O �nico detalhe que vale a pena mencionar � a inclus�o da tag <pag> definindo o tipo de conte�do da resposta (contentType) como sendo text/xml. Isso � importante para que o objeto XMLHttpRequest no browser consiga montar as estrutura XML a partir desse conte�do.

Um ponto muito importante � que a manipula��o dos dados de resposta como uma estrutura XML dentro do JavaScript requer duas condi��es:

O content-type de p�gina de resposta deve ser definido como text/xml.
Os dados de resposta precisam ser obtidos atrav�s da propriedade responseXML do objeto XMLHttpRequest.

Finalmente, a fun��o JavaScript criaTabela() monta uma tabela HTML utilizando os dados XML obtidos pelo objeto XMLHttpRequest, e define essa tabela como valor do campo innerHTML do elemento

da p�gina, que tem id igual a tabela, fazendo com que a tabela desejada apare�a na tela.

Dentro dessa fun��o, toda a manipula��o dos dados do XML � feita atrav�s do m�todo getElementByTagName() do objeto XMLDocument. Esse m�todo recebe como par�metro um nome da tag e retorna uma lista de elementos XML referentes � tag passada. Cada elemento XML ser� representado pela sua estrutura DOM. Assim, a linha:


var data = AjaxResponse.getElementByTagName(�atividade�);

Atribui � vari�vel data um array com tr�s elementos (considerando como resposta o XML da Listagem 3). Cada elemento representa a estrutura DOM de cada atividade definida dentro da tag raiz <dados>. Com isso, definimos os conceitos b�sicos para o pr�ximo comando, que � respons�vel por obter o valor das tags < descricao>, <dataInicial> e <dataFinal>, dentro de cada tag <atividade>:


var desc=data[i];getElementsByTagName(�descricao�).item(0);

Como j� visto, getElementsByTagName() retorna um array com as estruturas DOM representando os elementos associados � tag passada. Neste caso, o m�todo retorna uma lista de apenas um elemento, pois s� existe uma tag < descricao> dentro de < atividade>. Como o retorno � uma lista e sabemos que haver� um s� elemento, usamos diretamente uma chamada item(0). Dessa forma, a variavel desc cont�m a estrutura DOM da tag < descricao>

Deve-se tomar cuidado com o escopo do objeto sobre o qual � invocado o m�todo getElementByTagName(). Por exemplo, data[i].getElementsByTagName(�descricao�) retorna uma lista com apenas um elemento. Por outro lado, invocar AjaxResponse.getElementsByTagName(�descricao�) retorna um array com tr�s elementos para o documento XML na Listagem 3. Isso porque a vari�vel AjaxResponse representa o documento total, e este cont�m tr�s tags <descricao> dentro do seu contexto (uma em cada tag < atividade>).

Alguma confus�o �s vezes acontece quando � necess�rio obter o texto que est� dentro de uma tag, mas n�o se est� acostumado com a estrutura DOM. No exemplo, o texto da tag <descricao> � obtido com o seguinte comando:


desc.firstChild.data

Pode parecer estranha a constru��o firstChild.data: como firstChild denota a primeira tag filha de uma tag, e <descricao> n�o possui tags filhas, ent�o porque fazer o acesso dessa forma? A quest�o � que em DOM, o texto dentro de uma tag na realidade � o valor de uma tag filha especial. Assim, para obter a string �texto� dentro de <descricao>, � necess�rio primeiro obter essa tag filha (atrav�s da propriedade firstChild) para ent�o obter o texto a partir da sua propriedade data.

Listagem 1. listaXML.jsp.


<%@ page import=�jm.ajax.data.*�%>

<%@ taglib uri=http://java.sun.com/jsp/jstl/core� prefix=�c�%>

 

<script type=�text/javascript�>

var xmlhttp=false;

  try {

   xmlhttp = new ActiveXObject(�Msxml2.XMLHTTP�);

  }  catch (e) {

      try { xmlhttp = new ActiveXObject(�Microsoft.XMLHTTP�); }

         catch (E) { xmlhttp = false; }

  }

 

if (!xmlhttp && typeof XMLHttpRequest!=�undefined�) {

   xmlhttp = new XMLHttpRequest();

}

function alteraProjeto()

{

 

    var theUrl = �obtemAtividadesXML.jsp?projeto=�

        + document.getElementById(�projeto�).value;

    xmlhttp.open(�GET�, theUrl,true);

    xmlhttp.onreadystatechange-function() {

         if (xmlhttp.readyState==4) {

           criaTabela(xmlhttp.responseXML);

         }

    }

    xmlhttp.send(null);

};

 

function criaTabela(AjaxResponse)

{

    var data = AjaxResponse.getElementsByTagName(�atividade�);

    var htmlText = �<table border=�1�>�

       +�  <tr>�

       +�     <th>Descri��o</th>�

       +�     <th>Data Inicial</th>�

       +�     <th>Data Final</th>�

       +�  </tr>�

 

       for(i=0;i<data.length;i++)

       {

          var desc = data[i].getElementsByTagName(

               �descri��o�).item(0);

          var dataInicial = data[i].getElementsByTagName(

               �dataInicial�).item(0);

          var dataFinal = data[i].getElementsByTagName(

               �dataFinal�).item(0);

          htmlText=htmlText+�<tr><td>�

           + desc.firstChild.data+�</td><td>�

           + dataInicial.firstChild.data+�</td><td>�

           + dataFinal.firstChild.data+�</td><td></tr>�;

          }

       htmlText=htmlText+�</table>�;

       document.getElementById(�tabela�).innerHTML=htmlText;

}

</script>

 

<html>

<c:set var=�projetos� value=�<%= Fabrica.getProjetos()%>� />

 

<center>

<select id=�projeto� onchange=�javascript:alteraProjetos()�>

   <c:forEach var=�p� items=�${projetos}�>

      <option value=�${p.id}�>${p.nome}</option>

   </c:forEach>

</select>

  <br><br>

<div id=�tabela�></div>

</center>

</html>

Listagem 2. obtemAtividadesXML.jsp.


<%@ page import=�jm.ajax.data.*� %>

<%@ page contentType=�text/xml� %>

 

<%@ taglib uri=http://java.sun.com/jsp/jstl/core� prefix=�c� %>

<%@ taglib uri=http://java.sun.com/jsp/jstl/fmt� prefix=�fmt� %>

 

<c:set var=�atividades� value=

      �<%= Fabrica.getAtividades(request.getParameter(�projeto�))%>� />

 

 

<dados>

    <c:forEach var=�atividade� items=�${atividades}�

              varStatus=�status�>

      < atividade id=�${atividade.id}�>

          <descricao>${atividade.descricao}</descricao>

          <dataInicial>

             <fmt:formatDate value=�${atividade.dataInicial}�

                   dataStyle=�short�/>

          </dataInicial>

          <dataFinal>

               <fmt:formatDate value=�${atividade.dataFinal}�

                   dateStyle=�short�/>

          </dataFinal>

      < /atividade>

    </c:forEach>

</dados>

Listagem 3. Exemplo de conte�do XML obtido a partir da execu��o de obtemAtividadesXML.jsp.


<?xml version=�1.0� encoding=�UTF -8�?>

<dados>

    < atividade id=�1�>

       <descricao>Instalar Laszlo</descricao>

       <dataInicial>01/08/05</dataInicial>

       <dataFinal>01/08/05</dataFinal>

    < /atividade>

    < atividade id=�2�>

       <descricao>Criar o projeto exemplo</descricao>

       <dataInicial>02/08/05</dataInicial>

       <dataFinal>08/08/05</dataFinal>

    < /atividade>

    < atividade id=�3�>

       <descricao>Escrever o artigo</descricao>

       <dataInicial>10/08/05</dataInicial>

       <dataFinal>20/08/05</dataFinal>

    < /atividade>

</dados>

Implementando AJAX com JSON

Pessoalmente, acho a manipula��o da resposta do servidor atrav�s do modelo DOM pouco pr�tica, al�m de n�o ser reutiliz�vel � principalmente quando � necess�rio manipular estruturas de respostas mais complexas, com v�rios n�veis de tags aninhadas. Melhor seria se pud�ssemos manipular diretamente objetos JavaScript, o que facilitaria a cria��o de rotinas AJAX reutiliz�veis, que pudessem ficar definidas num arquivo de inclus�o separado, ou mesmo ser encapsuladas em taglibs JSP.

Para isso, podemos utilizar a nota��o JSON (JavaScript Object Notation) em vez de XML, para a formata��o dos dados nas p�ginas de resposta. A vantagem � que o JavaScript consegue, a partir de um documento escrito em JSON, criar automaticamente a estrutura de objetos correspondente, o que n�o seria poss�vel para uma estrutura XML.

Voc� pode ver uma defini��o mais formal de JSON no links, mas por ora, o que � necess�rio saber que � essa nota��o representa uma estrutura de objetos atrav�s da defini��o de pares atributo-valor na seguinte forma:


{atr1:vlr1,atr2: vlr2, ..., atrN, vlrN}

Um array de objetos escritos em JSON � uma seq��ncia de defini��es de objetos, como a mostrada acima, separadas por v�rgulas e delimitadas por colchetes:


[{atr1.1:vlr1.1,...,atr1.N,vlr1.N}, {atr2.1,vlr2.1,...,atr2.N:vlr2.N},...]

Para aplicar estruturas JSON no nosso exemplo, primeiro alteramos a p�gina de resposta para que as informa��es sobre as atividades associadas a um projeto sejam escritas nessa nota��o e n�o em XML. A altera��o pode ser vista na Listagem 4. Note que n�o � mais necess�rio definir o conte�do da resposta como text/xml. Na realidade, n�o far� diferen�a, ao usar JSON, qual o tipo de conte�do de retorno, desde que seja do grupo text/xxxx.

A Listagem 5 apresenta a p�gina de lista de atividades, alterada para o suporte a JSON. As diferen�as mais significativas s�o:

Utiliza��o da propriedade responseText em vez de responseXML: no comando criaTabela(xmlhttp.responseText) � passada como par�metro a propriedade responseText do objeto XMLHttpRequest, uma vez que a resposta obtida do servidor n�o est� mais no formato XML.
Cria��o do array de elementos < atividade> atrav�s da fun��o javascripEval(): o comando var data=eval(AjaxResponse) cria o array de atividades, em vez do m�todo getElementsByTagName(�atividade�) utilizado na vers�o anterior. Isso porque, como a resposta do servidor j� est� na nota��o JSON, o resultado da avalia��o j� ser� um array JavaScript v�lido.
Acesso aos dados da atividade atrav�s das propriedades do objeto: o comando data[i].descricao imprime o valor da propriedade descricao da atividade que est� sendo analisada, de forma mais leg�vel do que o seu equivalente na vers�o anterior:


 data[i].getElementsByTagName(

    �dataInicial�).item(0).firstChild.data

Note como se tem maior simplicidade e legibilidade com o modo de acesso em JSON. Cada elemento do array data � um objeto JavaScript com as propriedades descricao, dataInicial e dataFinal, as quais podem ser acessadas diretamente atrav�s do operador �ponto�. Enquanto que em uma estrutura XML, sempre seria necess�rio navegar dentro da hierarquia DOM para obter os dados desejados.

Listagem 4. obtemAtividades.jsp:p�gina JSP de obten��o de dados em JSON.


<%@ page import=�jm.ajax.data.*� %>

<%@ page contentType=�text/xml� %>

<%@ taglib uri=http://java.sun.com/jsp/jstl/core� prefix=�c� %>

<%@ taglib uri=http://java.sun.com/jsp/jstl/fmt� prefix=�fmt� %>

 

<c:set var=�atividades� value=

      �<%= Fabrica.getAtividades(request.getParameter(�projeto�))%>� />

[

<c:forEach var=�atividade� items=�${atividades}� varStatus=�status�>

{

    id:�${atividade.id}�,

    descricao:�${atividade.descricao}�,

    dataInicial: �<fmt:formatDate value=

        �${atividade.dataInicial}� dateStyle=�short�/>�,

    dataFinal: �<fmt:formatDate value=

        �${atividade.dataFinal}� dateStyle=�short�/>�

    }

    <c:if test=�${not status.last}�>

 

    </c:if>

</c:forEach>

]

Listagem 5. Lista.jsp:p�gina JSP de lista de projetos, adaptada para o uso de JSON.


<%@ page import=�jm.ajax.data.*� %>

<%@ taglib uri=http://java.sun.com/jsp/jstl/core� prefix=�c� %>

<script>

var xmlhttp=false;

try {

  xmlhttp = new ActiveXObject(�Msxml.XMLHTTP�);

}catch (e) {

  try { xmlhttp = new ActiveXObject(�Microsoft.XMLHTTP�);}

  catch(E) { xmlhttp = false; }

}

 

If (!xmlhttp && typeof XMLHttpRequest!=�undefined�) {

  Xmlhttp = new XMLHttpRequest();

}

 

function alteraProjeto()

{

   var theUrl = �obtemAtividades.jsp?projeto=�

        + document.getElementById(�projeto�).value;

   xmlhttp.open(�GET�, theUrl.true);

   xmlhttp.onreadystatechange=function() {

       If (xmlhttp.readyState==4) {

         criaTabela(xmlhttp.responseText);

       }

   }

   xmlhttp.send(null);

};

 

function criaTabela(AjaxResponse)

{

var data = eval(AjaxResponse);

var htmlText = �<table border=�1�>�+

     � <tr>�+

     �     <th> Descri��o</th>�+

     �     <th>Data Inicial</th>�+

     �     <th>Data Final</th>�+

     � </tr>�

   for(i=0;i<data.length;i++)

   {

      htmlText=htmlText+�<tr><td>�

         + desc.firstChild.data+�</td><td>�

         + dataInicial.firstChild.data+�</td><td>�

         + dataFinal.firstChild.data+�</td><td></tr>�

   }

   htmlText=htmlText+�</table>�;

   document.getElementById(�tabela�).innerHTML=htmlText;

}

</script>

 

<html>

    <c:set var=�projetos� value=�<%= Fabrica.getProjetos()%>� />

 

    <center>

    <select id=�projeto� onchange=�javascript:alteraProjetos()�>

        <c:forEach var=�p� items=�${projetos}�>

           <option value=�${p.id}�>${p.nome}</option>

        </c:forEach>

    </select>

    <br><br>

    <div id=�tabela�></div>

    </center>

</html>

Conclus�es

AJAX � uma t�cnica que, de uma forma ou de outra, vem sendo aplicada em aplica��es web h� algum tempo. Recordo-me de um projeto em 2001 que utilizava um conceito semelhante, mas lan�ando m�o de frames escondidos para realizar a tarefa de requisi��o de dados e atualiza��o da p�gina principal. Tamb�m tenho noticia de v�rios projetos que j� faziam uso da atualiza��o din�mica de p�ginas atrav�s do objeto XMLHttpRequest, nessa mesma �poca.

Ent�o podemos perguntar o porqu� de tanto alarde e de um novo nome para uma t�cnica antiga. Existem v�rias discuss�es na internet sobre o tema, algumas atacando a empresa Adaptive Path por tentar assumir o cr�dito (veja links), outras argumentando que o AJAX n�o passa de oportunismo de alguns aproveitando a onda de interfaces internet �ricas� (RIAs ou Rich Internet Applications) e outros defendendo uma mir�ade de opini�es (contra e a favor) sobre o AJAX.

De uma perspectiva pragm�tica, minha opini�o sobre AJAX � que se trata de uma t�cnica antiga que est� sendo resgatada e destacada, principalmente porque o problema da incompatibilidade entre browser que existia no come�o da d�cada foi hoje em grande parte resolvido. O fato � que hoje em grande parte resolvido. O fato � que AJAX traz um benef�cio muito grande para as interfaces de aplica��es web, com custo relativamente baixo. E levando em considera��o o n�mero de bibliotecas e tag libraries que est�o surgindo com o objetivo de facilitar ainda mais a cria��o de interfaces AJAX, esta t�cnica deveria ser carta sempre dispon�vel na manga do desenvolvedor web.

Finalmente, sempre que surge uma �grande nova onda� � importante observar o movimento dos grandes da ind�stria, em vez de ouvir os neo-xiitas tecnol�gicos de plant�o:

TIBCO anunciou no JavaOne seu �AJAX Accelerator Program� e suporta o AJAX j� na vers�o 2.4 do seu produto chamado �General Interface�.
A Sun divulgou que pretende incluir um framework AJAX no Java Studio Creator 2.
A Microsoft ir� lan�ar a vers�o beta de um framework chamado �Atlas�, que visa incorporar um estilo de desenvolvimento �AJAX-like� de interfaces web.
A IBM incluiu AJAX em seu programa jStart, uma esp�cie de programa de consultoria para empresas, para suportar o uso das melhores tecnologias no desenvolvimento de suas solu��es de TI. Particularmente, a IBM est� apostando na integra��o de AJAX com web services.

Em resumo, nova ou n�o, a t�cnica AJAX apresenta uma vis�o diferente para o desenvolvimento de interfaces mais intuitivas e us�veis para o ambiente web, sem a necessidade de applets ou plug-ins. Desenvolvedor com AJAX �no bra�o� j� n�o � mais uma tarefa complicada, e com os novos frameworks e taglibs que est�o surgindo, a tarefa ir� ficar mais simples ainda.

Ent�o, para aqueles que (como eu) sempre consideraram JavaScript um �mal necess�rio�, fica a sugest�o: talvez seja a hora de tirar a poeira daquele manual de JavaScript e come�ar a olhar a arquitetura de sistemas web de uma perspectiva mais interativa!

Confira tamb�m

O que � AJAX?

Curso

Cursos de JavaScript

Cursos

Curso de Introdu��o ao JavaScript

Curso

Tecnologias:

Confira outros conte�dos:

O que s�o arrays e como utiliz�-los no...

Fundamentos b�sicos de JavaScript...

JavaScript setInterval: executando...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Alexandre Em 2008

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Conhecendo AJAX

Turbine a Interatividade de suas Aplica��es Web. O uso de Ajax pode deixar suas aplica��es web mais �geis e responsivas, e � a base da interface gr�fica de software de grande sucesso com o Gmail.