AJAX - O que é?

AJAX = ?
AJAX - Asynchronous Javascript and XML

AJAX = Asynchronous Javascript and XML: Conjunto de

tecnologias de desenvolvimento Web que actuam em
conjunto para proporcionar aplicações Web com um
alto nível de interactividade

Tecnologias usadas:

XHTML / CSS

DOM: Document Object Model

JavaScript

XMLHttpRequest (comunicação assíncrona)

XML: Extensible Markup Language
DOM: Document Object Model

Document Object Model: é uma norma de modelo de

objectos usada para representar objectos HTML ou
XML

Esta norma representa os objectos como uma estrutura

hierárquica de elementos

A tecnologia JavaScript pode usar a norma DOM para

inspeccionar ou modificar dinamicamente uma página
HTML (estrutura, conteúdos ou estilo)

Referências: http://www.w3.org/DOM/ e
http://www.w3schools.com/HTMLDOM/default.asp
DOM: Representação de documentos HTML

As páginas HTML são representadas como uma

estrutura em árvore, com elementos, atributos e texto

Fonte da imagem: W3C

Ferramenta útil: Firefox DOM Inspector
O que é possível fazer com DOM e JavaScript ?

•Acrescentar e apagar elementos na página;

•Modificar atributos ou o texto de elementos;
•Activar ou desactivar elementos de formulário;
•Processar eventos (mouse click, move, keyboard,…)
•Detectar o browser do utilizador
•Detectar detalhes do ecrã do utilizador
•……….

Ver: http://www.w3schools.com/HTMLDOM/dom_examples.asp
Comunicação assíncrona com servidores Web

A comunicação assíncrona com servidores Web

recorre ao objecto XMLHttpRequest

Este objecto possui os seguintes métodos:

•open("method","URL",async,"uname","pswd")
•setRequestHeader("label","value") (define um
cabeçalho HTTP do pedido)
•send(content) (envia o pedido)
•abort() (cancela o pedido)
•getAllResponseHeaders() (obtém todos os
cabeçalhos HTTP da resposta)
•getResponseHeader("headername") (obtém um
determinado cabeçalho HTTP da resposta)
XMLHttpRequest : propriedades

Este objecto possui as seguintes propriedades:

•onreadystatechange (event handler)

•readyState (estado da comunicação)
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
•responseText (resposta como texto)
•responseXML (resposta como XML)
•status (código de estado, exemplo: 404)
•statusText (texto de estado, exemplo: “not found”)
XMLHttpRequest : exemplo

xmlhttp=null;
xmlhttp=new XMLHttpRequest();
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",”http://cotacoes.pt/cotacoes_accoes.php”,true);
xmlhttp.send(null);
}
else
{
alert(“Está na hora de instalar um browser que suporte XMLHTTP.");
}
XMLHttpRequest : continuação do exemplo

function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = "OK"
resposta=xmlhttp.responseXML;
//processar a resposta
}
else
{
alert("Problema a receber dados do servidor”);
}
}
}