Desenvolvimento WEB II Continuação AJAX Professora: Kelly de Paula Cunha

Desenvolvimento WEB IIContinuação AJAX

Professora: Kelly de Paula Cunha

AJAX

Funções necessárias para estabelecer uma comunicação com o servidor utilizando o AJAX:

- Envio de requisição: - POST: Formulário- GET: Pequenas informações

- Retorno de requisições:- texto simples - XML

AJAX

Tanto para enviar uma requisição ao servidor, quanto para receber o resultado é necessário criar um objeto da classe: • XMLHttpRequest: navegadores Firefox,

Mozila, Opera e Safari

• ActiveXObject: Internet Explorer

AJAX

Verificação de qual é o navegador e criação do objeto adequado para o navegador do usuário:

var req=null;function criaObj(){ if(window.XMLHttpRequest){ req=new XMLHttpRequest(); }else if(window.ActiveXObject){ req=new ActiveXObject("Microsoft.XMLHTTP"); }}

AJAXEnvio de requisição pelo método POST e recepção em forma de texto simples:

function enviar(formulario){ var dados="id=" + formulario.id.value +"&nome=" + formulario.nome.value + "&renda=" + formulario.renda.value

+ "&indicador=" + formulario.indicador.value; criaObj(); req.onreadystatechange=resposta; req.open("POST", "Controle",true); req.setRequestHeader("Content-Type", "\ application/x-www-form-urlencoded"); req.send(dados); return false;}

AJAX

Envio de requisição pelo método POST e recepção em forma de texto simples:

function resposta(){ if(req.readyState==4){ if(req.status==200){ var texto=req.responseText; alert(texto); limparCampos(); } }}

Possíveis respostas para o estado do objeto req:

0 - inicializado: o objeto req foi criado, mas o método open ainda não foi chamado.1 - lendo: o método open foi chamado, mas os dados ainda não foram enviados.2- lido: o pedido foi enviado.3 - interativo: uma parte da resposta foi recebida.4 - completo: todos os dados foram recebidos e a conexão foi fechada.

Possíveis respostas para o STATUS do objeto req:

200- significa que o objeto está ok404- indica erro na recepção dos dados

AJAXEnvio de requisição pelo método POST e recepção em forma de texto simples:

function enviar(formulario){ var dados="id=" + formulario.id.value +"&nome=" + formulario.nome.value + "&renda=" + formulario.renda.value

+ "&indicador=" + formulario.indicador.value; criaObj(); req.onreadystatechange=resposta; req.open("POST", "Controle",true); req.setRequestHeader("Content-Type", "\ application/x-www-form-urlencoded"); req.send(dados); return false;}

O método open é utilizado para definir o (POST ou GET), o nome da servlete o tipo de sincronismo.

O valor true indica envio de dados de forma assíncrona.O valor false, o envio síncrono

Define o tipo de conteúdo do formulário para o servidor.

É utilizada para analisar gramaticalmente os dados postados pelo POST

AJAXEnvio de dados ao servidor por meio do método GET e recepção em forma de XML:

Considere o seguinte documento XML

AJAXO que é o JSTL?

• JavaServer Pages Standard Template Library,

• mecanismo básico de recuperação de dados, – banco de dados, – arquivo de contexto e (ou) XML

AJAXO que é o JSTL?

• JavaServer Pages Standard Template Library,

• mecanismo básico de recuperação de dados, – banco de dados, – arquivo de contexto e (ou) XML

AJAXO que é o XML?

• Extensible Markup Language

• formato para a criação de documentos com dados organizados de forma hierárquica

• propósito principal é a facilidade de compartilhamento de informações através da internet.

• não depende das plataformas de hardware ou de software

AJAXPara fazer a leitura do documento XML, o AJAX utiliza o Documento Object Model (DOM)

O DOM define uma maneira-padrão de acessar e manipular documentos XML apresentando o documento como uma estrutura em forma de árvore, com elementos, atributos e seu conteúdo

AJAXFunção resposta da classe :

AJAXEstrutura do documento XML:

<?xml version=‘1.0’ encoding=‘ISO-8859-1’?><clientes><cliente><id>4</id><nome>Pedro Henrique</nome><renda>1800.00</renda></cliente><cliente><id>5</id><nome>Paulo Silva</nome><renda>1005.00</renda></cliente></clientes>

AJAXComo faço para capturar o nome do primeiro cliente registrado no XML?

var nome= xml.getElementsByTagName("nome")[1].childNodes[0].nodeValue;

AJAXClasse Conexão.java:

- Faz conexão com o Bd007- Inclui - Altera- Exclui - Consulta- Desconecta com o Bd007

AJAXClasse Conexão.java:

ATENÇÃO: Não se esqueça de colocar a senha correta:

con=DriverManager.getConnection("jdbc:mysql://localhost:3306/bd007", "root", "12345");

Obs: linha 26, pag:234.

AJAXClasse servlet Controle.java:

-Gerencia o fluxo de comunicação entre a camada View (telas) e a camada Model (banco de dados)

-> recebe as requisições dos arquivos JSP por meio dos métodos doPOST e doGET

AJAXClasse servlet Controle.java:

Pergunta: Se as requisições que chegam para a classe Controle podem estar partindo de diversos arquivos JSP, como é possível identificar a origem da requisição ou a operação desejada?

Parametro indicador: “pesquisaid”

“consultar”“pesquisatodos”“listagem”“incluir”“alterar”“telaalterar” “excluir”

AJAXArquivo TelaIncluir.jsp

- Exibe um valor de id automaticamente assim que a página é exibida (Busca no BD o maior valor de id e soma 1)

- Para isso:criaObj();req.onreadystatechange=retornoId;var url="Controle?indicador=pesquisaid";req.open("GET", url, true);req.send(null);

AJAXArquivo TelaIncluir.jsp acessando a classe Controle:

String indicador = request.getParameter("indicador");if (indicador.equals("pesquisaid")){ sql="select max(id) from cliente";}

Em seguida faz a conexão com o banco de dados:

Conexão conbd = new Conexão();conbd.conectar();

AJAXclasse Controle acessando a classe Conexão:

if (conbd.getRetorno()== -1){ out.println("Erro na conexão com o banco de dados"); } else { if (indicador.equals("pesquisaid")){ ResultSet rs=conbd.consultar(sql); try{ if(rs.next()){ out.print(rs.getInt(1)+1); } } catch (SQLException ex){ out.print(1); }

AJAXclasse Conexão:

public ResultSet consultar (String sql){ try{ rs=st.executeQuery(sql); retorno=1; } catch (SQLException ex){ retorno=-1; } return rs; }

AJAXAtividade 8

- Continue o desenvolvimento da aplicação Exemplo007(livro WEB TOTAL, pág.230)- Botão Incluir funcionando:

-> Busca automática do ID máximo cadastrado-> Inserção de novo cliente no BD

AJAX

Dicas:

É improvável que a aplicação funcione corretamente logo na primeira vez que é executada

- Erros em programação são muito comuns, não se desespere!!!

AJAX

Procure sempre entender o que está fazendo e usando

Em grandes projetos, ninguém cria 100% do código, mas é altamente recomendável saber de tudo que está usando: o que é, para que serve, como funciona e que situações usar aquilo.

AJAX

Encontrar os próprios erros faz parte das tarefas de um programador

tirar dúvidas é uma coisa, querer que outra pessoa resolva todos os problemas no seu código é outra

AJAXImprimir os valores de dados e variáveis é a forma mais simples e rápida para um programador inspecionar resultados

Mande mostrar caixas de alertas para verificar o conteúdo das variáveis nos arquivos JSPsEx: alert("clientes" + clientes.length);

AJAX

Depure o código: os depuradores mostram a conclusão lógica de uma parte do programa. Assim o programador pode percorrer linha por linha e inspecionar tudo como valores de variáveis e etc.

- Coloque pontos de interrupção na classe Controle e na classe Conexão para verificar se elas estão sendo acessadas.

AJAX

Se mesmo após estes testes você não encontrar o problema, peça para os colegas testarem.

Tarefas feitas repetitivamente tornam-se mecânicas, e por isso você pode estar passando por cima de pequenos erros sem perceber

AJAX

Finalmente, como última dica; Seja humildeNinguém sabe tudo!

Quando você toma uma postura como esta, mantém os braços abertos para receber novas informações e aprender mais, principalmente com aqueles que sabem algo diferente de você.

AJAXAtividade 8

- Continue o desenvolvimento da aplicação Exemplo007(livro WEB TOTAL, pág.230)- Botão Incluir funcionando:

-> Busca automática do ID máximo cadastrado-> Inserção de novo cliente no BD

AJAXAtividade 9

- Crie uma planilha (no Microsoft Excel) com o nome: Controle_erros_ Exemplo007_seu_nome- Preencha a tabela com os erros que aparecerem durante o desenvolvimento do seu projeto

Local numero da linha problema soluçãoquem

solucionou

Controle 12 erro de sintaxe colocar parênteses eu

Banco de dados

configuração do MySQL

seguir tutorial estabelecendo conexão com banco de dados terceiros