PW

PW Programao Web
AJAX

Parte 5

AJAX (I)

INF 2008/09

Instituto Politcnico do Cvado do Ave

lufer

Escola Superior de Tecnologia Licenciatura em Informtica

1

Ano lectivo de 2008-2009

PW

AJAX

AJAX: Aplicado a

AJAX = Asynchronous JavaScript and XML

Cliente interage com o servidor de forma assncrona.

Integrar standards existentes:

css

xhtml

xml

javascript

INF 2008/09

Explora vantagens do HTTP/GET/POST

lufer

PW

AJAX

AJAX: Aplicado a

Receita

Criar objecto XMLHttpRequest.

Estabelecer ligao com o servidor (url), definir o tipo de pedido (GET/POST) e se o envio ser assncrono ou no (true/false): mtodo open().

Iniciar comunicao com o servidor: mtodo send().

Atender ao estado da comunicao. A propriedade readystate e evento onreadystatechange esto envolvidas:

Sempre que se altera o estado, o evento onreadystatechange activado.

INF 2008/09

Quem altera o estado (readystate) o servidor.

lufer

Deve existir uma funo atenta ao evento onreadystatechange - Event Handler.

3

PW

AJAX

AJAX: Aplicado a

Receita

Criar objecto XMLHttpRequest (I):

INF 2008/09

function getHTTPObject(){ if (windowActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) return new XMLHttpRequest(); else { alert(O seu browser no suporta AJAX."); return null; } } . var objectRequest = getHTTPObject();

lufer

PW

AJAX

AJAX: Aplicado a

Receita

Criar objecto XMLHttpRequest (II):

INF 2008/09

function createXMLHttp() { if (typeof XMLHttpRequest != 'undefined') return new XMLHttpRequest(); else if (window.ActiveXObject) { var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.5.0"]; for (var i = avers.length -1; i >= 0; i--) { try { httpObj = new ActiveXObject(avers[i]); return httpObj; } catch(e) {} } } throw new Error('XMLHttp (AJAX) not supported'); }

lufer

var objectRequest = createXMLHttp();

5

PW

AJAX

AJAX: Aplicado a

Receita

Ligar ao Servidor e enviar pedido:

objectRequest.open(Method, URL, Async, [User], [Password])

objectRequest.send(null)

INF 2008/09

lufer

PW

AJAX

AJAX: Aplicado a

Receita

Suportar onreadystatechange com funo normal:

objectoRequest.onreadystatechange = stateChanged;

Exemplo:

objectoRequest.onreadystatechanged = stateChanged;

INF 2008/09

lufer

function stateChanged() { if (objectoRequest.readyState==4) //quando recebeu resposta completa { document.getElementById("txtHint").innerHTML= eval(objectoRequest.responseText); } }

7

PW

AJAX

AJAX: Aplicado a

Receita

Suportar onreadystatechange : com funo annima:

objectoRequest.onreadystatechange = function(){}

Exemplo:

objectoRequest.onreadystatechange = function(){

If (objectoRequest.readystate==4 && objectoRequest.status==200){

var xml=objectoRequest.responsexml;

INF 2008/09

alert(xml);

lufer

PW

AJAX

AJAX: Aplicado a

Receita

Estado de readystate:

0 objecto inicia o seu estado interno

1 Preparar dados para fazer pedidoP

2 Pedido efectuado

3 Aguarda resposta do servidor

INF 2008/09

4 Resposta obtida do servidor

lufer

PW

AJAX

AJAX: Aplicado a

Receita

Interpretar estado de readystate:

Feita no interior do Event Handler (que lida com onreadystatechange)

if(objectRequest.readystate==4){

//aco sobre a resposta vinda do servidor //ou responseXML

INF 2008/09

document.write(objectRequest.responseText);

}
10

lufer

PW

AJAX

AJAX: Aplicado a

Receita

Processo completo:

function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject(); //cria objecto...caso possvel!

Criar objecto

Ligar ao Server

Enviar Pedido

if (xmlHttp==null) { alert ("No suporta AJAX!...."); return; } url="get.js"; xmlHttp.open("GET",url,true); xmlHttp.send(null); xmlHttp.onreadystatechange=stateChanged; }

Tratar Resposta

INF 2008/09

lufer

<input type="text" id="txt1" name="username" onkeyup="showHint(this.value);"/>

11

PW

AJAX

Referncias
Tutorial on-line: http://javascript.about.com/library/blajax01.htm http://www.w3schools.com/ajax/ajax_intro.asp

Reference:
DOM - http://www.sitepoint.com/article/rough-guide-dom/

Livros:
AJAX, Rich Internet Applications, and Web Development For Programmers, DEITEL DEVELOPER SERIES,

INF 2008/09

lufer

12