JavaScript complementos e Ajax · AJAX, JQUERY, JSP e SERVLET Crie o pacote ajaxdemo em src. Em...
18
JavaScript – complementos e Ajax Professor Vicente Paulo de Camargo
Transcript of JavaScript complementos e Ajax · AJAX, JQUERY, JSP e SERVLET Crie o pacote ajaxdemo em src. Em...
JavaScript – complementos e Ajax
Professor Vicente Paulo de Camargo
JavaScript – complementos e Ajax
Serão apresentados complementos sobre JavaScript e a utilização do Ajax com JQuery
Crie a página form-validacao.html com o seguinte conteúdo:
Página form-validacao.html (Parte I)
JavaScript – complementos e Ajax
Página form-validacao.html (Parte II)JavaScript da página (dentro do body)
JavaScript – complementos e Ajax
Salve a página e
execute-a no
navegador
Evento em botão Crie a página evento-button.html com o seguinte código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button onclick="alert('Você clicou no
botão');">clique aqui</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
function clique_botao()
{
alert("Você clicou no botão");
}
</script>
</head>
<body>
<button onclick="clique_botao();">clique aqui</button>
</body></html>
ou
JavaScript – complementos e Ajax
Salve a página e
execute-a no
navegador
Usando função sem nomeCrie uma nova página com o seguinte conteúdo:
JavaScript – complementos e Ajax
Salve a página e
execute-a no
navegador
JQUERY – visão geralÉ JavaScript, mas com menos escritaUtiliza-se o objeto $ para acessar elementos de uma páginaO uso de # diz ao JQuery procurar o elemento pelo idO uso de . diz ao JQuery procurar o elemento por classe$(‘#id_buscado’).hide(); //esconde o elemento do id indicado$(‘.classe_buscada’).show();//mostra o elemento da classe indicadaQuando não se tem # ou . JQuery busca pela nome da tag$(‘span’).addClass(‘minha_span’); // adiciona a classe minha_span a todos os span da página$(‘p a’).css(‘color’,’blue’);//toda tag a dentro da tag p terá a cor blue$(‘.classe a’).css(‘color’,’green’); //toda tag a com a class classe terá cor verde$(‘p.classe a’).css(‘color’,’red’); //toda tag a dentro de tag p com class classe terá cor vermelha$(‘input[type=“text”]).css(‘background’,’white’); //todo input do tipo texto terá cor de fundo whiteIf ($(‘p’).css(‘heigth’) == ‘18px’) $(‘p’).css(‘heigth’, ‘25px’);
Mais detalhes em: http://www.w3bai.com/pt/jquery/default.html
JavaScript – complementos e Ajax
AJAX ( Assynchronous JavaScript and XML)
Permite criar uma conexão com o servidor sem a necessidade de recarregar toda a página
Permite executar conexões aleatórias para atualizar uma determinada página ou atualizar uma parte de uma página
É possível utilizar AJAX só com JavaScript puro, no entanto, o JQuery possui vários métodos como $.ajax(), $.load(), $.get() e$.post(). Mas, possui também o $.getJSON()
JavaScript – complementos e Ajax
AjaxO envio de formulário pode ser por Get e Post
Esses dois processos são utilizados pelo JQuery
Funciona de forma assíncrona
Ou seja, executa uma atividade independentemente de outras atividades
Uma restrição é que essa requisição seja realizada no mesmo domínio
JavaScript – complementos e Ajax
AjaxMonitorando requisiçõesNo chrome, botão direito, inspecionar
No Firefox, botão direito, inspect elemento
Nas duas opções, selecione Network e XHR (como destacado nas figuras)XHR = XMLHttpRequest
JavaScript – complementos e Ajax
AjaxO envio de formulário pode ser por Get e Post
Esses dois processos são utilizados pelo JQuery
Funciona de forma assíncrona
Ou seja, executa uma atividade independentemente de outras atividades
Uma restrição é que esse tipo de requisição seja realizada no mesmo domínio
JavaScript – complementos e Ajax
AJAX, JQUERY, JSP e SERVLETCrie um projeto Dynamic Web Project. Informe um nome para esse projeto
JavaScript – complementos e Ajax
1
Next
2
Next
Finish
3
AJAX, JQUERY, JSP e SERVLETCrie a página index.jsp dentro da pasta WebContent do projeto e ajuste o conteúdo da página para o indicado a seguir:
JavaScript – complementos e Ajax
AJAX, JQUERY, JSP e SERVLETCrie a página index.jsp dentro da pasta WebContent do projeto e ajuste o conteúdo da página para o indicado a seguir:
JavaScript – complementos e Ajax
Formato de $.get:$.get(url[,data][,success(data, textStatus, jqXHR)][, dataType])*Em colchete indica opcionalurl: string da url para onde será enviada a mensagemdata: pares de valores que serão enviadossuccess: função que será executada quando a requisição for completada. Aceita 3 argumentos: os dados, uma string do status e um objeto XMLLHttpRequest(opcional).datatype: recebe uma string informando o tipo do retorno pelo servidor, podendo ser: xml, html, json, script.
Esse exemplo só utiliza os 3
primeiros argumentos no
$.get
AJAX, JQUERY, JSP e SERVLETCrie o pacote ajaxdemo em src. Em seguida, crie um Servlet (como se cria uma nova classe) com o nome ActionServlet.javaUm Servlet é uma classe especial que permite tratar o envio de informações do front-end para o servidor e vice-versa.Informe o seguinte conteúdo para o referido Servlet:
JavaScript – complementos e Ajax
AJAX, JQUERY, JSP e SERVLETAcesse o arquivo web.xml a pasta WebContent/WEB-INF e atualize seu conteúdo como o indicado a seguir:
JavaScript – complementos e Ajax
Ao mapear o Servlet como indicado, ele se torna um padrão de URL de forma que ele possa chamado sempre que esse padrão de URL seja utilizado.
AJAX, JQUERY, JSP e SERVLETAcesse o arquivo web.xml a pasta WebContent/WEB-INF e atualize seu conteúdo como o indicado a seguir:
JavaScript – complementos e Ajax
Ao mapear o Servlet como indicado, ele se torna um padrão de URL de forma que ele possa ser chamado sempre que esse padrão de URL seja utilizado.
FIM
JavaScript – complementos e Ajax
