Tutorial de Ajax, Notas de estudo de Sistemas de Informação

Baixe Tutorial de Ajax e outras Notas de estudo em PDF para Sistemas de Informação, somente na Docsity!

AJAX está para Asynchronous JavaScript and XML.

AJAX é um tipo de programação feito popular em 2005 por

Google (com Google sugerir).

AJAX não é uma língua de programação nova, mas uma

maneira nova usar padrões existentes.

Com o AJAX você pode criar melhor, rapidamente, e

aplicações mais user-friendly da web applications.

AJAX é baseado em pedidos do Javascript e do HTTP.

Introdução de AJAX

AJAX está para Asynchronous JavaScript and XML.

O que você deve já saber

Antes que você continue você deve ter uma compreensão básica do seguinte:

 HTML / XHTML

 JavaScript

AJAX = Asynchronous JavaScript and XML

AJAX não é uma língua de programação nova, mas uma técnica para criar melhor e

mais rapidamente, e uma aplicação mais interativa da web applications.

Com o AJAX, seu Javascript pode comunicar-se diretamente com o usuário, usando o

objeto de XMLHttpRequest do Javascript. Com este objeto, seu Javascript pode

negociar dados com um web server, sem recarregar a página.

AJAX usa transferência de dados assíncrona (pedidos do HTTP) entre o browser e o

web server, permitindo que os Web pages peçam bocados de informação pequenos do

usuário em vez das páginas inteiras.

A técnica de AJAX faz aplicações da Internet menores, mais rapidamente e mais user-

friendly.

AJAX é um independente da tecnologia do browser do software da web server.

AJAX é baseado em padrões Web Standards

AJAX é baseado nos seguintes padrões da web Standards:

 JavaScript

O objeto de XMLHttpRequest

Usando o objeto de XMLHttpRequest, um colaborador da web standart pode

atualizar uma página com dados do usuário depois que a página carregou!

AJAX foi feito popular em 2005 pela Google (com Google suggest(Sugerir)).

Google Suggest está usando o objeto de XMLHttpRequest criar uma relação muito

dinâmica da web interface: Quando você começa datilografar na caixa da busca do

Google, um Javascript emite as letras fora a um usuário e o usuário retorna uma lista das

sugestões.

O objeto de XMLHttpRequest é suportado no Internet Explorer 5.0+, no Safari 1.2, no

Mozilla 1.0/Firefox, ópera 8+, e no Netscape 7.

Exemplo de AJAX

Sua primeira aplicação em AJAX

Para compreender como AJAX trabalha, nós criaremos uma aplicação pequena de

AJAX.

Primeiramente, nós estamos indo criar um formulário padrão do HTML com os dois

campos do texto: username e time. O campo do username será preenchido pelo usuário

e o campo do time será preenchido dentro usando AJAX.

O arquivo do HTML será nomeado “testAjax.htm”, e olha como esta (observação que o

formulário do HTML abaixo tem nenhum submeter à tecla!):

Name: Time:

Os capítulos seguintes explicarão as chaves de AJAX.

Support do Browser de AJAX

AJAX - Support do Browser

A chave de AJAX é o objeto de XMLHttpRequest.

Os browsers diferentes usam métodos diferentes para criar o objeto de

XMLHttpRequest.

O Internet Explorer usa um ActiveXObject , quando outros browsers usarem o objeto

interno do Javascript chamado XMLHttpRequest.

Para criar este objeto, e para tratar dos browsers diferentes, nós estamos indo usar uma

"try ... catch" a indicação. Você pode ler mais sobre a tentativa e try ... catch statement

em nosso tutorial do Javascript.

Vamos atualizar nosso arquivo de “testAjax.htm” com o Javascript que cría o objeto de

XMLHttpRequest :

Name: Time:

Exemplo explicado:

Criar primeiramente um xmlHttp variável para prender o objeto de XMLHttpRequest.

Tentar então criar o objeto com xmlHttp=new XMLHttpRequest(). Isto é para os

browsers de Firefox, de ópera, e de Safari. Se isso falhar, tentativa xmlHttp=new

ActiveXObject("Msxml2.XMLHTTP") o qual é para o Internet Explorer 6.0+, se

4 O pedido está completo

Nós estamos indo adicionar se a indicação à função do onreadystatechange ao teste se

nossa resposta estiver completa (isto significar que nós podemos começar nossos

dados):

xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Começar os dados da resposta do usuário } }

A propriedade do responseText

Os dados emitidos para trás do usuário podem ser recuperados com a propriedade do

responseText.

Em nosso código, nós ajustaremos o valor de nosso campo da entrada do “time(tempo)”

igual ao responseText :

xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } }

O capítulo seguinte mostra como pedir o usuário para alguns dados!

AJAX - Pedir um usuário

AJAX - Emitindo um pedido ao usuário

Para emitir fora de um pedido ao usuário, nós usamos o método open() e o método

send().

O método open() faz um exame de três argumentos. O primeiro argumento define que

método para se usar quando emitindo o pedido ( GET ou POST ). O segundo argumento

especifica o URL do server-side script. O terceiro argumento especifica que o pedido

deve ser segurado asynchronously. O método da send() emite o pedido fora ao usuário.

Se nós supuséssemos que a lima do HTML e do ASP está no mesmo diretório, o código

seria:

xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);

Agora nós devemos decidir-se quando a função de AJAX deve ser executada. Nós

deixaremos a função funcionar “atrás das cenas” quando o usuário datilografa algo no

campo do texto do username:

Name: Time:

Nossa lima AJAX-ready updated de “testAjax.htm” olha agora como está:

Name: Time:

O capítulo seguinte faz nossa aplicação de AJAX completa com o script de “time.asp”.

AJAX – O Script Server-Side

palavras: Cada vez que o usuário move seu dedo longe de uma chave de teclado dentro

do campo da entrada, o showHint da função está chamado.

Exemplo explicado - a função do showHint()

A função do showHint() é uma função muito simples do Javascript colocada na seção

do da página HTML.

A função contem o seguinte código:

function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="gethint.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); }

A função executa cada vez que um caráter é incorporado ao campo da entrada.

Se houver alguma entrada no campo do texto (str.length > 0) a função executa o

seguinte:

 Define o URL (nome do arquivo) para emitir ao usuário

 Adiciona um parâmetro (q) ao URL com o índice do campo da entrada

 Adiciona um número aleatório para impedir que o usuário use um

arquivo cached

 Cría um objeto de XMLHTTP , e diz o objeto para executar uma função

chamada stateChanged quando uma mudança é provocada

 abre o objeto de XMLHTTP com o URL dado.

 Emite um pedido do HTTP ao usuário

Se o campo da entrada estiver vazio, a função cancela simplesmente o índice

do placeholder do txtHint.

Exemplo explicado - a função de GetXmlHttpObject()

O exemplo acima chama uma função chamada GetXmlHttpObject().

A finalidade da função é resolver o problema de criar objetos diferentes de xmlHttp

para browsers diferentes.

A função é a listada abaixo:

function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }

Exemplo explicado - A função stateChanged()

A função stateChanged() contem o seguinte código:

function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }

A função stateChanged() executa cada vez que o estado do objeto de XMLHTTP

muda.

Quando o estado mudar a 4 (“completo”), o índice do placeholder do txtHint está

enchido com o texto da resposta.

AJAX sugere o código fonte

Código fonte de AJAX para sugerir o exemplo

O código fonte abaixo pertence ao exemplo de AJAX na página precedente.

Você pode cópia e colá-lo, e tenta-o você mesmo.

O HTML da página de AJAX

Este é o HTML page. Contem um formulário simples do HTML e uma ligação a um

Javascript.

A página do usuário de AJAX - ASP e PHP

Não há nenhuma coisa como um usuário de AJAX. As páginas de AJAX podem ser

servidas por todo o usuário da Internet.

A página do usuário chamada pelo Javascript no exemplo do capítulo precedente é um

arquivo simples do ASP chamada “gethint.asp”.

Abaixo nós listamos dois exemplos do código, de um escrito no ASP e de um da página

do usuário em PHP.

Exemplo de AJAX ASP

O código na página de “gethint.asp” é escrito em VBScript para um usuário de

informação do Internet (IIS). Ele verificações justas uma disposição dos nomes e dos

retornos que corresponder nomeia ao cliente:

response.expires=- dim a(30) 'Fill up array with names a(1)="Anna" a(2)="Brittany" a(3)="Cinderella" a(4)="Diana" a(5)="Eva" a(6)="Fiona" a(7)="Gunda" a(8)="Hege" a(9)="Inga" a(10)="Johanna" a(11)="Kitty" a(12)="Linda" a(13)="Nina" a(14)="Ophelia" a(15)="Petunia" a(16)="Amanda" a(17)="Raquel" a(18)="Cindy" a(19)="Doris" a(20)="Eve" a(21)="Evita" a(22)="Sunniva" a(23)="Tove" a(24)="Unni" a(25)="Violet" a(26)="Liza" a(27)="Elizabeth" a(28)="Ellen" a(29)="Wenche" a(30)="Vicky" 'get the q parameter from URL q=ucase(request.querystring("q")) 'lookup all hints from array if length of q> if len(q)>0 then hint=""

for i=1 to 30 if q=ucase(mid(a(i),1,len(q))) then if hint="" then hint=a(i) else hint=hint & " , " & a(i) end if end if next end if 'Output "no suggestion" if no hint were found 'or output the correct values if hint="" then response.write("no suggestion") else response.write(hint) end if %>

Exemplo de AJAX PHP

O código acima foi reescrito em PHP.

Nota: Para funcionar o exemplo inteiro em PHP, recordar mudar o valor da variável do

URL em “clienthint.js” de “gethint.asp” a “gethint.php”.

Exemplo PHP

php header("Cache-Control: no-cache, must-revalidate"); // Date in the past header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

// Fill up array with names $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni";

Select a Customer:

**O cliente info será listado aqui** .

Como você pode ver é justo um formulário simples do HTML com uma gota

encaixota para baixo “Customer”.

O parágrafo abaixo do formulário contem um “txtHint chamado div”. O div é

usado como um placeholder para o info recuperado do web server.

Quando o usuário seleciona dados, uma função chamada “ showCustomer () ”

está executada. A execução da função é provocada pelo evento do

“ onchange ”. Em outras palavras: Cada vez que a mudança que do usuário o

valor na gota encaixota para baixo, o showCustomer da função é chamado.

O código do Javascript é alistado abaixo.

O AJAX JavaScript

Este é o código do Javascript armazenado no arquivo “selectcustomer.js”:

var xmlHttp

function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="getcustomer.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); }

function stateChanged() {

if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }

function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }

A página do usuário de AJAX

A página do usuário chamada pelo Javascript, é um arquivo simples do ASP chamada

“getcustomer.asp”.

A página é escrita em VBScript para um usuário de informação do Internet (IIS).

Poderia fàcilmente ser reescrita em PHP, ou em alguma outra língua do usuário.

O código funciona um SQL de encontro a uma base de dados e retorna o resultado

como uma tabela do HTML:

response.expires=- sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open(Server.Mappath("/db/northwind.mdb")) set rs = Server.CreateObject("ADODB.recordset") rs.Open sql, conn

response.write("") do until rs.EOF for each x in rs.Fields response.write("" & x.name & "") response.write("" & x.value & "")

User info will be listed here.

Exemplo explicado - o formulário do HTML

Como você pode ver é justo um formulário simples do HTML com uma gota encaixota

para baixo “usuários chamados” com nomes e a “identificação” da base de dados como

valores da opção.

O parágrafo abaixo do formulário contem um “txtHint chamado div”. O div é usado

como um placeholder para o info recuperado do web server.

Quando o usuário seleciona dados, uma função chamada “ showUser() ” está executada.

A execução da função é provocada pelo evento do “ onchange ”.

Em outras palavras: Cada vez que o usuário muda o valor do campo select, o

showUser() da função está chamado.

O JavaScript

Este é o código do Javascript armazenado no arquivo “selectuser.js”:

var xmlHttp function showUser(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="getuser.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer

try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }

O exemplo explicou

stateChanged() e as funções de GetXmlHttpObject () são as mesmas que no AJAX de

PHP sugerir o capítulo.

A função do showUser()

Se um artigo for selecionado a função executar o seguinte:

1. Convida a função de GetXmlHttpObject para criar um do objeto de xmlHttp

2. Define o URL (nome do arquivo) para emitir ao do usuário

3. Adiciona um parâmetro (q) ao URL com o índice da caixa dropdown

4. Adiciona um número aleatório para impedir que o usuário use um arquivo cached

5. A chamada stateChanged quando uma mudança é provocada

6. Abre o objeto de xmlHttp com o URL dado.

7. Emite um pedido do HTTP ao usuário

A página PHP

A página do usuário chamou-se pelo Javascript, é um arquivo simples de PHP

chamada “getuser.php”.

A página é escrita em PHP e usa um banco de dados de MySQL.

O código funciona com uma pergunta ao MySQL de encontro a uma base de

dados e retorna o resultado como uma tabela do HTML:

Firstname