Ajax como comecar
8
Click here to load reader
-
Upload
igor-ferreira -
Category
Documents
-
view
58 -
download
0
Transcript of Ajax como comecar
AJAXComo comeccedilar
Este artigo guia o leitor atraveacutes das bases do AJAX e oferece dois exemplos
praacuteticos simples para poder comeccedilar
Conteuacutedo [esconder]
1 O que eacute AJAX
2 1ordm passo - dizer Por favor ou Como fazer um pedido HTTP
3 2ordm Passo - Ora aqui estaacute ou Lidar com a Resposta do Servidor
4 Passo 3 ndash Agora todos juntos - Um exemplo simples
5 Passo 4 ndash Os Ficheiros-X ou Trabalhar com a Resposta XML
[editar]
O que eacute AJAX
AJAX (Asynchronous JavaScript and XML) eacute um termo criado recentemente
para duas caracteriacutesticas poderosas dos browsers que existem haacute anos mas
tem sido ignoradas por muitos criadores de paacuteginas web ateacute recentemente
quando aplicaccedilotildees como Gmail Google suggest e Google Maps foram lanccediladas
As duas principais caracteriacutesticas satildeo a possibilidade de
efectuar pedidos ao servidor sem ter de recarregar a paacutegina
analisar gramaticalmente e trabalhar com documentos XML
[editar]
1ordm passo - dizer Por favor ou Como fazer um pedido HTTP
Para se fazer um pedido HTTP ao servidor usando JavaScript vocecirc precisa de
uma instacircncia de uma classe que disponibiliza essa funcionalidade Tal classe
foi primeiro introduzida no Internet Explorer sob a forma de um objecto ActiveX
chamado XMLHTTP Entatildeo o Mozilla o Safari e outros browsers seguiram-se
implementando uma classe de nome XMLHttpRequest que suportava os
meacutetodos e as propriedades do objecto ActiveX original da Microsoft
Como resultado em ordem para criar uma instacircncia (objecto) multi-
plataformas da classe pretendida vocecirc pode fazer
if (windowXMLHttpRequest) Mozilla Safari http_request = new XMLHttpRequest() else if (windowActiveXObject) IE http_request = new ActiveXObject(MicrosoftXMLHTTP)
(soacute a tiacutetulo de exemplo o coacutedigo acima eacute uma versatildeo simplificada do coacutedigo a
ser usado para a criaccedilatildeo de uma instacircncia XMLHTTP Para um exemplo mais
vida real decirc uma olhadela ao 3ordm passo deste artigo)
Algumas versotildees de alguns browsers Mozilla natildeo iratildeo funcionar bem se a
resposta do servidor natildeo possuir um cabeccedilalho mime-type XML Para satisfazer
isto vocecirc pode usar uma chamada extra a um meacutetodo para ultrapassar o
cabeccedilalho enviado pelo servidor soacute no caso de natildeo ser no formato textxml
http_request = new XMLHttpRequest() http_requestoverrideMimeType(textxml)
A proacutexima coisa a ser feita eacute decidir o que quer fazer apoacutes receber a resposta
do servidor ao seu pedido Nesta etapa soacute precisa de dizer ao objecto pedido
HTTP que funccedilatildeo JavaScript iraacute processar a resposta Isto eacute feito definindo a
propriedade onreadystatechange do objecto ao nome da funccedilatildeo JavaScript
que pretende utilizar tipo assim
http_requestonreadystatechange = nameOfTheFunction
Note-se que natildeo existem chavetas apoacutes o nome da funccedilatildeo e natildeo satildeo passados
paracircmetros Tambeacutem em vez de dar um nome duma funccedilatildeo vocecirc pode usar a
teacutecnica JavaScript de definir funccedilotildees agrave pressatildeo e definir as acccedilotildees que vatildeo
processar a resposta logo tipo assim
http_requestonreadystatechange = function() do the thing
De seguida apoacutes ter declarado o que vai acontecer mal receba a resposta vocecirc
precisa de consumar o pedido Precisa de chamar os meacutetodos open() e
send() da classe pedido HTTP tipo assim
http_requestopen(GET httpwwwexampleorgsomefile true) http_requestsend(null)
O primeiro paracircmetro da chamada do meacutetodo open() eacute o meacutetodo
pedido HTML ndash GET POST HEAD ou outro meacutetodo qualquer que
queira usar e que seja suportado pelo seu servidor Mantenha o
nome do meacutetodo em maiuacutesculas para obedecer agraves normas HTTP
senatildeo certos browsers (como o Firefox) podem natildeo processar o
pedido Para obter mais informaccedilatildeo sobre os possiacuteveis meacutetodos
pedido HTTP pode dar uma olhadela em W3C specs
O segundo paracircmetro eacute a URL da paacutegina que estaacute a pedir Como
medida de seguranccedila natildeo pode efectuar pedidos de paacuteginas de
domiacutenios externos Certifique-se que usa o nome exacto do domiacutenio
em todas as suas paacuteginas ou iraacute receber um erro Permissatildeo
Negada quando efectua uma chamada open() Um erro comum eacute
aceder ao seu domiacutenio atraveacutes de domiacuteniotld ao mesmo tempo que
tenta chamar paacuteginas com wwwdomiacuteniotld
O terceiro paracircmetro define se o pedido eacute assiacutencrono Se TRUE a
execuccedilatildeo da funccedilatildeo JavaScript iraacute continuar enquanto que a
resposta do servidor ainda natildeo foi recebida Isto eacute o A de AJAX
O paracircmetro do meacutetodo send() pode ser costituido por quaisquer dados que
pretenda enviar ao servidor ao enviar (POST) o pedido Os dados devem estar
sob a forma de uma linha de texto de pergunta tipo
name=valueampanothername=othervalueampso=on
Note-se que se pretende enviar (POST) dados vocecirc deve alterar o tipo MIME
do pedido usando a seguinte linha
http_requestsetRequestHeader(Content-Type applicationx-www-form-urlencoded)
De outra forma o servidor iraacute ignorar os dados (post)
[editar]
2ordm Passo - Ora aqui estaacute ou Lidar com a Resposta do Servidor
Lembre-se que quando estava a enviar o pedido vocecirc providenciou o nome de
uma funccedilatildeo JavaScript que eacute criada para lidar com a resposta
http_requestonreadystatechange = nameOfTheFunction
Vamos a ver o que eacute que esta funccedilatildeo deve fazer Primeiro a funccedilatildeo precisa de
verificar o estado do pedido Se o estado possui o valor 4 isso significa que a
totalidade da resposta do servidor foi recebida e que pode continuar a
processaacute-la agrave vontade
if (http_requestreadyState == 4) everything is good the response is received else still not ready
A lista completa dos valores readyState eacute a seguinte 0 (uninitialized)
1 (a carregar)
2 (carregado)
3 (interactivo)
4 (completo)
(Source)
A proacutexima coisa a verificar eacute o coacutedigo do estado da resposta HTTP do servidor
Todos os coacutedigos possiacuteveis estatildeo listados na paacutegina W3C Para os nossos
objectivos noacutes soacute estamos interessados na resposta 200 OK
if (http_requeststatus == 200) perfect else there was a problem with the request for example the response may be a 404 (Not Found) or 500 (Internal Server Error) response codes
Depois de verificar o estado do pedido e o coacutedigo do estado HTTP da resposta
compete-lhe a si fazer aquilo que quer fazer com os dados que o servidor lhe
enviou Tem duas opccedilotildees para aceder a esses dados
http_requestresponseText ndash iraacute devolver a resposta do
servidor como uma linha de texto
http_requestresponseXML ndash iraacute devolver a resposta do
servidor como um objecto XMLDocument que pode percorrer
usando as funccedilotildees DOM de JavaScript
[editar]
Passo 3 ndash Agora todos juntos - Um exemplo simples
Vamos agora pocircr tudo junto e efectuar um simples pedido HTTP O nosso
JavaScript vai pedir um documento HTML testehtml que conteacutem o texto
Sou um teste e entatildeo vamos alert() os conteuacutedos do ficheiro
testehtml
ltscript type=textjavascript language=javascriptgt var http_request = false function makeRequest(url) http_request = false if (windowXMLHttpRequest) Mozilla Safari http_request = new XMLHttpRequest() if (http_requestoverrideMimeType) http_requestoverrideMimeType(textxml) See note below about this line else if (windowActiveXObject) IE try http_request = new ActiveXObject(Msxml2XMLHTTP) catch (e) try http_request = new ActiveXObject(MicrosoftXMLHTTP) catch (e) if (http_request) alert(Giving up ( Cannot create an XMLHTTP instance)
return false http_requestonreadystatechange = alertContents http_requestopen(GET url true) http_requestsend(null) function alertContents() if (http_requestreadyState == 4) if (http_requeststatus == 200) alert(http_requestresponseText) else alert(There was a problem with the request) ltscriptgt ltspan style=cursor pointer text-decoration underline onclick=makeRequest(testhtml)gt Make a request ltspangt
Neste exemplo
O utilizador clicka no atalho efectuar pedido no browser
- o
esposta foi recebida e se eacute um OK
Vocecirc pode testar o exemplo aqui
Isto chama a funccedilatildeo com um paracircmetro -makeRequest()
nome testehtml de um ficheiro HTML na mesma directoria
O pedido eacute feito e entatildeo ( ) a execuccedilatildeo eacute onreadystatechange
passada a alertContents()
tents() verifia se a ralertCon
e entatildeo alerta (alert()) os conteuacutedos do ficheiro testhtml
e pode ver o ficheiro de teste aqui
Nota A linha
http_requestoverrideMimeType(textxml)
acima iraacute causar erros de Consola JavaScript no Firefox 15b tal como estaacute
documentado em httpsbugzillamozillaorgshow_bugcgiid=311724 se a
paacutegina chamada por XMLHttpRequest natildeo for XML vaacutelido (por exemplo se
for texto simples)
Se obter Erro de Sintaxe ou Erro Mal Formado naquele browser e natildeo estaacute a
tentar carregar um apaacutegina XML a partir de XMLHttpRequest retire aquela
linha do seu coacutedigo
Nota 2 se estiver a enviar um pedido a um pedaccedilo de coacutedigo que iraacute retornar
XML em vez de a um ficheiro estaacutetico de XML entatildeo precisa de definir algum
cabeccedilalho de resposta se a sua paacutegina precisa de funcionar no Internet
Explorer aleacutem do Mozilla Se natildeo definir o cabeccedilalho Content-Type
applicationxml o Internet Explorer iraacute lanccedilar um erro JavaScript
Esperado Objecto apoacutes a linha onde tenta aceder a um elemento XML Se natildeo
define o cabeccedilalho Cache-Control no-cache o browser iraacute guardar a
resposta e nunca re-enviar o pedido tornando o depuramento de erros um
desafio
[editar]
Passo 4 ndash Os Ficheiros-X ou Trabalhar com a Resposta XML
No exemplo anterior apoacutes termos recebido a resposta ao pedido HTTP noacutes
usamos a propriedade reponseText do objecto de pedido e continha os
conteuacutedos do ficheiro testhtml Agora vamos experimentar a propriedade
responseXML
Antes de tudo vamos criar um documento XML vaacutelido que vamos pedir mais agrave
frente O documento (testxml) conteacutem o seguinte
ltxml version=10 gt ltrootgt Im a test ltrootgt
No guiatildeo soacute precisamos de alterar a linha do pedido com
onclick=makeRequest(testxml)gt
Entatildeo em alertContents() noacutes precisamos de substituir a linha de alerta
(alert(http_requestresponseText)) com
var xmldoc = http_requestresponseXML var root_node = xmldocgetElementsByTagName(root)item(0) alert(root_nodefirstChilddata)
Assim pegamos no objecto XMLDocument fornecido por responseXML e
usamos os meacutetodos DOM para aceder a alguns dados obtidos no documento
XML Pode ver o ficheiro testxml aqui e o guiatildeo de testes actualizado aqui
Como resultado em ordem para criar uma instacircncia (objecto) multi-
plataformas da classe pretendida vocecirc pode fazer
if (windowXMLHttpRequest) Mozilla Safari http_request = new XMLHttpRequest() else if (windowActiveXObject) IE http_request = new ActiveXObject(MicrosoftXMLHTTP)
(soacute a tiacutetulo de exemplo o coacutedigo acima eacute uma versatildeo simplificada do coacutedigo a
ser usado para a criaccedilatildeo de uma instacircncia XMLHTTP Para um exemplo mais
vida real decirc uma olhadela ao 3ordm passo deste artigo)
Algumas versotildees de alguns browsers Mozilla natildeo iratildeo funcionar bem se a
resposta do servidor natildeo possuir um cabeccedilalho mime-type XML Para satisfazer
isto vocecirc pode usar uma chamada extra a um meacutetodo para ultrapassar o
cabeccedilalho enviado pelo servidor soacute no caso de natildeo ser no formato textxml
http_request = new XMLHttpRequest() http_requestoverrideMimeType(textxml)
A proacutexima coisa a ser feita eacute decidir o que quer fazer apoacutes receber a resposta
do servidor ao seu pedido Nesta etapa soacute precisa de dizer ao objecto pedido
HTTP que funccedilatildeo JavaScript iraacute processar a resposta Isto eacute feito definindo a
propriedade onreadystatechange do objecto ao nome da funccedilatildeo JavaScript
que pretende utilizar tipo assim
http_requestonreadystatechange = nameOfTheFunction
Note-se que natildeo existem chavetas apoacutes o nome da funccedilatildeo e natildeo satildeo passados
paracircmetros Tambeacutem em vez de dar um nome duma funccedilatildeo vocecirc pode usar a
teacutecnica JavaScript de definir funccedilotildees agrave pressatildeo e definir as acccedilotildees que vatildeo
processar a resposta logo tipo assim
http_requestonreadystatechange = function() do the thing
De seguida apoacutes ter declarado o que vai acontecer mal receba a resposta vocecirc
precisa de consumar o pedido Precisa de chamar os meacutetodos open() e
send() da classe pedido HTTP tipo assim
http_requestopen(GET httpwwwexampleorgsomefile true) http_requestsend(null)
O primeiro paracircmetro da chamada do meacutetodo open() eacute o meacutetodo
pedido HTML ndash GET POST HEAD ou outro meacutetodo qualquer que
queira usar e que seja suportado pelo seu servidor Mantenha o
nome do meacutetodo em maiuacutesculas para obedecer agraves normas HTTP
senatildeo certos browsers (como o Firefox) podem natildeo processar o
pedido Para obter mais informaccedilatildeo sobre os possiacuteveis meacutetodos
pedido HTTP pode dar uma olhadela em W3C specs
O segundo paracircmetro eacute a URL da paacutegina que estaacute a pedir Como
medida de seguranccedila natildeo pode efectuar pedidos de paacuteginas de
domiacutenios externos Certifique-se que usa o nome exacto do domiacutenio
em todas as suas paacuteginas ou iraacute receber um erro Permissatildeo
Negada quando efectua uma chamada open() Um erro comum eacute
aceder ao seu domiacutenio atraveacutes de domiacuteniotld ao mesmo tempo que
tenta chamar paacuteginas com wwwdomiacuteniotld
O terceiro paracircmetro define se o pedido eacute assiacutencrono Se TRUE a
execuccedilatildeo da funccedilatildeo JavaScript iraacute continuar enquanto que a
resposta do servidor ainda natildeo foi recebida Isto eacute o A de AJAX
O paracircmetro do meacutetodo send() pode ser costituido por quaisquer dados que
pretenda enviar ao servidor ao enviar (POST) o pedido Os dados devem estar
sob a forma de uma linha de texto de pergunta tipo
name=valueampanothername=othervalueampso=on
Note-se que se pretende enviar (POST) dados vocecirc deve alterar o tipo MIME
do pedido usando a seguinte linha
http_requestsetRequestHeader(Content-Type applicationx-www-form-urlencoded)
De outra forma o servidor iraacute ignorar os dados (post)
[editar]
2ordm Passo - Ora aqui estaacute ou Lidar com a Resposta do Servidor
Lembre-se que quando estava a enviar o pedido vocecirc providenciou o nome de
uma funccedilatildeo JavaScript que eacute criada para lidar com a resposta
http_requestonreadystatechange = nameOfTheFunction
Vamos a ver o que eacute que esta funccedilatildeo deve fazer Primeiro a funccedilatildeo precisa de
verificar o estado do pedido Se o estado possui o valor 4 isso significa que a
totalidade da resposta do servidor foi recebida e que pode continuar a
processaacute-la agrave vontade
if (http_requestreadyState == 4) everything is good the response is received else still not ready
A lista completa dos valores readyState eacute a seguinte 0 (uninitialized)
1 (a carregar)
2 (carregado)
3 (interactivo)
4 (completo)
(Source)
A proacutexima coisa a verificar eacute o coacutedigo do estado da resposta HTTP do servidor
Todos os coacutedigos possiacuteveis estatildeo listados na paacutegina W3C Para os nossos
objectivos noacutes soacute estamos interessados na resposta 200 OK
if (http_requeststatus == 200) perfect else there was a problem with the request for example the response may be a 404 (Not Found) or 500 (Internal Server Error) response codes
Depois de verificar o estado do pedido e o coacutedigo do estado HTTP da resposta
compete-lhe a si fazer aquilo que quer fazer com os dados que o servidor lhe
enviou Tem duas opccedilotildees para aceder a esses dados
http_requestresponseText ndash iraacute devolver a resposta do
servidor como uma linha de texto
http_requestresponseXML ndash iraacute devolver a resposta do
servidor como um objecto XMLDocument que pode percorrer
usando as funccedilotildees DOM de JavaScript
[editar]
Passo 3 ndash Agora todos juntos - Um exemplo simples
Vamos agora pocircr tudo junto e efectuar um simples pedido HTTP O nosso
JavaScript vai pedir um documento HTML testehtml que conteacutem o texto
Sou um teste e entatildeo vamos alert() os conteuacutedos do ficheiro
testehtml
ltscript type=textjavascript language=javascriptgt var http_request = false function makeRequest(url) http_request = false if (windowXMLHttpRequest) Mozilla Safari http_request = new XMLHttpRequest() if (http_requestoverrideMimeType) http_requestoverrideMimeType(textxml) See note below about this line else if (windowActiveXObject) IE try http_request = new ActiveXObject(Msxml2XMLHTTP) catch (e) try http_request = new ActiveXObject(MicrosoftXMLHTTP) catch (e) if (http_request) alert(Giving up ( Cannot create an XMLHTTP instance)
return false http_requestonreadystatechange = alertContents http_requestopen(GET url true) http_requestsend(null) function alertContents() if (http_requestreadyState == 4) if (http_requeststatus == 200) alert(http_requestresponseText) else alert(There was a problem with the request) ltscriptgt ltspan style=cursor pointer text-decoration underline onclick=makeRequest(testhtml)gt Make a request ltspangt
Neste exemplo
O utilizador clicka no atalho efectuar pedido no browser
- o
esposta foi recebida e se eacute um OK
Vocecirc pode testar o exemplo aqui
Isto chama a funccedilatildeo com um paracircmetro -makeRequest()
nome testehtml de um ficheiro HTML na mesma directoria
O pedido eacute feito e entatildeo ( ) a execuccedilatildeo eacute onreadystatechange
passada a alertContents()
tents() verifia se a ralertCon
e entatildeo alerta (alert()) os conteuacutedos do ficheiro testhtml
e pode ver o ficheiro de teste aqui
Nota A linha
http_requestoverrideMimeType(textxml)
acima iraacute causar erros de Consola JavaScript no Firefox 15b tal como estaacute
documentado em httpsbugzillamozillaorgshow_bugcgiid=311724 se a
paacutegina chamada por XMLHttpRequest natildeo for XML vaacutelido (por exemplo se
for texto simples)
Se obter Erro de Sintaxe ou Erro Mal Formado naquele browser e natildeo estaacute a
tentar carregar um apaacutegina XML a partir de XMLHttpRequest retire aquela
linha do seu coacutedigo
Nota 2 se estiver a enviar um pedido a um pedaccedilo de coacutedigo que iraacute retornar
XML em vez de a um ficheiro estaacutetico de XML entatildeo precisa de definir algum
cabeccedilalho de resposta se a sua paacutegina precisa de funcionar no Internet
Explorer aleacutem do Mozilla Se natildeo definir o cabeccedilalho Content-Type
applicationxml o Internet Explorer iraacute lanccedilar um erro JavaScript
Esperado Objecto apoacutes a linha onde tenta aceder a um elemento XML Se natildeo
define o cabeccedilalho Cache-Control no-cache o browser iraacute guardar a
resposta e nunca re-enviar o pedido tornando o depuramento de erros um
desafio
[editar]
Passo 4 ndash Os Ficheiros-X ou Trabalhar com a Resposta XML
No exemplo anterior apoacutes termos recebido a resposta ao pedido HTTP noacutes
usamos a propriedade reponseText do objecto de pedido e continha os
conteuacutedos do ficheiro testhtml Agora vamos experimentar a propriedade
responseXML
Antes de tudo vamos criar um documento XML vaacutelido que vamos pedir mais agrave
frente O documento (testxml) conteacutem o seguinte
ltxml version=10 gt ltrootgt Im a test ltrootgt
No guiatildeo soacute precisamos de alterar a linha do pedido com
onclick=makeRequest(testxml)gt
Entatildeo em alertContents() noacutes precisamos de substituir a linha de alerta
(alert(http_requestresponseText)) com
var xmldoc = http_requestresponseXML var root_node = xmldocgetElementsByTagName(root)item(0) alert(root_nodefirstChilddata)
Assim pegamos no objecto XMLDocument fornecido por responseXML e
usamos os meacutetodos DOM para aceder a alguns dados obtidos no documento
XML Pode ver o ficheiro testxml aqui e o guiatildeo de testes actualizado aqui
http_requestopen(GET httpwwwexampleorgsomefile true) http_requestsend(null)
O primeiro paracircmetro da chamada do meacutetodo open() eacute o meacutetodo
pedido HTML ndash GET POST HEAD ou outro meacutetodo qualquer que
queira usar e que seja suportado pelo seu servidor Mantenha o
nome do meacutetodo em maiuacutesculas para obedecer agraves normas HTTP
senatildeo certos browsers (como o Firefox) podem natildeo processar o
pedido Para obter mais informaccedilatildeo sobre os possiacuteveis meacutetodos
pedido HTTP pode dar uma olhadela em W3C specs
O segundo paracircmetro eacute a URL da paacutegina que estaacute a pedir Como
medida de seguranccedila natildeo pode efectuar pedidos de paacuteginas de
domiacutenios externos Certifique-se que usa o nome exacto do domiacutenio
em todas as suas paacuteginas ou iraacute receber um erro Permissatildeo
Negada quando efectua uma chamada open() Um erro comum eacute
aceder ao seu domiacutenio atraveacutes de domiacuteniotld ao mesmo tempo que
tenta chamar paacuteginas com wwwdomiacuteniotld
O terceiro paracircmetro define se o pedido eacute assiacutencrono Se TRUE a
execuccedilatildeo da funccedilatildeo JavaScript iraacute continuar enquanto que a
resposta do servidor ainda natildeo foi recebida Isto eacute o A de AJAX
O paracircmetro do meacutetodo send() pode ser costituido por quaisquer dados que
pretenda enviar ao servidor ao enviar (POST) o pedido Os dados devem estar
sob a forma de uma linha de texto de pergunta tipo
name=valueampanothername=othervalueampso=on
Note-se que se pretende enviar (POST) dados vocecirc deve alterar o tipo MIME
do pedido usando a seguinte linha
http_requestsetRequestHeader(Content-Type applicationx-www-form-urlencoded)
De outra forma o servidor iraacute ignorar os dados (post)
[editar]
2ordm Passo - Ora aqui estaacute ou Lidar com a Resposta do Servidor
Lembre-se que quando estava a enviar o pedido vocecirc providenciou o nome de
uma funccedilatildeo JavaScript que eacute criada para lidar com a resposta
http_requestonreadystatechange = nameOfTheFunction
Vamos a ver o que eacute que esta funccedilatildeo deve fazer Primeiro a funccedilatildeo precisa de
verificar o estado do pedido Se o estado possui o valor 4 isso significa que a
totalidade da resposta do servidor foi recebida e que pode continuar a
processaacute-la agrave vontade
if (http_requestreadyState == 4) everything is good the response is received else still not ready
A lista completa dos valores readyState eacute a seguinte 0 (uninitialized)
1 (a carregar)
2 (carregado)
3 (interactivo)
4 (completo)
(Source)
A proacutexima coisa a verificar eacute o coacutedigo do estado da resposta HTTP do servidor
Todos os coacutedigos possiacuteveis estatildeo listados na paacutegina W3C Para os nossos
objectivos noacutes soacute estamos interessados na resposta 200 OK
if (http_requeststatus == 200) perfect else there was a problem with the request for example the response may be a 404 (Not Found) or 500 (Internal Server Error) response codes
Depois de verificar o estado do pedido e o coacutedigo do estado HTTP da resposta
compete-lhe a si fazer aquilo que quer fazer com os dados que o servidor lhe
enviou Tem duas opccedilotildees para aceder a esses dados
http_requestresponseText ndash iraacute devolver a resposta do
servidor como uma linha de texto
http_requestresponseXML ndash iraacute devolver a resposta do
servidor como um objecto XMLDocument que pode percorrer
usando as funccedilotildees DOM de JavaScript
[editar]
Passo 3 ndash Agora todos juntos - Um exemplo simples
Vamos agora pocircr tudo junto e efectuar um simples pedido HTTP O nosso
JavaScript vai pedir um documento HTML testehtml que conteacutem o texto
Sou um teste e entatildeo vamos alert() os conteuacutedos do ficheiro
testehtml
ltscript type=textjavascript language=javascriptgt var http_request = false function makeRequest(url) http_request = false if (windowXMLHttpRequest) Mozilla Safari http_request = new XMLHttpRequest() if (http_requestoverrideMimeType) http_requestoverrideMimeType(textxml) See note below about this line else if (windowActiveXObject) IE try http_request = new ActiveXObject(Msxml2XMLHTTP) catch (e) try http_request = new ActiveXObject(MicrosoftXMLHTTP) catch (e) if (http_request) alert(Giving up ( Cannot create an XMLHTTP instance)
return false http_requestonreadystatechange = alertContents http_requestopen(GET url true) http_requestsend(null) function alertContents() if (http_requestreadyState == 4) if (http_requeststatus == 200) alert(http_requestresponseText) else alert(There was a problem with the request) ltscriptgt ltspan style=cursor pointer text-decoration underline onclick=makeRequest(testhtml)gt Make a request ltspangt
Neste exemplo
O utilizador clicka no atalho efectuar pedido no browser
- o
esposta foi recebida e se eacute um OK
Vocecirc pode testar o exemplo aqui
Isto chama a funccedilatildeo com um paracircmetro -makeRequest()
nome testehtml de um ficheiro HTML na mesma directoria
O pedido eacute feito e entatildeo ( ) a execuccedilatildeo eacute onreadystatechange
passada a alertContents()
tents() verifia se a ralertCon
e entatildeo alerta (alert()) os conteuacutedos do ficheiro testhtml
e pode ver o ficheiro de teste aqui
Nota A linha
http_requestoverrideMimeType(textxml)
acima iraacute causar erros de Consola JavaScript no Firefox 15b tal como estaacute
documentado em httpsbugzillamozillaorgshow_bugcgiid=311724 se a
paacutegina chamada por XMLHttpRequest natildeo for XML vaacutelido (por exemplo se
for texto simples)
Se obter Erro de Sintaxe ou Erro Mal Formado naquele browser e natildeo estaacute a
tentar carregar um apaacutegina XML a partir de XMLHttpRequest retire aquela
linha do seu coacutedigo
Nota 2 se estiver a enviar um pedido a um pedaccedilo de coacutedigo que iraacute retornar
XML em vez de a um ficheiro estaacutetico de XML entatildeo precisa de definir algum
cabeccedilalho de resposta se a sua paacutegina precisa de funcionar no Internet
Explorer aleacutem do Mozilla Se natildeo definir o cabeccedilalho Content-Type
applicationxml o Internet Explorer iraacute lanccedilar um erro JavaScript
Esperado Objecto apoacutes a linha onde tenta aceder a um elemento XML Se natildeo
define o cabeccedilalho Cache-Control no-cache o browser iraacute guardar a
resposta e nunca re-enviar o pedido tornando o depuramento de erros um
desafio
[editar]
Passo 4 ndash Os Ficheiros-X ou Trabalhar com a Resposta XML
No exemplo anterior apoacutes termos recebido a resposta ao pedido HTTP noacutes
usamos a propriedade reponseText do objecto de pedido e continha os
conteuacutedos do ficheiro testhtml Agora vamos experimentar a propriedade
responseXML
Antes de tudo vamos criar um documento XML vaacutelido que vamos pedir mais agrave
frente O documento (testxml) conteacutem o seguinte
ltxml version=10 gt ltrootgt Im a test ltrootgt
No guiatildeo soacute precisamos de alterar a linha do pedido com
onclick=makeRequest(testxml)gt
Entatildeo em alertContents() noacutes precisamos de substituir a linha de alerta
(alert(http_requestresponseText)) com
var xmldoc = http_requestresponseXML var root_node = xmldocgetElementsByTagName(root)item(0) alert(root_nodefirstChilddata)
Assim pegamos no objecto XMLDocument fornecido por responseXML e
usamos os meacutetodos DOM para aceder a alguns dados obtidos no documento
XML Pode ver o ficheiro testxml aqui e o guiatildeo de testes actualizado aqui
2ordm Passo - Ora aqui estaacute ou Lidar com a Resposta do Servidor
Lembre-se que quando estava a enviar o pedido vocecirc providenciou o nome de
uma funccedilatildeo JavaScript que eacute criada para lidar com a resposta
http_requestonreadystatechange = nameOfTheFunction
Vamos a ver o que eacute que esta funccedilatildeo deve fazer Primeiro a funccedilatildeo precisa de
verificar o estado do pedido Se o estado possui o valor 4 isso significa que a
totalidade da resposta do servidor foi recebida e que pode continuar a
processaacute-la agrave vontade
if (http_requestreadyState == 4) everything is good the response is received else still not ready
A lista completa dos valores readyState eacute a seguinte 0 (uninitialized)
1 (a carregar)
2 (carregado)
3 (interactivo)
4 (completo)
(Source)
A proacutexima coisa a verificar eacute o coacutedigo do estado da resposta HTTP do servidor
Todos os coacutedigos possiacuteveis estatildeo listados na paacutegina W3C Para os nossos
objectivos noacutes soacute estamos interessados na resposta 200 OK
if (http_requeststatus == 200) perfect else there was a problem with the request for example the response may be a 404 (Not Found) or 500 (Internal Server Error) response codes
Depois de verificar o estado do pedido e o coacutedigo do estado HTTP da resposta
compete-lhe a si fazer aquilo que quer fazer com os dados que o servidor lhe
enviou Tem duas opccedilotildees para aceder a esses dados
http_requestresponseText ndash iraacute devolver a resposta do
servidor como uma linha de texto
http_requestresponseXML ndash iraacute devolver a resposta do
servidor como um objecto XMLDocument que pode percorrer
usando as funccedilotildees DOM de JavaScript
[editar]
Passo 3 ndash Agora todos juntos - Um exemplo simples
Vamos agora pocircr tudo junto e efectuar um simples pedido HTTP O nosso
JavaScript vai pedir um documento HTML testehtml que conteacutem o texto
Sou um teste e entatildeo vamos alert() os conteuacutedos do ficheiro
testehtml
ltscript type=textjavascript language=javascriptgt var http_request = false function makeRequest(url) http_request = false if (windowXMLHttpRequest) Mozilla Safari http_request = new XMLHttpRequest() if (http_requestoverrideMimeType) http_requestoverrideMimeType(textxml) See note below about this line else if (windowActiveXObject) IE try http_request = new ActiveXObject(Msxml2XMLHTTP) catch (e) try http_request = new ActiveXObject(MicrosoftXMLHTTP) catch (e) if (http_request) alert(Giving up ( Cannot create an XMLHTTP instance)
return false http_requestonreadystatechange = alertContents http_requestopen(GET url true) http_requestsend(null) function alertContents() if (http_requestreadyState == 4) if (http_requeststatus == 200) alert(http_requestresponseText) else alert(There was a problem with the request) ltscriptgt ltspan style=cursor pointer text-decoration underline onclick=makeRequest(testhtml)gt Make a request ltspangt
Neste exemplo
O utilizador clicka no atalho efectuar pedido no browser
- o
esposta foi recebida e se eacute um OK
Vocecirc pode testar o exemplo aqui
Isto chama a funccedilatildeo com um paracircmetro -makeRequest()
nome testehtml de um ficheiro HTML na mesma directoria
O pedido eacute feito e entatildeo ( ) a execuccedilatildeo eacute onreadystatechange
passada a alertContents()
tents() verifia se a ralertCon
e entatildeo alerta (alert()) os conteuacutedos do ficheiro testhtml
e pode ver o ficheiro de teste aqui
Nota A linha
http_requestoverrideMimeType(textxml)
acima iraacute causar erros de Consola JavaScript no Firefox 15b tal como estaacute
documentado em httpsbugzillamozillaorgshow_bugcgiid=311724 se a
paacutegina chamada por XMLHttpRequest natildeo for XML vaacutelido (por exemplo se
for texto simples)
Se obter Erro de Sintaxe ou Erro Mal Formado naquele browser e natildeo estaacute a
tentar carregar um apaacutegina XML a partir de XMLHttpRequest retire aquela
linha do seu coacutedigo
Nota 2 se estiver a enviar um pedido a um pedaccedilo de coacutedigo que iraacute retornar
XML em vez de a um ficheiro estaacutetico de XML entatildeo precisa de definir algum
cabeccedilalho de resposta se a sua paacutegina precisa de funcionar no Internet
Explorer aleacutem do Mozilla Se natildeo definir o cabeccedilalho Content-Type
applicationxml o Internet Explorer iraacute lanccedilar um erro JavaScript
Esperado Objecto apoacutes a linha onde tenta aceder a um elemento XML Se natildeo
define o cabeccedilalho Cache-Control no-cache o browser iraacute guardar a
resposta e nunca re-enviar o pedido tornando o depuramento de erros um
desafio
[editar]
Passo 4 ndash Os Ficheiros-X ou Trabalhar com a Resposta XML
No exemplo anterior apoacutes termos recebido a resposta ao pedido HTTP noacutes
usamos a propriedade reponseText do objecto de pedido e continha os
conteuacutedos do ficheiro testhtml Agora vamos experimentar a propriedade
responseXML
Antes de tudo vamos criar um documento XML vaacutelido que vamos pedir mais agrave
frente O documento (testxml) conteacutem o seguinte
ltxml version=10 gt ltrootgt Im a test ltrootgt
No guiatildeo soacute precisamos de alterar a linha do pedido com
onclick=makeRequest(testxml)gt
Entatildeo em alertContents() noacutes precisamos de substituir a linha de alerta
(alert(http_requestresponseText)) com
var xmldoc = http_requestresponseXML var root_node = xmldocgetElementsByTagName(root)item(0) alert(root_nodefirstChilddata)
Assim pegamos no objecto XMLDocument fornecido por responseXML e
usamos os meacutetodos DOM para aceder a alguns dados obtidos no documento
XML Pode ver o ficheiro testxml aqui e o guiatildeo de testes actualizado aqui
http_requestresponseText ndash iraacute devolver a resposta do
servidor como uma linha de texto
http_requestresponseXML ndash iraacute devolver a resposta do
servidor como um objecto XMLDocument que pode percorrer
usando as funccedilotildees DOM de JavaScript
[editar]
Passo 3 ndash Agora todos juntos - Um exemplo simples
Vamos agora pocircr tudo junto e efectuar um simples pedido HTTP O nosso
JavaScript vai pedir um documento HTML testehtml que conteacutem o texto
Sou um teste e entatildeo vamos alert() os conteuacutedos do ficheiro
testehtml
ltscript type=textjavascript language=javascriptgt var http_request = false function makeRequest(url) http_request = false if (windowXMLHttpRequest) Mozilla Safari http_request = new XMLHttpRequest() if (http_requestoverrideMimeType) http_requestoverrideMimeType(textxml) See note below about this line else if (windowActiveXObject) IE try http_request = new ActiveXObject(Msxml2XMLHTTP) catch (e) try http_request = new ActiveXObject(MicrosoftXMLHTTP) catch (e) if (http_request) alert(Giving up ( Cannot create an XMLHTTP instance)
return false http_requestonreadystatechange = alertContents http_requestopen(GET url true) http_requestsend(null) function alertContents() if (http_requestreadyState == 4) if (http_requeststatus == 200) alert(http_requestresponseText) else alert(There was a problem with the request) ltscriptgt ltspan style=cursor pointer text-decoration underline onclick=makeRequest(testhtml)gt Make a request ltspangt
Neste exemplo
O utilizador clicka no atalho efectuar pedido no browser
- o
esposta foi recebida e se eacute um OK
Vocecirc pode testar o exemplo aqui
Isto chama a funccedilatildeo com um paracircmetro -makeRequest()
nome testehtml de um ficheiro HTML na mesma directoria
O pedido eacute feito e entatildeo ( ) a execuccedilatildeo eacute onreadystatechange
passada a alertContents()
tents() verifia se a ralertCon
e entatildeo alerta (alert()) os conteuacutedos do ficheiro testhtml
e pode ver o ficheiro de teste aqui
Nota A linha
http_requestoverrideMimeType(textxml)
acima iraacute causar erros de Consola JavaScript no Firefox 15b tal como estaacute
documentado em httpsbugzillamozillaorgshow_bugcgiid=311724 se a
paacutegina chamada por XMLHttpRequest natildeo for XML vaacutelido (por exemplo se
for texto simples)
Se obter Erro de Sintaxe ou Erro Mal Formado naquele browser e natildeo estaacute a
tentar carregar um apaacutegina XML a partir de XMLHttpRequest retire aquela
linha do seu coacutedigo
Nota 2 se estiver a enviar um pedido a um pedaccedilo de coacutedigo que iraacute retornar
XML em vez de a um ficheiro estaacutetico de XML entatildeo precisa de definir algum
cabeccedilalho de resposta se a sua paacutegina precisa de funcionar no Internet
Explorer aleacutem do Mozilla Se natildeo definir o cabeccedilalho Content-Type
applicationxml o Internet Explorer iraacute lanccedilar um erro JavaScript
Esperado Objecto apoacutes a linha onde tenta aceder a um elemento XML Se natildeo
define o cabeccedilalho Cache-Control no-cache o browser iraacute guardar a
resposta e nunca re-enviar o pedido tornando o depuramento de erros um
desafio
[editar]
Passo 4 ndash Os Ficheiros-X ou Trabalhar com a Resposta XML
No exemplo anterior apoacutes termos recebido a resposta ao pedido HTTP noacutes
usamos a propriedade reponseText do objecto de pedido e continha os
conteuacutedos do ficheiro testhtml Agora vamos experimentar a propriedade
responseXML
Antes de tudo vamos criar um documento XML vaacutelido que vamos pedir mais agrave
frente O documento (testxml) conteacutem o seguinte
ltxml version=10 gt ltrootgt Im a test ltrootgt
No guiatildeo soacute precisamos de alterar a linha do pedido com
onclick=makeRequest(testxml)gt
Entatildeo em alertContents() noacutes precisamos de substituir a linha de alerta
(alert(http_requestresponseText)) com
var xmldoc = http_requestresponseXML var root_node = xmldocgetElementsByTagName(root)item(0) alert(root_nodefirstChilddata)
Assim pegamos no objecto XMLDocument fornecido por responseXML e
usamos os meacutetodos DOM para aceder a alguns dados obtidos no documento
XML Pode ver o ficheiro testxml aqui e o guiatildeo de testes actualizado aqui
return false http_requestonreadystatechange = alertContents http_requestopen(GET url true) http_requestsend(null) function alertContents() if (http_requestreadyState == 4) if (http_requeststatus == 200) alert(http_requestresponseText) else alert(There was a problem with the request) ltscriptgt ltspan style=cursor pointer text-decoration underline onclick=makeRequest(testhtml)gt Make a request ltspangt
Neste exemplo
O utilizador clicka no atalho efectuar pedido no browser
- o
esposta foi recebida e se eacute um OK
Vocecirc pode testar o exemplo aqui
Isto chama a funccedilatildeo com um paracircmetro -makeRequest()
nome testehtml de um ficheiro HTML na mesma directoria
O pedido eacute feito e entatildeo ( ) a execuccedilatildeo eacute onreadystatechange
passada a alertContents()
tents() verifia se a ralertCon
e entatildeo alerta (alert()) os conteuacutedos do ficheiro testhtml
e pode ver o ficheiro de teste aqui
Nota A linha
http_requestoverrideMimeType(textxml)
acima iraacute causar erros de Consola JavaScript no Firefox 15b tal como estaacute
documentado em httpsbugzillamozillaorgshow_bugcgiid=311724 se a
paacutegina chamada por XMLHttpRequest natildeo for XML vaacutelido (por exemplo se
for texto simples)
Se obter Erro de Sintaxe ou Erro Mal Formado naquele browser e natildeo estaacute a
tentar carregar um apaacutegina XML a partir de XMLHttpRequest retire aquela
linha do seu coacutedigo
Nota 2 se estiver a enviar um pedido a um pedaccedilo de coacutedigo que iraacute retornar
XML em vez de a um ficheiro estaacutetico de XML entatildeo precisa de definir algum
cabeccedilalho de resposta se a sua paacutegina precisa de funcionar no Internet
Explorer aleacutem do Mozilla Se natildeo definir o cabeccedilalho Content-Type
applicationxml o Internet Explorer iraacute lanccedilar um erro JavaScript
Esperado Objecto apoacutes a linha onde tenta aceder a um elemento XML Se natildeo
define o cabeccedilalho Cache-Control no-cache o browser iraacute guardar a
resposta e nunca re-enviar o pedido tornando o depuramento de erros um
desafio
[editar]
Passo 4 ndash Os Ficheiros-X ou Trabalhar com a Resposta XML
No exemplo anterior apoacutes termos recebido a resposta ao pedido HTTP noacutes
usamos a propriedade reponseText do objecto de pedido e continha os
conteuacutedos do ficheiro testhtml Agora vamos experimentar a propriedade
responseXML
Antes de tudo vamos criar um documento XML vaacutelido que vamos pedir mais agrave
frente O documento (testxml) conteacutem o seguinte
ltxml version=10 gt ltrootgt Im a test ltrootgt
No guiatildeo soacute precisamos de alterar a linha do pedido com
onclick=makeRequest(testxml)gt
Entatildeo em alertContents() noacutes precisamos de substituir a linha de alerta
(alert(http_requestresponseText)) com
var xmldoc = http_requestresponseXML var root_node = xmldocgetElementsByTagName(root)item(0) alert(root_nodefirstChilddata)
Assim pegamos no objecto XMLDocument fornecido por responseXML e
usamos os meacutetodos DOM para aceder a alguns dados obtidos no documento
XML Pode ver o ficheiro testxml aqui e o guiatildeo de testes actualizado aqui
Se obter Erro de Sintaxe ou Erro Mal Formado naquele browser e natildeo estaacute a
tentar carregar um apaacutegina XML a partir de XMLHttpRequest retire aquela
linha do seu coacutedigo
Nota 2 se estiver a enviar um pedido a um pedaccedilo de coacutedigo que iraacute retornar
XML em vez de a um ficheiro estaacutetico de XML entatildeo precisa de definir algum
cabeccedilalho de resposta se a sua paacutegina precisa de funcionar no Internet
Explorer aleacutem do Mozilla Se natildeo definir o cabeccedilalho Content-Type
applicationxml o Internet Explorer iraacute lanccedilar um erro JavaScript
Esperado Objecto apoacutes a linha onde tenta aceder a um elemento XML Se natildeo
define o cabeccedilalho Cache-Control no-cache o browser iraacute guardar a
resposta e nunca re-enviar o pedido tornando o depuramento de erros um
desafio
[editar]
Passo 4 ndash Os Ficheiros-X ou Trabalhar com a Resposta XML
No exemplo anterior apoacutes termos recebido a resposta ao pedido HTTP noacutes
usamos a propriedade reponseText do objecto de pedido e continha os
conteuacutedos do ficheiro testhtml Agora vamos experimentar a propriedade
responseXML
Antes de tudo vamos criar um documento XML vaacutelido que vamos pedir mais agrave
frente O documento (testxml) conteacutem o seguinte
ltxml version=10 gt ltrootgt Im a test ltrootgt
No guiatildeo soacute precisamos de alterar a linha do pedido com
onclick=makeRequest(testxml)gt
Entatildeo em alertContents() noacutes precisamos de substituir a linha de alerta
(alert(http_requestresponseText)) com
var xmldoc = http_requestresponseXML var root_node = xmldocgetElementsByTagName(root)item(0) alert(root_nodefirstChilddata)
Assim pegamos no objecto XMLDocument fornecido por responseXML e
usamos os meacutetodos DOM para aceder a alguns dados obtidos no documento
XML Pode ver o ficheiro testxml aqui e o guiatildeo de testes actualizado aqui
Entatildeo em alertContents() noacutes precisamos de substituir a linha de alerta
(alert(http_requestresponseText)) com
var xmldoc = http_requestresponseXML var root_node = xmldocgetElementsByTagName(root)item(0) alert(root_nodefirstChilddata)
Assim pegamos no objecto XMLDocument fornecido por responseXML e
usamos os meacutetodos DOM para aceder a alguns dados obtidos no documento
XML Pode ver o ficheiro testxml aqui e o guiatildeo de testes actualizado aqui
