Java script e Ajax sem lero lero
Voltar
Curso de AJAX parte 1
Como eu havia prometido em outro post, vou tentar dar um mini-curso de AJAX dividido entre tópicos...
Vou tentar ser o mais claro possível, e se eu cometer algum engano, realmente, sinto muito.
------------------------------------
Parte 1 - o que é AJAX ?
------------------------------------
Em meados de 1999/2000, a Microsoft criou como parte do Outlook Web Access 2000 um objeto chamado XMLHTTP, que serviria como protocolo para fazer requisições ao servidor.
O Internet Explorer 5.0 já vinha com suporte a tal objeto, que podia ser acessado via JScript, ou VBScript.
Anos mais tarde, outros browsers começaram a oferecer suporte ao XMLHTTP, agora sob o 'alias' de XmlHttpRequest.
Temos então, no internet explorer um objeto XMLHTTP sendo chamado através de um controle Activex, e em outros browsers, um objeto XMLHTTP sendo chamado como "XMLHTTPRequest".
*um ponto curioso é que hoje muitos dizem que o objeto que 'cria' o ajax é XMLHTTPRequest, o que é ERRADO. Creio que isso tenha se espalhado entre a comunidade voltada mais para o open source, que usa mais o Mozilla based para desenvolver, aliados a alguns artigos da época em que o Ajax ainda era muito nebuloso.
Pois bem, anos mais tarde, o Google criou o Gmail, que de cara nos mostrava uns recursos cabulosos, uns refreshs na página sem dar refresh ???
Aquilo pareceu de outro mundo, afinal eu tinha passado muitas noites entre 2002 e 2005 inventando maneiras de fazer tal coisa, mas nunca com tal eficácia.
Foi aí que o tal do "AJAX" começou a figurar...fazendo analogia a Requisição Javascript e XML Assíncrona.
Artigos começaram a surgir...e as pessoas começaram a engatinhar nessa nova tecnologia, que misturava um objeto para a grande maioria novo do javascript, propriedades css, DOM (document object model), e muito pouco XML, apesar do nome.
Os primeiros meses do AJAX foram meio estranhos. Eu cheguei a ver, e inclusive a fazer, sites inteiros utilizando AJAX na navegação...O que na verdade era mais um problema do que solução.
Passada essa fase de deslumbre geral, os desenvolvedores começaram a ver que às vezes o tal do XmlHTTP não lhes dava os recursos de uma atualização verdadeiramente eficaz, como por exemplo no caso de fazer um upload de arquivo (mais adiante veremos que é possível, mas é inviável, e porque é inviável).
Então, para alguns casos, alguns de nós começaram a utilizar os velhos hidden iframes, ou hidden frames (iframes escondidos e frames escondidos, respecitivamente).
Então que o conceito evoluiu:
AJAX deixou de ser sigla para algo, mas passou a representar uma idéia: fazer requisições ao servidor sem precisar fazer refresh na página (a grosso modo, aplicado à web).
As requisições agora podiam ser síncronas ou assíncronas, podiam usar ou não XML, podiam nem ter o XMLHTTP, podiam só usar um frame ou iframe escondido.
As obras bibliográficas evoluiram rapidamente também.
* Os primeiros livros a sair (Ajax in Action) traziam ainda a definição de ajax amarrado aos conceitos da sigla, já os livros mais recentes (ajax for dummies, professional ajax,etc) já trazem ajax como esse conceito citado acima.
Agora que já sabemos um pouco o que é Ajax, seria legal explicar uma coisa que geralmente as pessoas se perguntam muito: o que diabos é ASSÍNCRONO ou SÍNCRONO ???
uma requisição síncrona é aquela em que a página pára de executar quaisquer outros scripts enquanto ela não termina
uma requisição assíncrona é aquela em que a página continua executando normalmente, independentemente do estado da requisição.
Ok...
Explicados alguns conceitos básicos...
Mas o mais importante começa agora....
A PROGRAMAÇÃO
para um exemplo básico, farei uma consulta a um arquivo de texto localizado na mesma página em que está o arquivo html com o objeto XMLHTTP.
-----------------------------------
crie um arquivo chamado ajax1.txt
crie um arquivo chamado ajax1.html
-----------------------------------
no arquivo ajax1.txt, escreva um conteúdo de sua preferência ...
no arquivo ajax1.html, coloque o código abaixo...
vamos agora à explicação do código...
esta função é a que nos cria um objeto XMLHTTP
este trecho tenta montar um alias XMLHttpRequest() , para browsers que não seja o IE...note o TRY ... ele realmente tenta montar...se der erro...
se der erro..ele monta o objeto ActiveX do IE
faz com que a função retorne o que estiver na variável myObj , XMLHttpRequest() ou Activex.
este trecho colocado fora em quanquer função, atribui à variável myObj (está fora de qualquer função, nao é a msm myObj que estava na função montaXMLHTT) o valor de retorno da função montaXMLHTTP() ... (podia ser o XMLHttpRequest ou o ActiveX).
esta função aproveita a variável myObj, que tem o valor de retorno da funçao montaXMLHTTP para ler o conteúdo do arquivo de texto e mostrar no div.
abre o arquivo, utilizando método post...e fazendo uma requisição ASSÍNCRONA.
o método .open possui 3 argumentos...2 obrigatórios, e o último opcional.
O primeiro é o método da requisição (post/get/head/put), o segundo é o arquivo a ser aberto (no nosso caso ajax1.txt), e o terceiro e opcional diz se a requisição é assíncrona ou síncrona (true para assíncrona, false para síncrona).
* se não colocarmos o terceiro parâmetro, ele será true, portanto assíncrona
avalia as mudanças no "estado da requisição"
toda requisição xmlhttp tem 4 estados... que vão desde iniciando, até requisição completa e conteúdo disponível
executamos a function para cada um destes estados...
vê se o estado da requisição é igual a 4 (completa e conteúdo disponível).
Se sim, o elemento que tiver o id igual a "conteudo" terá seu conteúdo HTML (innerHTML) igual ao valor do método responseText do nosso XMLHTTP.
*objeto responseText é o meio mais simples de termos uma resposta de uma requisição XMLHTTP, já que retorna exatamente a saída do arquivo aberto. Há também o responseXML, que é mais completo por retornar um XML em nós...veremos em próximas partes do curso como utilizar o responseXML.
então, traduzindo:
não faz nada, além de colocar no div que tem o id igual a "conteudo" o texto que está dentro do arquivo que abrimos.
esta parte é responsável por enviar variáveis para a página aberta. No caso não mandamos variável alguma, mas se quisessemos enviar, teria que ser no formato de query: myObj.send("variavel1=valor1&variavel2=valor2")
*por incrível que pareça, se essa linha não existir, o script não funciona.
O restante do código da página é apenas para montar o html necessário
claro que
monta a div que servirá para mostraros o resultado
monta o botão que servirá para executar a função abreTXT, afim de vermos a execução da mesma.
Isso aí...semana que vem tem a parte 2 do nosso curso...
Vou tentar ser o mais claro possível, e se eu cometer algum engano, realmente, sinto muito.
------------------------------------
Parte 1 - o que é AJAX ?
------------------------------------
Em meados de 1999/2000, a Microsoft criou como parte do Outlook Web Access 2000 um objeto chamado XMLHTTP, que serviria como protocolo para fazer requisições ao servidor.
O Internet Explorer 5.0 já vinha com suporte a tal objeto, que podia ser acessado via JScript, ou VBScript.
Anos mais tarde, outros browsers começaram a oferecer suporte ao XMLHTTP, agora sob o 'alias' de XmlHttpRequest.
Temos então, no internet explorer um objeto XMLHTTP sendo chamado através de um controle Activex, e em outros browsers, um objeto XMLHTTP sendo chamado como "XMLHTTPRequest".
*um ponto curioso é que hoje muitos dizem que o objeto que 'cria' o ajax é XMLHTTPRequest, o que é ERRADO. Creio que isso tenha se espalhado entre a comunidade voltada mais para o open source, que usa mais o Mozilla based para desenvolver, aliados a alguns artigos da época em que o Ajax ainda era muito nebuloso.
Pois bem, anos mais tarde, o Google criou o Gmail, que de cara nos mostrava uns recursos cabulosos, uns refreshs na página sem dar refresh ???
Aquilo pareceu de outro mundo, afinal eu tinha passado muitas noites entre 2002 e 2005 inventando maneiras de fazer tal coisa, mas nunca com tal eficácia.
Foi aí que o tal do "AJAX" começou a figurar...fazendo analogia a Requisição Javascript e XML Assíncrona.
Artigos começaram a surgir...e as pessoas começaram a engatinhar nessa nova tecnologia, que misturava um objeto para a grande maioria novo do javascript, propriedades css, DOM (document object model), e muito pouco XML, apesar do nome.
Os primeiros meses do AJAX foram meio estranhos. Eu cheguei a ver, e inclusive a fazer, sites inteiros utilizando AJAX na navegação...O que na verdade era mais um problema do que solução.
Passada essa fase de deslumbre geral, os desenvolvedores começaram a ver que às vezes o tal do XmlHTTP não lhes dava os recursos de uma atualização verdadeiramente eficaz, como por exemplo no caso de fazer um upload de arquivo (mais adiante veremos que é possível, mas é inviável, e porque é inviável).
Então, para alguns casos, alguns de nós começaram a utilizar os velhos hidden iframes, ou hidden frames (iframes escondidos e frames escondidos, respecitivamente).
Então que o conceito evoluiu:
AJAX deixou de ser sigla para algo, mas passou a representar uma idéia: fazer requisições ao servidor sem precisar fazer refresh na página (a grosso modo, aplicado à web).
As requisições agora podiam ser síncronas ou assíncronas, podiam usar ou não XML, podiam nem ter o XMLHTTP, podiam só usar um frame ou iframe escondido.
As obras bibliográficas evoluiram rapidamente também.
* Os primeiros livros a sair (Ajax in Action) traziam ainda a definição de ajax amarrado aos conceitos da sigla, já os livros mais recentes (ajax for dummies, professional ajax,etc) já trazem ajax como esse conceito citado acima.
Agora que já sabemos um pouco o que é Ajax, seria legal explicar uma coisa que geralmente as pessoas se perguntam muito: o que diabos é ASSÍNCRONO ou SÍNCRONO ???
uma requisição síncrona é aquela em que a página pára de executar quaisquer outros scripts enquanto ela não termina
uma requisição assíncrona é aquela em que a página continua executando normalmente, independentemente do estado da requisição.
Ok...
Explicados alguns conceitos básicos...
Mas o mais importante começa agora....
A PROGRAMAÇÃO
para um exemplo básico, farei uma consulta a um arquivo de texto localizado na mesma página em que está o arquivo html com o objeto XMLHTTP.
-----------------------------------
crie um arquivo chamado ajax1.txt
crie um arquivo chamado ajax1.html
-----------------------------------
no arquivo ajax1.txt, escreva um conteúdo de sua preferência ...
no arquivo ajax1.html, coloque o código abaixo...
<html>
<head>
<title>
Um primeiro exemplo de AJAX
</title>
<script type="text/javascript">
function montaXMLHTTP()
{
try
{
myObj = new XMLHttpRequest()
}
catch(e)
{
myObj = new ActiveXObject("Microsoft.XMLHTTP");
}
return myObj;
}
myObj = new montaXMLHTTP();
function abreTXT()
{
myObj.open('post','ajax1.txt',true);
myObj.onreadystatechange = function()
{
if(myObj.readyState==4)
{
document.getElementById('conteudo').innerHTML = myObj.responseText;
}
}
myObj.send(null);
}
</script>
</head>
<body>
<div id='conteudo' style='width:300px;height:300px;border:1px solid black'>AQUI ENTRARÁ O QUE ESTÁ NO ARQUIVO TXT</div>
<br />
<br />
<input type="button" onclick="abreTXT()" value='alterar conteúdo da div para o do arquivo TXT'>
</body>
</html>
<head>
<title>
Um primeiro exemplo de AJAX
</title>
<script type="text/javascript">
function montaXMLHTTP()
{
try
{
myObj = new XMLHttpRequest()
}
catch(e)
{
myObj = new ActiveXObject("Microsoft.XMLHTTP");
}
return myObj;
}
myObj = new montaXMLHTTP();
function abreTXT()
{
myObj.open('post','ajax1.txt',true);
myObj.onreadystatechange = function()
{
if(myObj.readyState==4)
{
document.getElementById('conteudo').innerHTML = myObj.responseText;
}
}
myObj.send(null);
}
</script>
</head>
<body>
<div id='conteudo' style='width:300px;height:300px;border:1px solid black'>AQUI ENTRARÁ O QUE ESTÁ NO ARQUIVO TXT</div>
<br />
<br />
<input type="button" onclick="abreTXT()" value='alterar conteúdo da div para o do arquivo TXT'>
</body>
</html>
vamos agora à explicação do código...
function montaXMLHTTP()
{
try
{
myObj = new XMLHttpRequest()
}
catch(e)
{
myObj = new ActiveXObject("Microsoft.XMLHTTP");
}
return myObj;
}
{
try
{
myObj = new XMLHttpRequest()
}
catch(e)
{
myObj = new ActiveXObject("Microsoft.XMLHTTP");
}
return myObj;
}
esta função é a que nos cria um objeto XMLHTTP
try
{
myObj = new XMLHttpRequest()
}
{
myObj = new XMLHttpRequest()
}
este trecho tenta montar um alias XMLHttpRequest() , para browsers que não seja o IE...note o TRY ... ele realmente tenta montar...se der erro...
catch(e)
{
myObj = new ActiveXObject("Microsoft.XMLHTTP");
}
{
myObj = new ActiveXObject("Microsoft.XMLHTTP");
}
se der erro..ele monta o objeto ActiveX do IE
return myObj;
faz com que a função retorne o que estiver na variável myObj , XMLHttpRequest() ou Activex.
myObj = new montaXMLHTTP();
este trecho colocado fora em quanquer função, atribui à variável myObj (está fora de qualquer função, nao é a msm myObj que estava na função montaXMLHTT) o valor de retorno da função montaXMLHTTP() ... (podia ser o XMLHttpRequest ou o ActiveX).
function abreTXT()
{
myObj.open('post','ajax1.txt',true);
myObj.onreadystatechange = function()
{
if(myObj.readyState==4)
{
document.getElementById('conteudo').innerHTML = myObj.responseText;
}
}
myObj.send(null);
}
{
myObj.open('post','ajax1.txt',true);
myObj.onreadystatechange = function()
{
if(myObj.readyState==4)
{
document.getElementById('conteudo').innerHTML = myObj.responseText;
}
}
myObj.send(null);
}
esta função aproveita a variável myObj, que tem o valor de retorno da funçao montaXMLHTTP para ler o conteúdo do arquivo de texto e mostrar no div.
myObj.open('post','ajax1.txt',true);
abre o arquivo, utilizando método post...e fazendo uma requisição ASSÍNCRONA.
o método .open possui 3 argumentos...2 obrigatórios, e o último opcional.
O primeiro é o método da requisição (post/get/head/put), o segundo é o arquivo a ser aberto (no nosso caso ajax1.txt), e o terceiro e opcional diz se a requisição é assíncrona ou síncrona (true para assíncrona, false para síncrona).
* se não colocarmos o terceiro parâmetro, ele será true, portanto assíncrona
myObj.onreadystatechange = function()
{
{
avalia as mudanças no "estado da requisição"
toda requisição xmlhttp tem 4 estados... que vão desde iniciando, até requisição completa e conteúdo disponível
executamos a function para cada um destes estados...
if(myObj.readyState==4)
{
document.getElementById('conteudo').innerHTML = myObj.responseText;
}
{
document.getElementById('conteudo').innerHTML = myObj.responseText;
}
vê se o estado da requisição é igual a 4 (completa e conteúdo disponível).
Se sim, o elemento que tiver o id igual a "conteudo" terá seu conteúdo HTML (innerHTML) igual ao valor do método responseText do nosso XMLHTTP.
*objeto responseText é o meio mais simples de termos uma resposta de uma requisição XMLHTTP, já que retorna exatamente a saída do arquivo aberto. Há também o responseXML, que é mais completo por retornar um XML em nós...veremos em próximas partes do curso como utilizar o responseXML.
então, traduzindo:
document.getElementById('conteudo').innerHTML = myObj.responseText;
não faz nada, além de colocar no div que tem o id igual a "conteudo" o texto que está dentro do arquivo que abrimos.
myObj.send(null);
esta parte é responsável por enviar variáveis para a página aberta. No caso não mandamos variável alguma, mas se quisessemos enviar, teria que ser no formato de query: myObj.send("variavel1=valor1&variavel2=valor2")
*por incrível que pareça, se essa linha não existir, o script não funciona.
O restante do código da página é apenas para montar o html necessário
claro que
<div id='conteudo' style='width:300px;height:300px;border:1px solid black'>AQUI ENTRARÁ O QUE ESTÁ NO ARQUIVO TXT</div>
monta a div que servirá para mostraros o resultado
<input type="button" onclick="abreTXT()" value='alterar conteúdo da div para o do arquivo TXT'>
monta o botão que servirá para executar a função abreTXT, afim de vermos a execução da mesma.
Isso aí...semana que vem tem a parte 2 do nosso curso...
Autor: Deanx
Postado 21/05/2009 15:09 por Jeison Frasson
© 2002-2012 Newsmade - Quase todos os direitos reservados.