Introduo

Com o desenvolvimento da Web novas tecnologias tem sido criada de modo a faze-la perfeita ou o mais prximo possvel da perfeio (realizao de tarefas com muita eficcia) e uma das tecnologias que veio a tona o AJAX que uma tecnologia que veio trazer inovaes a Web e criou o conceito de Web 2.0. que cria uma internet mais rica e usar friendly, na verdade esta ela no implementa algo completamente novo, faz uso de tecnologias Web existentes principalmente o XML e Javascript de modo a trazer um novo conceito de Web e de relacionamento entre criente e servidor. Ela de extrema importncia porque permitiu o surgimento de aplicativos Web com qualidade Desktop.

I. Conhecindo o AJAX
1.1. Significado do Ajax

AJAX (acrnimo em lngua

inglesa de Asynchronous Javascript and XML,

em

portugus

"Javascript e XML Assncronos") o uso metodolgico de tecnologias como Javascript e XML, providas por navegadores, para tornar pginas Web mais interativas com o usurio, utilizando-se de solicitaes assncronas de informaes. Foi inicialmente desenvolvida pelo estudioso Jess James Garret e mais tarde por diversas associaes. Apesar do nome, a utilizao de XML no obrigatria (JSON frequentemente utilizado) e as solicitaes tambm no necessitam de ser assncronas.

1.2.Comprendedo o Ajax

Com o AJAX, seu Javascript pode comunicar-se diretamente com o usurio, usando o objeto de XMLHttpRequestdo Javascript. Com este objeto, seu Javascript pode negociar dados com um web server, sem recarregar a pgina.

AJAX usa transferncia de dados assncrona (pedidos do HTTP) entre o browser e o web server, permitindo que os Web pages peam bocados de informao pequenos do usurio em vez das pginas inteiras.

A tcnica de AJAX faz aplicaes da Internet menores, mais rapidamente e mais user-friendly.

Ele baseado em padres Web standards j existente como: Javascript XML HTML CSS PHP
2

Os padres da web Standards usados em AJAX so definidos bem, e suportados por todos os principais browsers. As aplicaes de AJAX so browser e independente da plataforma.

1.2.1. Aplicaes menores na internet e o Ajax

As aplicaes da Web tm muitos benefcios sobre aplicaes desktop; podem alcanar uma audincia maior, mais fcil de instalar e suportar, e mais fcil de tornar-se. Entretanto, as aplicaes da Internet no so sempre como ricas e user-friendly como aplicaes desktop tradicionais.

Com AJAX, as aplicaes da Internet podem ser feitas mais ricas e mais user-friendly.

1.3. Caractersticas

AJAX no um novo modelo para desenvolvimento web. Os navegadores implementam essa tecnologia desde o ano 2000 (no mnimo). Porm sua popularizao nos ltimos anos tem tambm trazido consigo muitas outras melhorias para a Web. Tem estimulado a construo de aplicaes Web mais dinmicas e criativas. AJAX no uma tecnologia, mas um conjunto de tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades.

O ajax encorpora no seu modelo caractersticas como:

Exposio e interao dinmica usando o DOM1; Intercmbio e manipulao de dados usando XML e XSLT; Recuperao assncrona de dados usando o objeto XMLHttpRequest e XMLHttpResponse; JavaScript fazendo a juno entre os elementos.

DOM-Modelo de Objetos de Documentos

1.4. A necessidade do uso do Ajax

O modelo clssico de aplicao web trabalha assim: a maioria das aes do usurio na interface dispara uma solicitao HTTP para o servidor web. O servidor processa algo, recuperando dados, realizando clculos, conversando com vrios sistemas legados, e ento retorna uma pgina HTML para o cliente. um modelo adaptado do uso original da Web como um agente de hipertexto, porm o que faz a web boa para hipertexto no necessariamente a faz boa para aplicaes de software.

Com a popularizao de sistemas que funcionam inteiramente na Web e tambm com o aumento da velocidade das conexes banda larga, o problema da espera pelo envio e retorno da pgina inteira se tornou muito mais evidente para o usurio. Obviamente, se ns estivssemos projetando a Web a partir do zero para aplicaes, no faramos com que os usurios esperassem em vo. Uma vez que a interface est carregada, por que a interao do usurio deveria parar a cada vez que a aplicao precisasse de algo do servidor? Na realidade, por que o usurio deveria ver a aplicao ir ao servidor toda vez?

As principais vantagens das aplicaes que utilizam AJAX para determinadas requisies que os dados trafegados pela rede so reduzidos e o usurio no precisa aguardar a pgina ser recarregada a cada interao com o servidor.

A popularizao das tecnologias que o AJAX rene foi muito importante para a criao do conceito Web 2.02, que at hoje gera grandes divises entre os maiores pensadores da Web.

Apesar de no possuir nada inovador em sua essncia, o uso de AJAX revolucionou a Web inteira, trazendo tona muitos conceitos importantes para o desenvolvimento web.

Web 2.0- um termo criado em 2004 pela empresa americana O'Reilly Media para designar uma segunda gerao de comunidades e servios, tendo como conceito a "Web como plataforma", envolvendo wikis, aplicativos baseados em folksonomia, redes sociais e Tecnologia da Informao

II. Princpios sobre o qual o Ajax se assenta

O modelo clssico de aplicao baseado em pginas est relacionado com muitas das estruturas que ns usamos, e tambm em nossas maneiras de pensar. Vamos fazer uma anlise de alguns minutospara descobrir o que so estas suposies essenciais e como necessitamos repensar estas idias para entendermos Ajax suficientemente.

2.1.O navegador hospeda uma aplicao e no o contedo

Numa aplicao web clssica baseada em pginas, o navegador efectivamente um terminal burro. Ele no sabe nada sobre o que o utilizador est realmente realizando em suas aes conseqentes. Todas essas informaes so retidas no servidor web, tipicamente na sesso do utilizador. Sesses de utilizador no lado servidor so comuns atualmente. Se a aplicao foi escrita em PHP, Plataforma Java, .NET, Ruby on Rails ou outra linguagem utilizada no desenvolvimento de aplicaes para Web, a sesso no lado servidor faz parte da API padro, assim como o controle de solicitaes, respostas, e tipos de contedo (MIME).

Quando o utilizador entra ou de outra maneira inicia uma sesso, vrios objetos so criados no servidor, representando, por exemplo, a cesta de compras e as credenciais de cliente do utilizador. Ao mesmo tempo, a pgina inicial servida ao navegador, em um fluxo de marcaes HTML que mistura um anncio de apresentao padro e dados especficos do utilizador juntos com o contedo, como por exemplo, uma lista de itens exibidos recentemente.

Toda vez que o utilizador interage com o stio, um outro documento enviado para o navegador, contendo a mesma mistura de cabealhos e dados. O navegador retira o documento anterior e exibe o novo, porque ele no sabe que o outro documento produz um resultado muito semelhante.

Quando o utilizador efetua a sada ou fecha o navegador, a aplicao sai e a sesso destruda. Qualquer informao que o utilizador necessite ver na prxima vez que ele entrar ter que ser passada para a camada de persistncia de dados em cada visita.
5

Em Ajax, a lgica da aplicao movida para o navegador. Neste novo cenrio, quando o utilizador entra, um documento mais complexo entregue ao navegador, uma grande proporo do qual cdigo JavaScript. Este documento permanecer com o utilizador por toda a sesso, ainda que ele resolva provavelmente alterar sua aparncia consideravelmente, enquanto o utilizador est interagindo com ele. Ele sabe como responder s informaes inseridas pelo utilizador e capaz de decidir se manipula a entrada do utilizador ele mesmo ou se passa uma solicitao para o servidor web (o qual tem acesso ao banco de dados do sistema e outros recursos), ou ainda, se faz uma combinao de ambos.

Ele tambm pode armazenar o estado, porque o documento continua persistindo sobre toda a sesso do usurio. Por exemplo, o contedo de uma cesta de compras pode ser armazenado no navegador, em vez de ser armazenado na sesso do servidor.

2.2. Servidor fornece dados e no contedo

Como observamos, uma aplicao web clssica oferece a mesma mistura de alegorias, contedos e dados em todos os passos. Quando nosso usurio adiciona um item na cesta de compras, tudo que precisamos realmente responder com o valor atualizado da cesta ou informar se alguma coisa deu errado.

Um carrinho de compra baseado em Ajax pode comportar-se de forma mais inteligente, por meio de remessas de solicitaes assncronas ao servidor. O cabealho, o histrico de navegao, e outras caractersticas do layout da pgina esto todas carregadas, portanto o servidor necessita enviar de volta somente os dados relevantes.

Uma aplicao AJAX poderia fazer isto de vrios modos, como por exemplo, devolver um fragmento de JavaScript, um fluxo de texto simples, ou um pequeno documento XML. suficiente dizer por agora que qualquer um destes formatos ser muito menor que a mistura de informaes devolvida pela aplicao web clssica.

Em uma aplicao Ajax, o trfego tem sua maior intensidade no incio, com um largo e complexo cliente sendo entregue em uma nica exploso, quando o usurio entra. As comunicaes subseqentes com o servidor so muito mais eficientes, de qualquer forma. Para uma aplicao breve, o trfego cumulativo pode ser menor em uma aplicao de pgina web convencional. Mas conforme o tamanho mdio do tempo de interao aumentar, o custo de largura de banda da aplicao Ajax torna-se menor do que sua aplicao clssica equivalente.

2.3. A interaco do utilizador com a aplicao contnua e flexvel

Um navegador web oferece duas maneiras de enviar entradas de dados para um outro computador: com os enlaces e formulrios HTML.

Os hyperlinks podem ser carregados com parmetros CGI (Common Gateway Interface Interface de Comunicao Comum) apontando para pginas dinmicas ou servlets. Eles podem estar vinculados com imagens e folhas de estilo (CSS) para oferecer uma pequena melhoria na interface, como por exemplo, definir efeitos quando o mouse estiver sobre eles.

Os controles de formulrio oferecem um subconjunto bsico de componentes padres de interface com o usurio: caixas de texto, caixas de checagem e botes de rdio, alm de listas de seleo. Entretanto estes controles no so suficientes. No existem controles de seleo em rvores, grades para edio, ou caixas de combinao. Os formulrios, assim como os hyperlinks, apontam para URLsresidentes no servidor.

Alternativamente, os hyperlinks e os controles de formulrio podem apontar para funes JavaScript. Isto uma tcnica comum em pginas web para prover uma validao de formulrio rudimentar em JavaScript, verificando por campos vazios, valores fora de intervalo, e assim por diante, antes de submeter os dados para o servidor. Estas funes JavaScript existem somente enquanto a prpria pgina existe e substituda quando a pgina efetuar o seu envio.

Enquanto a pgina est sendo enviada, o usurio aguarda a sua resposta. A pgina anterior pode ainda estar visvel por algum tempo, e o navegador pode at permitir que o usurio clique em qualquer um dos links visveis, mas se assim for feito, produzir resultados imprevisveis e at entornar em uma confuso com a sesso no servidor. O usurio est normalmente aguardando a pgina ser atualizada que, frequentemente, possuem quase que as mesmas informaes que lhes foram apanhadas instantes atrs. Adicionando um par de calas cesta de compras no razovel modificar as categorias em um nvel acima por roupas masculinas, roupas femininas, infantis e acessrios.

Voltemos ao exemplo do carrinho de compras novamente. Devido ao facto de que nosso carrinho de compras em Ajax pode enviar dados assncronamente, os utilizadores podem soltar os objectos dentro dele to rpido quanto eles podem clicar. Se o cdigo de nosso carrinho no lado cliente for robusto, ele tratar esta tarefa facilmente, e os usurios podem continuar com o que eles esto fazendo.

claro que no existe nenhum carrinho para colocarmos as coisas, somente um objeto em sesso no servidor. Mas os usurios no querem saber sobre objetos de sesso enquanto esto fazendo compras, e a metfora do carrinho prov uma descrio do mundo real mais confortvel do que est acontecendo. Troca de contextos entre a metfora e o acesso direto ao computador uma distrao para usurios. Aguardar uma pgina ser atualizada levar o usurio realidade de estar sentado em um computador por um curto tempo, e nossa implementao em Ajax evita que isto ocorra. Fazer compras uma atividade transitria, mas se considerarmos

um domnio de negcios diferente, por exemplo, um cenrio de assistncia e atendimento intensivo ou uma tarefa de planejamento complexa, ento o custode interrupo da seqncia de trabalho em alguns poucos segundos, com uma atualizao de pgina, algo invivel.

A segunda vantagem de Ajax que podemos associar eventos a um maior nmero de aes do usurio. Os conceitos mais sofisticados de interface com o usurio, assim como "arrastar e soltar", se tornam praticveis, trazendo as experincias dessas interfaces em p de igualdade com os controles de aplicaes desktop. Da perspectiva de usabilidade, esta liberdade importante

no somente porque ela permite exercer nossa imaginao, mas porque nos permite combinar a interao do usurio e as solicitaes ao servidor de maneira mais completa.

Para comunicar com o servidor em uma aplicao web clssica, necessitamos clicar em um hyperlink ou submeter um formulrio, e ento aguardar. No entanto, este mtodo interrompe a interao com o usurio. Em contraste, a possibilidade de se comunicar com o servidor em resposta a um movimento ou arraste do mouse, ou at quando digitamos, habilita o servidor a trabalhar juntamente com o usurio. O Google Suggest um exemplo muito simples e efetivo disto: responder s teclas pressionadas enquanto ele digita dentro da caixa de pesquisa, e ento, comunicar com o servidor para recuperar e exibir uma lista de possveis finalizaes para as expresses, baseada nas pesquisas feitas por outros usurios do mecanismo de busca em todo o mundo.

2.4. A codificao real requer disciplina

Neste momento, as clssicas aplicaes web fazem uso de JavaScript em certas ocasies, para adicionar caractersticas avanadas de um programa, agregando-as nas pginas. O modelo baseado em pginas impede qualquer uma destas melhorias que provoque em um atraso longo demais, limitando sua utilidade. Isto fez com que JavaScript recebesse injustamente, uma reputao de algo banal por msorte da linguagem e no sendo bem vista pelos desenvolvedores srios.

Codificar uma aplicao Ajax algo completamente diferente. O cdigo que voc fornece quando os usurios iniciam a aplicao deve executar at que eles encerrem-na, sem interrupo, sem diminuio develocidade, e sem produo de escapes de memria. Se estivermos mirando no mercado de aplicaes poderosas, ento temos em vista muitas horas de intenso uso. Para atingirmos este objetivo, devemos escrever cdigos de alto desempenho, e manutenveis, usando a mesma disciplina e entendimento que aplicado com sucesso s camadas do servidor.

A base de cdigo ser tipicamente mais ampla que qualquer cdigo escrito para uma aplicao web clssica. Boas prticas na construo da base de cdigo se tornam muito importantes. O cdigo deve tornar-se, de preferncia, responsabilidade de uma equipe do que apenas um indivduo, criando edies de manutenibilidade, separaes de interesses, e estilos e padres de codificao comum. Uma aplicao Ajax, portanto, uma poro de cdigo funcionalmente complexa que comunica eficientemente com o servidor enquanto o usurio continua com seu trabalho. Ela claramente uma descendncia da aplicao clssica baseada em pginas.

A base de cdigo ser tipicamente mais ampla que qualquer cdigo escrito para uma aplicao web clssica. Boas prticas na construo da base de cdigo se tornam muito importantes. O cdigo deve tornar-se, de preferncia, responsabilidade de uma equipe do que apenas um indivduo, criando edies de manutenibilidade, separaes de interesses, e estilos e padres de codificao comum. Uma aplicao Ajax, portanto, uma poro de cdigo funcionalmente complexa que comunica eficientemente com o servidor enquanto o usurio continua com seu trabalho. Ela claramente uma descendncia da aplicao clssica baseada em pginas.

III. Programar em Ajax

Programar em ajax no exige nada relativamente novo em termos de linguagem de programacao, mas h alguns termos que so necessrios compreender.

3.1. AJAX http requests: uso de pedidos http por Ajax

No coding tradicional do Javascript, se voc quiser comear alguma informao de uma base de dados ou de um arquivo no usurio, ou emitir a informao do usurio a um usurio, voc ter que fazer um HTML dar forma e COMEAR ou AFIXAR os dados ao usurio. O usurio ter que enviar submete a tecla para emitir/comea a informao, espera para que o usurio responda, ento uma pgina nova carregar com os resultados.

10

Porque o usurio retorna uma pgina nova cada vez o usurio submete a entrada, as aplicaes tradicionais da web application podem funcionar lentamente e tender a ser mais menos userfriendly.

Com o AJAX, seu Javascript comunica-se diretamente com o usurio, atravs do objeto de XMLHttpRequestdo Javascript

Com um pedido do HTTP, uma pgina web pode fazer um pedido, e comea uma resposta de um web server - sem recarregar a pgina. O usurio permanecer na mesma pgina, e ou no observaro que os scripts pedem pginas, ou emitem dados a um usurio no fundo.

3.2. Objecto XMLHttpResquest

Usando o objeto de XMLHttpRequest, um colaborador da web standart pode atualizar uma pgina com dados do usurio depois que a pgina carregou!

AJAX foi feito popular em 2005 pela Google (com Google suggest(Sugerir)). Google Suggest est usando o objeto de XMLHttpRequestcriar uma relao muito dinmica da web interface: Quando voc comea datilografar na caixa da busca do Google, um Javascript emite as letras fora a um usurio e o usurio retorna uma lista das sugestes.

11

Figure 1:Funcionamento do Ajax

Primeiro aplicativo em Ajax

<head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ... } </script> </head>

3.3. Sintaxe XMLHttpRequest

Todos os navegadores modernos (Chrome, IE7, Firefox, Safri, Opera, etc) possuem um objecto de pedido XMLHttp.

A sintaxe para a criap de um XMLHttpRequest object variable=new XMLHttpRequest();

12

Verses antigas de internet Explorer usam um Objecto Active X: variable=new ActiveXObject("Microsoft.XMLHTTP");

Para poder funcionar com todos os navegadores, incluindo internet Explorer 5 e Internet Explorer 6, temos que verificar se o navegador suporta XMLHttpResquest object, se ele no suporta, deve-se criar um objecto active x.

Exemplo: var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

3.4. Sintaxe para Envio de um pedido ao servidor

Para se efectuar um pedido para o servidor, usam-se os mtodos open() e send() do objecto XMLHttpRequest:

xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();

Method open(method,url,async)

Description Specifies the type of request, the URL, and if the request should be handled asynchronously or not.

13

Send(string)

method: the type of request: GET or POST url: the location of the file on the server async: true (asynchronous) or false (synchronous) Sends the request off to the server. string: Only used for POST requests

3.5. Get ou Post

Get mais simples e mais veloz que o POST e pode ser usado na maioria das situaes, contudo deve-se usar pedidos POST quando: -Quando um arquivo em cache no uma opo, quando tem que de fazer update de um ficheiro no servidor ou na base de dados. -Envia-se uma grande quantidade de dados ao servidor, POST no tem limite mximo -Envia-se um input do usurio, POST mais robusto e seguro que o GET

Um simples pedido GET: xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send();

no exemplo acima possvel obter um resultado em cache, Para evitar, pode-se adicionar um ID nico ao URL: xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); xmlhttp.send();

Pedidos POST Um simples pedido post pode ser:

xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();

14

Para adicionar dados POST como um formulrio HTML, adicionar um cabealho HTML com setRequestHeader(), seve-se especificar o dado que se pretende enviar no metodo send():

xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

Mtodo setRequestHeader (header, value)

Descrio Adiciona cabealho http ao pedido. Header: especifica o nome do cabealho Value: especifica o valor do cabealho

3.6. O url-Um arquivo no servidor

O parametrurlpara o metodo oprn() um endereo para um arquivo no servidor:

xmlhttp.open("GET","ajax_test.asp",true);

O arquivo poder ser de qualquer tipo como: .txt, e .xml or ficheiros de scripts no servidor como .asp ou .php (que pode executar aces no servidor antes de enviar respostas).

3.7. Assincrono- verdadero ou falso

Ajax signific javascript e XML assincrono, e para que o objecto XMLHttpRequest comporte-se como Ajax, o parmetro assncrono do mtodo open() deve ser true:

xmlhttp.open("GET","ajax_test.asp",true);

15

O envio de pedidos assncronos m grande melhoramento para desenvolvedores Web. Muitas das tarefas realizadas do lado do servidor levam muito tempo, antes da adop,co do Ajax esta operao poderia causar uma pausa no aplicativo ou o aplicativo poderia deixar de responder.

Com o Ajax, javascript ja no precisa esperar por respostas vindas do servidor, mas pode: -executar outros scripts enquando espera por um outro

Assincrono= true Quando assync= true, especifica-se uma funo para executar quando a resposta estiver pronto no evento onreadystatechange :

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();

Assincrono = false

Quando assync= false deve-se alterar um terceiro parametro no mtodo open() para false:

Usar async= false no recomendado, mas para pequenos pedidos el epode ser usado. Lembre-se que Javascript no continuar a executar at que a resposta do servidor esteja pronta, se o servidor estiver ocupado, o aplicativo ir parar:

16

xmlhttp.open("GET","ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

3.8. Resposta do servidor

Para receber uma resposta do servidor, usa-se o responseText ou a propriedade responseXML do XMLHttp object Propriedade responseText respondeXML Descrio Recebe a resposta como um string Recebe dados de resposta em XML

3.8.1. A propriedade do responseText

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

3.8.2.Propriedade do responseXML

xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;

17

3.9. O evento onreadysttechange

Quando um pedido enviado ao servidor, h a necessidade de estabelecer aces baseadas na resposta. O evento onreadystatechange disparado sempre que o evento sofre mudanas. A propriedade readyState cont o estado do XMLHttpRequest

As trs propriedades importantes do XMLRequest object so:

Propriedade onreadystatechance

Descrio Guarda uma funo ou o nome da funo a ser chamada automaticamente sempre que a propriedade do evento mudar

readystate

Contm o estado do XMLHttpRequest, as mudanas variam de 0 a 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready

status

200: "OK" 404: Page not found

No evento onreadystatechange especifica-se o que acontecer quando a resposta do servidor estar pronta para ser processada, quando o readyState 4 e status 200, a resposta pronta

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

18

} }

3.10. Funo de callback

Uma funo callback uma funo passada como parametro para uma outra funo. Se existir mais de uma tarefa ajax num website, deve-se criar uma funo standard XMLHttpRequest object, e chama-la para cada tarefa ajax. para criar os

A chamada da funo deve conter o URL e o que deve-se fazer no onreadystatechange (que provavelmente diferente para cada chamada) A callback function is a function passed as a parameter to another function. If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task. The function call should contain the URL and what to do on onreadystatechange (which is probably different for each call):

Exemplo de aplicativo AJax

<html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }
19

else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button>

</body> </html>

20

Concluso
Codificar uma aplicao Ajax algo completamente diferente. O cdigo que voc fornece quando os usurios iniciam a aplicao deve executar at que eles encerrem-na, sem interrupo, sem diminuio de velocidade, e sem produo de escapes de memria, A base de cdigo ser tipicamente mais ampla que qualquer cdigo escrito para uma aplicao web clssica. Boas prticas na construo da base de cdigo se tornam muito importantes. O cdigo deve tornar-se, de preferncia, responsabilidade de uma equipe do que apenas um indivduo. Uma aplicao Ajax, portanto, uma poro de cdigo funcionalmente complexa que comunica eficientemente com o servidor enquanto o usurio continua com seu trabalho. Ela claramente uma descendncia da aplicao clssica baseada em pginas.

21

Bibliografia
http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o) http://www.w3schools.com/ajax/default.asp http://www.ibm.com/developerworks/web/library/wa-ajaxintro2/?ca=dgr-lnxw07AJAX-Request

22

ndice
Introduo..................................................................................................................................................... 1 I. Conhecindo o AJAX .................................................................................................................................... 2 1.1. Significado do Ajax ......................................................................................................................... 2 1.2.Comprendedo o Ajax ...................................................................................................................... 2 1.2.1. Aplicaes menores na internet e o Ajax.................................................................................... 3 1.3. Caractersticas ................................................................................................................................ 3 1.4. A necessidade do uso do Ajax ........................................................................................................ 4 II. Princpios sobre o qual o Ajax se assenta ................................................................................................. 5 2.1.O navegador hospeda uma aplicao e no o contedo................................................................ 5 2.2. Servidor fornece dados e no contedo ........................................................................................ 6 2.3. A interaco do utilizador com a aplicao contnua e flexvel .................................................. 7 2.4. A codificao real requer disciplina ............................................................................................... 9 III. Programar em Ajax ................................................................................................................................ 10 3.1. AJAX http requests: uso de pedidos http por Ajax ...................................................................... 10 3.2. Objecto XMLHttpResquest ........................................................................................................... 11 3.3. Sintaxe XMLHttpRequest ............................................................................................................. 12 3.4. Sintaxe para Envio de um pedido ao servidor ............................................................................. 13 3.5. Get ou Post................................................................................................................................... 14 3.6. O url-Um arquivo no servidor ...................................................................................................... 15 3.7. Assincrono- verdadero ou falso ................................................................................................... 15 3.8. Resposta do servidor.................................................................................................................... 17 3.8.1. A propriedade do responseText ............................................................................................... 17 3.8.2.Propriedade do responseXML ................................................................................................... 17 3.9. O evento onreadysttechange....................................................................................................... 18 3.10. Funo de callback ..................................................................................................................... 19 Concluso .................................................................................................................................................... 21 Bibliografia .................................................................................................................................................. 22

Universidade Zambeze

Programao III

Ajax
Docente: Eng. Amlcar

Estudantes: Jlia Alves Jordo Manguena Nelson Rufino Domingos Campurito

Faculdade de Cincias e Tecnologia Beira 2011