Universidade Federal de Uberlândia

Faculdade de Computação

Programação para Internet

Módulo 10
Web Dinâmica – Introdução ao AJAX

Prof. Dr. Daniel A. Furtado

 AJAX – Introdução
 AJAX = Asynchronous JavaScript and XML;
 Não é uma linguagem de programação;
 É uma técnica utilizada para criar websites rápidos e dinâmicos;
 Possibilita trocar dados com o servidor e atualizar partes de uma página
web sem precisar recarregar a página inteira;
 Com AJAX, a comunicação com o servidor pode ser realizada de forma
assíncrona (em segundo plano), sem interromper as funcionalidades da
página corrente;
 AJAX utiliza uma combinação de tecnologias:
• Objeto XMLHttpRequest, do browser (para requisitar dados/serviço ao servidor)
• JavaScript e HTML DOM (para mostrar ou utilizar os dados)
• CSS, XML, JSON (formato para transferência de dados)
Ref: adaptado de w3schools.com
Programação para Internet Prof. Dr. Daniel A. Furtado 2
 AJAX – Exemplos de Aplicações
 A tecnologia é amplamente utilizada (até mesmo por empresas e serviços
de renome como Google Maps, Gmail, YouTube e Facebook);
 Por exemplo, pode-se utilizar AJAX para realizar o preenchimento
automático dos campos de endereço em um formulário Web assim que o
usuário informar o CEP;
 Outros exemplos:

Sugestões de buscas no Google

Ao buscar um modelo de carro na tabela FIPE,

os modelos são carregados, em segundo plano,
após seleção do fabricante.
Ref: adaptado de w3schools.com
Programação para Internet Prof. Dr. Daniel A. Furtado 3
 Como AJAX Funciona
1. Ocorre um evento na página web (página carregada, botão
pressionado, opção selecionada, etc.);
2. Cria-se um objeto XMLHttpRequest utilizando JavaScript;
3. Utiliza-se o objeto para enviar uma requisição HTTP ao servidor;
4. O servidor Web processa a requisição (enquanto isso, a página
Web no cliente fica livre para executar outras operações*);
5. O servidor envia uma resposta de volta para a página Web;
6. A resposta é lida pela página utilizando JavaScript e uma ação
apropriada é então executada (como atualização da página,
apresentação de informação detalhada, etc.)

*No caso da requisição ser assíncrona Ref: adaptado de w3schools.com

Programação para Internet Prof. Dr. Daniel A. Furtado 4
 Como AJAX Funciona

Ref: adaptado de w3schools.com

Programação para Internet Prof. Dr. Daniel A. Furtado 5
 Requisição Síncrona x Assíncrona
Na prática, a maior parte das requisições AJAX é realizada de maneira
assíncrona. Porém, também é possível realizá-la de forma síncrona.

Requisição Síncrona
• A função JavaScript que inicia a requisição ficará “bloqueada”, aguardando
pela resposta do servidor;
• Não é possível executar nenhum outro código JavaScript enquanto a
requisição estiver sendo processada no servidor.
Requisição Assíncrona
• A função JavaScript prossegue com sua execução enquanto a requisição é
tratada em segundo plano. Isto significa que é possível executar outras
operações com JavaScript enquanto o servidor processa a requisição;
• O andamento da requisição pode ser acompanhado no JavaScript por meio
de eventos, sendo possível executar uma ação assim que a requisição
terminar.

Programação para Internet Prof. Dr. Daniel A. Furtado 6

 Exemplo de Requisição Assíncrona - Método GET
<script>

// cria uma instância do XMLHttpRequest para iniciar a requisição AJAX

var xmlhttp = new XMLHttpRequest();
// configura o método da requisição, a URL do recurso ou serviço e ‘true’ para requisição assíncrona
xmlhttp.open("GET", "ARQUIVO_OU_URL_DO_SERVICO", true);
// indica a função que será executada quando a requisição encerrar
xmlhttp.onload = function ()
{
if (xmlhttp.status == 200)
{
// Coloque aqui as operações necessárias para tratar o resultado
// da requisição quando finalizada com sucesso
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
else
{
// Pode ter ocorrido uma falha no processamento da requisição e o servidor
// retornou um código de status diferente de '200 Ok'.
// Coloque o tratamento de erro aqui.
alert("Ocorreu um erro ao processar a requisição: " + xmlhttp.status + xmlhttp.responseText);
}
};
// indica a função a ser executada caso ocorra uma falha na comunicação com o servidor
xmlhttp.onerror = function ()
{
alert("Ocorreu um erro ao processar a requisição");
};
// envia a requisição
xmlhttp.send();

</script>

Programação para Internet Prof. Dr. Daniel A. Furtado 7

 Exercício 1
 Testar e estudar os arquivos anexos do Exemplo1:
 Envie os arquivos para o servidor do Awardspace;
 Acesse o arquivo testeAjax.html digitando a URL
adequadamente no navegador;
 Analise o código fonte dos arquivos testeAjax.html e
conteudoAdicional.txt;
 Observe que o conteúdo do arquivo .txt é carregado
dinamicamente na página testeAjax.html utilizando uma
requisição assíncrona com AJAX;
 No arquivo testeAjax.html, observe que o resultado da
requisição é acessado por meio de xmlhttp.responseText;

Programação para Internet Prof. Dr. Daniel A. Furtado 8

 Exercício 2
 Testar e estudar os arquivos anexos do Exemplo2A:
 Envie os arquivos para o servidor do Awardspace;
 Acesse o arquivo busca.html digitando a URL adequadamente no
navegador. Informe uma letra no campo de busca da página e
observe a resposta;
 Analise o código fonte dos arquivos busca.html e
buscaSugestao.php;
 Observe que o script buscaSugestao.php recebe um parâmetro de
busca pela URL e procura por nomes no vetor de nomes que
começam com a letra informada. Observe que o script produz
uma string de nomes como resultado, a qual é recebida e
apresentada na página busca.html utilizando JavaScript.

Programação para Internet Prof. Dr. Daniel A. Furtado 9

 xmlhttp.onload - Observações
 No exemplos apresentados anteriormente, existe a possibilidade da
condição (xmlhttp.status == 200) ser verdadeira mesmo quando o
script PHP termina com erros;
 Isto acontece porque o Apache/PHP retorna automaticamente o
código de status padrão 200, independentemente do script PHP
encerrar com sucesso ou falha. Portanto, o desenvolvedor precisa
tomar medidas para tratar esta situação, evitando que o usuário final
visualize mensagens detalhadas de erros do servidor.

Programação para Internet Prof. Dr. Daniel A. Furtado 10

 Exercício 3
 Simular um erro PHP no exemplo Exemplo2A:
 Abra o arquivo buscaSugestao.php e remova, na linha 6, o
colchete “]” de fechamento do vetor de nomes;
 Salve o arquivo e reenvie para o Awardspace;
 Acesse novamente o arquivo busca.html pelo navegador, digite
uma letra no campo de busca e observe o resultado.

Programação para Internet Prof. Dr. Daniel A. Furtado 11

 xmlhttp.onload - Observações
O Exemplo 2B é uma alteração do Exemplo 2A com o objetivo de tratar melhor a
resposta do servidor. Foram feitas duas alterações:
1. O script buscaSugestoes.php produz uma resposta válida iniciando com a
string “OK”;
2. O arquivo busca.html adiciona uma condição para verificar se a resposta
produzida pelo servidor começa com os caracteres “OK”;
<script>

// indica a função que será executada quando a requisição encerrar

xmlhttp.onload = function ()
{
// ------------------- NOVIDADE DESDE EXEMPLO ------------------------------
// A segunda condição deste if foi inserida como uma forma de verificar
// se o script no servidor realmente foi finalizado com sucesso e produziu
// uma resposta válida. Caso ocorram erros ou warnings no código PHP, tais
// mensagens serão enviadas (e provavelmente não começarão com "OK")
// -------------------------------------------------------------------------
if (xmlhttp.status == 200 && xmlhttp.responseText.substring(0, 2) == "OK")
{
// Coloque aqui as operações necessárias para tratar o resultado
// da requisição quando finalizada com sucesso
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
else
{
// Ocorreu alguma falha no processamento da requisição e o servidor
// retornou um código de status diferente de '200 Ok'.
// Coloque o tratamento de erro aqui.
alert("Ocorreu um erro ao processar a requisição: " +
xmlhttp.status + xmlhttp.responseText);
}
};

Programação para Internet Prof. Dr. Daniel A. Furtado 12

 Exercício 4
 Simular um erro PHP no exemplo Exemplo2B:
 Abra o arquivo buscaSugestao.php e remova, na linha 6, o
colchete “]” de fechamento do vetor de nomes;
 Salve o arquivo e reenvie para o Awardspace;
 Acesse novamente o arquivo busca.html pelo navegador, digite
uma letra no campo de busca e observe o resultado comparando
com aquele do exercício anterior.

Programação para Internet Prof. Dr. Daniel A. Furtado 13

 AJAX – Outra Maneira
Nos exemplos anteriores utilizamos a propriedade onload do objeto
XMLHttpRequest para indicar uma função de callback a ser executada quando a
requisição finalizar. Uma outra possibilidade é monitorar o valor da propriedade
readyState desse objeto. A propriedade muda de valor à medida em que a
requisição é criada e tratada. Quando a requisição é finalizada e a resposta está
pronta, readyState muda para o valor 4. Isto é ilustrado a seguir:
...
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
// Seria equivalente testar (xmlhttp.readyState === xmlhttp.DONE && xmlhttp.status == 200)
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
// processar a resposta do servidor
}
}

xmlhttp.open(...);
xmlhttp.send();
...

Programação para Internet Prof. Dr. Daniel A. Furtado 14

 Resumo das Propriedades do Objeto XMLHttpRequest
Propriedade Descrição
onreadystatechange Utilizado para indicar a função a ser chamada quando a
propriedade readyState muda de valor
readyState Mantém o estado da requisição:
0: requisição não iniciada
1: conexão aberta (o método open() foi chamado)
2: requisição enviada (acontece depois que send() é chamado)
3: requisição em processamento
4: requisição finalizada e resposta pronta
responseText Permite acessar os dados retornados na forma textual
responseXML Permite acessar os dados retornados no formato XML
status Retorna o status-number da requisição:
200: "OK"
403: "Forbidden"
404: "Not Found"
Para a lista completa acesse Http Messages Reference
statusText Retorna o status-text (isto é, "OK" ou "Not Found")
Programação para Internet Prof. Dr. Daniel A. Furtado – Adaptado de W3Schools.com 15
 Resumo dos Métodos do Objeto XMLHttpRequest
Método Descrição

new XMLHttpRequest() Cria um novo objeto XMLHttpRequest

open(method,url,async) Configura a requisição, onde:

method: método de requisição HTTP: GET, POST,

PUT, DELETE, etc.
url: local do arquivo no servidor
async: true (assíncrono) ou O arquivo pode ser de
false (síncrono) qualquer tipo, como
.txt, .xml ou um arquivo
de script, como .php ou
send() Envia a requisição para o servidor .asp, o qual pode
(comumente usado em requisições GET) executar ações no
send(string) Envia a requisição para o servidor servidor antes de
enviar uma resposta de
(comumente usado em requisições POST)
volta.
setRequestHeader() Adiciona um par rótulo/valor ao
cabeçalho da requisição para ser enviado
Programação para Internet Prof. Dr. Daniel A. Furtado – Adaptado de W3Schools.com 16
 Enviando dados com AJAX: GET x POST
Nos exemplos anteriores utilizamos o método GET para efetuar a requisição e
passar parâmetros para o script no servidor. Neste caso, os valores podem ser
passados no momento da chamada do método open, como ilustrado a seguir:
xhttp.open("GET", "teste.php?primeiroNome=Henry&ultimoNome=Ford", true);
xhttp.send();

Entretanto, esses dados também poderiam ser enviados pelo método POST. Isto
é apresentado no exemplo a seguir.
xhttp.open("POST", "teste.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("primeiroNome=Henry&ultimoNome=Ford");

Ref: adaptado de w3schools.com

Programação para Internet Prof. Dr. Daniel A. Furtado 17
 Exercício 5
1. Crie uma tabela de nome Aluno contendo um campo textual nome. Insira
alguns registros na tabela;
2. Crie um formulário HTML contendo um campo de texto para que o usuário
possa realizar uma pesquisa instantânea informando um nome de aluno. Não
crie um botão;
3. Crie um script PHP de nome getAluno.php que receba uma requisição AJAX
contendo o parâmetro inicioNome passado pela URL (GET). O script deve
realizar uma consulta na tabela Aluno do BD e retornar (como texto) o primeiro
nome de aluno que comece com o valor do parâmetro fornecido. Utilize na
consulta SQL uma string similar a:
SELECT nome FROM Aluno WHERE nome like ´$inicioNome%´
Neste exercício, todo o código de acesso ao banco de dados deve ser embutido
dentro do arquivo getAluno.php. Não crie classes nem funções adicionais.
4. O arquivo HTML deve apresentar a resposta gerada pelo script getAluno.php.

Programação para Internet Prof. Dr. Daniel A. Furtado 18

 JSON

JavaScript Object Notation

Programação para Internet Prof. Dr. Daniel A. Furtado 19

 Relembrando: Objetos Simples em JavaScript
 Objetos simples em JavaScript (PlainObject) podem ser utilizados para
armazenar uma coleção de propriedades de entidades do mundo real;
 Tais objetos podem ser definidos por meio de uma lista de pares do
tipo nomeDaPropriedade : valor, separados por vírgula e colocados
entre chaves. O nome da propriedade pode aparecer com ou sem
aspas;
 Exemplo:
var pessoa = {
pNome:"John",
uNome:"Doe",
idade:50,
eyeColor:"blue"
};

alert(pessoa.pNome); // acessa a propriedade pNome do objeto pessoa

alert(pessoa.idade); // acessa a propriedade idade do objeto pessoa

Ref: adaptado de w3schools.com

Programação para Internet Prof. Dr. Daniel A. Furtado 20
 JSON – Introdução
 JSON é um acrônimo para JavaScript Object Notation;
 É um formato para intercâmbio de dados, baseado em texto, cuja
notação é derivada da notação de objetos em JavaScript;
 Por ser textual, é independente de linguagem;
 JSON para intercâmbio de dados entre cliente e servidor:
• Como JSON é baseado em texto, pode-se converter um objeto JavaScript
para uma string JSON e então enviá-la ao servidor. No servidor, pode-se
converter a string JSON em um objeto da linguagem server-side, como PHP;
• Também é possível receber do servidor uma string de dados no formato
JSON e então convertê-la para um objeto JavaScript. Dessa forma, os dados
retornados pelo servidor podem ser convertidos diretamente em objetos
JavaScript, sem a necessidade de executar procedimentos complexos para
processamento do texto e extração dos dados.

Ref: adaptado de w3schools.com

Programação para Internet Prof. Dr. Daniel A. Furtado 21
 JSON - Sintaxe
 A sintaxe do formato JSON é derivada da notação de objetos em JavaScript:
• Os dados são organizados em pares (nome : valor), separados por vírgula;
• Objetos são colocados entre chaves;
• Vetores são colocados entre colchetes.
 Em JSON, os nomes das propriedades (keys) devem ser strings colocadas
sempre entre aspas duplas*;
{ "nome":"Elon", "sobrenome":"Musk", "idade": 45 }

 O valor de uma propriedade pode ser outro objeto:

{
"nome":"Elon",
"sobrenome":"Musk",
"empresas": ["Tesla", "SpaceX", "SolarCity"],
"detalhes": {"idade" : 45, "país": "EUA" }
}

*Em JavaScript os nomes das propriedades podem aparecer com ou sem aspas.
Programação para Internet Prof. Dr. Daniel A. Furtado 22
 Recebendo dados JSON do servidor
 Objetos em PHP podem ser convertidos para o formato JSON por
meio da função json_encode
 Uma string JSON é convertida para um objeto JavaScript por
meio do método JSON.parse

Código no servidor (PHP) Código no cliente (JavaScript)

<?php var xmlhttp = new XMLHttpRequest();
$myObj->name = "John";
$myObj->age = 30; xmlhttp.onload = function() {
$myObj->city = "New York"; var myObj = JSON.parse(this.responseText);
var div = document.getElementById("demo");
$myJSON = json_encode($myObj); div.innerHtml = myObj.name;
};
echo $myJSON;
xmlhttp.open("GET", "demo_file.php", true);
?> xmlhttp.send();

OBS: Arrays em PHP também podem ser convertidos para JSON. Veja exemplo em
https://www.w3schools.com/js/js_json_php.asp
Programação para Internet Prof. Dr. Daniel A. Furtado – Adaptado de W3Schools.com 23
 Exercício 6
 Testar e estudar os arquivos anexos do Exemplo3:
 Abra o arquivo conexaoMysql.php e informe adequadamente os dados
para conexão com o MySQL (Awardspace);
 Crie uma tabela no banco de dados com o nome Endereco contendo os
campos CEP, Rua, Bairro e Cidade (código SQL disponível nos anexos);
 Insira alguns registros na tabela utilizando a linguagem SQL (não utilize
caracteres especiais como cedilhas e acentos*);
 Envie os arquivos do exemplo para o servidor e acesse o arquivo
endereco.html digitando a URL adequadamente no navegador. Informe
no campo CEP um dos CEPs que você inseriu na tabela Endereco;
 Analise o código fonte dos arquivos endereco.html e buscaEndereco.php;
*A função json_encode, no script PHP, exige que toda string no objeto esteja codificada em UTF-8. Erros são comuns
quando o MySQL utiliza outros padrões de codificação para caracteres. Neste caso, é necessário fazer a configuração
no MySQL para que seja utilizado UTF-8.
Programação para Internet Prof. Dr. Daniel A. Furtado 24
 AJAX com JQuery

Programação para Internet Prof. Dr. Daniel A. Furtado 25

 Utilizando AJAX por meio da biblioteca jQuery
Uma outra maneira de efetuar uma requisição AJAX é utilizando o método $.ajax
da biblioteca jQuery:
$.ajax({

url: /* endereco do arquivo no servidor, entre aspas */,

type: /* método de envio: GET, POST, PUT ou DELETE, entre aspas */,
async: /* true para assíncrona ou false para síncrona */,
dataType: /* o tipo dos dados esperados como resposta do servidor
pode ser xml, json, script ou html */,

data: /* dados a serem enviados: objeto JavaScript, string ou array */ ,

success: function(result) {

// Tratar aqui a resposta do servidor

// quando a requisição é finalizada com ´sucesso´.
// Processar os dados recebidos.
// É RECOMENDADO CONFIRMAR O SUCESSO, pois em alguns casos
// o script no servidor pode encerrar notificando sucesso mesmo
// na presença de erros, como em casos de erros de sintaxe de código no PHP, por exemplo.
// (veja mais detalhes no arquivo Exemplo4/endereco.html).
// Esta função não é executada em caso de erros de parse/JSON. Neste caso será executado o código
// de erro associado à função a seguir

},

error: function(xhr, status, error) {

// tratar aqui quando ocorrer um erro

alert(status + error + xhr.responseText);

});

Programação para Internet Prof. Dr. Daniel A. Furtado 26

 AJAX com jQuery
 Testar e analisar cuidadosamente os exemplos anexos:
• Exemplo4
• Preenchimento automático do endereço a partir do CEP
utilizando AJAX com jQuery;
• Exemplo5 (envio de formulário usando AJAX)
• Neste exemplo, testar o cadastro preenchendo todos os
campos. Testar também o cadastro deixando o campo ‘nome’
em branco;
• Analisar o código fonte dos arquivos novoAluno.html e
adicionaNovoAluno.php

Programação para Internet Prof. Dr. Daniel A. Furtado 27

 Método $.load
 $(selector).load(URL,data,callback);
 $("#div1").load("demo_test.txt");

Programação para Internet Prof. Dr. Daniel A. Furtado 28

 Referências
 www.w3schools.com/ajax
 api.jquery.com/jquery.ajax/

Programação para Internet Prof. Dr. Daniel A. Furtado 29