Tec Web Ajax
Tec Web Ajax
Tec Web Ajax
Rui Prior
AJAX 1
A nova pgina tem que ser completamente gerada e transmitida, ainda que as alteraes sejam mnimas As aplicaes tradicionais so pesadas e pouco interactivas
AJAX 2
AJAX
No uma nova tecnologia, mas um novo paradigma para aplicaes web
O navegador troca informao com o servidor de forma assncrona, mantendo a interface funcional O servidor apenas tem que gerar a informao nova, e no pginas completas
AJAX: aplicaes
Algumas aplicaes tpicas para o AJAX
Validao em tempo real (no servidor) de campos de formulrios Autocompletao (e.g., Google autosuggest) Carregamento parcial a pedido Submisso parcial sem refrescamento da pgina completa Controlos e efeitos sofisticados, semelhantes aos usados em aplicaes locais Refrescamento de dados e server push Mashups
AJAX 4
Inconvenientes
Dificuldade de integrao com algumas funes do browser (histria, boto retroceder, bookmarks) Percepo da latncia da rede Maior dificuldade de anlise dos contedos
Dificuldade de indexao de contedos por sites de busca
XMLHttpRequest
API que permite efectuar pedidos HTTP a partir do JavaScript Retorna um objecto com as seguintes propriedades
readyState estado do pedido
0 1 2 3 4 = no-inicializado = aberto = pedido enviado = a receber resposta = resposta recebida
onreadystatechange handler para evento de alterao do readyState status quando chega a resposta, contm o cdigo de resposta HTTP statusText quando chega a resposta, contm a descrio textual do cdigo de resposta HTTP responseText corpo da resposta como string responseXML corpo da resposta como objecto DOM de tipo documento (apenas vlido em respostas XML)
AJAX 6
XMLHttpRequest: mtodos
open(method, url [, async [, username [ , password]]]) especifica o mtodo HTTP, o URL e alguns parmetros opcionais do pedido async indica se o pedido deve ser assncrono (true se omitido) username, password para efeitos de autenticao setRequestHeader(name, value) adiciona cabealho HTTP ao pedido
send(content) envia o pedido com content como corpo (null se o mtodo for o GET)
abort() cancela o pedido corrente getResponseHeader(headerName) devolve contedo do cabealho especificado getAllResponseHeaders() devolve string com todos os cabealhos HTTP
A assincronia evita o "congelamento" da interface espera da resposta. Pode fazer-se carregamento parcial sincronamente (mas pouco comum).
AJAX 7
AJAX 8
Codificao no URL
H caracteres que so invlidos numa query string necessrio codificar os parmetros usando encodeURIComponent()
req.open("get", "/cgi-bin/register?" + "username=" + encodeURIComponent(user) + "password=" + encodeURIComponent(pass), true);
Espaos nos componentes tambm podem ser codificados com + em vez de %20 Posteriormente, pode usar-se a funo encodeURI() para codificar o URL completo
E.g., para fazer o escape de pathnames com espaos
var url = encodeURI('http://mysite.com/file with spaces.html');
AJAX 9
Como o JavaScript no tem acesso ao sistema de ficheiros*, no era possvel enviar ficheiros usando este mtodo
Com HTML5 j possvel, mas sob controlo do utilizador
AJAX 10
iFrame Escondida
Inline frames (iFrames) so elementos que permitem embeber um documento HTML dentro do documento HTML principal possvel carregar documentos na iFrame sem afectar a pgina principal
O carregamento de uma pgina na iFrame no bloqueia a interface da pgina principal Neste caso, serve apenas para carregar informao
Em casos especiais, como o upload de ficheiros, antes do HTML5 era necessrio usar iFrames em vez do XMLHttpRequest()
AJAX 11
Scripts dinmicos
Como qualquer outro elemento, um <script> pode ser criado e inserido dinamicamente atravs do DOM O script avaliado no momento da sua insero
Se no for inline, feito o GET do URL no atributo src
Em vez de um URL esttico, o atributo src pode conter um URL que invoca um servio remoto
Mais uma alternativa para a invocao assncrona de servios
O script pode incluir uma chamada a uma funo de callback, que vai processar o resultado assim que este acaba de ser recebido
AJAX 13
NOTA: O XMLHttpRequest nvel 2 (HTML5) permite submisso de ficheiros e acesso a servios de terceiros
AJAX 15
CORS: Simples
Apenas GET ou POST com contedo text/plain, application/x-www-form-urlencoded ou multipart/form-data Sem cookies, autenticao ou cabealhos no-standard
GET /resources/public-data/ HTTP/1.1 Host: otherserver.com [outros cabealhos ...] Origin: http://myserver.com Identificao do site original HTTP/1.1 200 OK [outros cabealhos ...] Access-Control-Allow-Origin: * Transfer-Encoding: chunked Content-Type: application/xml [outros cabealhos ...] [contedo da resposta]
AJAX 18
Servidor aceita pedidos feitos a partir de qualquer site original (recurso pblico)
CORS: Preflighted
Restantes mtodos e POST com outros tipos de contedo Sem cookies nem autenticao, pode ter cabealhos no-standard Consulta prvia (OPTIONS) ao servidor para determinar se seguro fazer o pedido que se pretende script invocado 2 vezes!!!
OPTIONS /resources/post-here/ HTTP/1.1 Host: otherserver.com [outros cabealhos ...] Origin: http://myserver.com Access-Control-Request-Method: POST Pedido vai ser feito com mtodo POST Access-Control-Request-Headers: MY-CUSTOM-HEADER e vai ter um cabealho
no-standard
HTTP/1.1 200 OK [outros cabealhos ...] Access-Control-Allow-Origin: http://myserver.com Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: Content-Type, MY-CUSTOM-HEADER Access-Control-Max-Age: 1728000
AJAX 19
AJAX 20
Se a resposta no tiver os cabealhos necessrios, o browser no a passa ao objecto XMLHttpRequest Access-Control-Allow-Origin tem que ser o servidor original
HTTP/1.1 200 OK [outros cabealhos ...] Access-Control-Allow-Origin: http://myserver.com Access-Control-Allow-Credentials: true Content-Type: application/xml [outros cabealhos ...] [contedo da resposta]
AJAX 21
Este problema no exclusivo do CORS, j era possvel fazer o mesmo com a submisso de formulrios Soluo: scripts "sensveis" devem verificar sempre o contedo do cabealho Referer (e do Origin, se existir)
AJAX 22
XML no cliente
Gerao
// Criao de rvore DOM com o documento XML var doc = document.implementation.createDocument(null, 'root', null); var root = doc.documentElement; var element = doc.createElement('element'); root.appendChild(element); element.appendChild( document.createTextNode('Some text here') ); // Serializao do documento numa string XML var xmlString = (new XMLSerializer()).serializeToString(doc);
JSON
Formato leve para a troca de dados
JSON
Fonte: www.json.org
AJAX 26
JSON no cliente
Objecto JSON (nativo no HTML5 ou mdulo json2)
Gerao
var JSONstring = JSON.stringify(obj);
Parsing
Com eval (perigoso no usar)
var obj = eval('(' + JSONstring + ')');
Vantagens
Inconvenientes
Com mais que um valor
Que formato usar? Necessrio implementar parser especfico
XML
Standard Grande capacidade expressiva Muito verboso Humanamente legvel Parsing pesado Possibilita validao do formato (DTD)
No necessita de parser no cliente ( JavaScript) Conciso Permite serializar objectos Menos suportado que o XML noutras linguagens alm do JavaScript
AJAX 28
JSON
Interagem apenas atravs da troca de mensagens em pedidos/respostas HTTP Como invocar funes/subrotinas no servidor a partir do JavaScript?
AJAX 29
Resposta de erro
{ "jsonrpc": "2.0", "error": { "code": -32601, "message": "Procedure not found." }, "id": 3241 }
AJAX 31
Invocao pode falhar lanando excepo melhor faz-la num bloco try/catch
try { var result = service.calc.add(5,7); alert(result); } catch (e) { alert("Unable to add numbers because: " + e); }
AJAX 32
service.add( { params: [5, 7], onSuccess: function(sum) { alert(sum); }, onException: function(e) { alert("Unable to add numbers because: " + e); } } );
AJAX 33