Olá, neste post vamos entender conceitualmente o que é evento AJAX e como podemos usá-los dentro do Scriptcase.

AJAX? Mas afinal o que é isso?

AJAX,  é o acrônimo de Asynchronous JavaScript and XML, é basicamente um conjunto de tecnologias de desenvolvimento web que tem como foco o construção de aplicações mais interativas, tendo como um dos principais objetivos a resposta rápida de páginas web através do intercâmbio de pequenas informações entre o servidor web, além de poupar a necessidade da página ser recarregada inteira sempre que uma nova ação for realizada.

Os recursos AJAX, falando de forma bem generalista, podem ser resumidos em três palavras: usabilidade, velocidade e interatividade. É um pacote de tecnologias que possibilitam tornar a relação entre interface web e usuário mais produtiva e rica.

Conceitualmente falando, utilizar AJAX remete conhecer bem JS, trabalhando com,  DOM, XML e CSS.

Tá, mas eaí, como funciona?

Para entender precisamos raciocinar como uma aplicação web comum funciona, o que basicamente ocorre é que nessa aplicação o navegador vai buscar as informações necessárias no servidor e retorna para o cliente.

Já no AJAX é um pouquinho diferenciado, digo isso por que aqui , no processo de carregamento da página, toda a carga de dados processada é passada para o cliente. Então quando um usuário faz uma solicitação, quem procura e retorna é o JS de forma simultânea , não precisando assim fazer o famoso, porém chato, ‘reload’ da página.

No entanto, vale deixar claro que no AJAX o processo de carregamento acaba se tornando um pouco mais lento, se comparado ao comum, já que muitas informações são pré-carregadas, mas no fim, somente os dados vão precisar ser carregados, resultando num site muito mais ágil.

Aplicação web comum

Aplicação AJAX

  1. Solicitação HTTP é mandado do navegador para o servidor;
  2. Esse servidor recebe a solicitação e faz a busca dos dados;
  3. Após a busca o servidor retorna com os dados solicitados;
  4. Por fim o navegador, recebendo os dados, recarrega a página mostrando as novas informações.

( Ressalvo que durante todo esse processo o usuário não pode fazer nada a não ser esperar os resultados de sua solicitação serem carregados, esse processo além de ser tedioso, acaba requerendo do servidor muitos recursos)

  1. Através do navegador, é gerado uma chamada em JS e posteriormente ativa o XMLHttpRequest;
  2. No background desse processo, o navegador cria uma solicitação HTTP para o server;
  3. Então o server recebe a solicitação, faz a busca e retorna os dados para o navegador;
  4. Por fim o navegador recebe então os dados enviados pelo server e os exibe diretamente na página( sem precisar que a página seja recarregada).

 

Eventos AJAX dentro do Scriptcase? Como?

O mercado atualmente conta com diversos frameworks para quem quer trabalhar com Ajax, muitas delas didáticas e de fácil aplicação, algumas ferramentas inclusive vem com componentes em Ajax que podem facilmente ser acopladas a uma aplicação, como é o caso do Scriptcase. Dentro da sua grade de componentes o Scriptcase conta com alguns desses específicos em Ajax o que dá muito mais qualidade para as aplicações desenvolvidas nele, além disso, existe também uma facilidade muito grande de se programar esses componentes onde é necessário somente parametriza-los.

Conscientes agora que ao usar AJAX , o tráfego de informações desnecessárias são evitados, o processo de carregamento da aplicação se torna exponencialmente mais veloz.

Diante disso, o Scriptcase dispõe de quatro eventos para incrementar a sua aplicação web:

  • onChange – Este evento ocorre quando o campo tem o foco e o valor do campo é mudado e o foco é direcionado para outro objeto.

onchangept

  • onClick – Este evento ocorre quando o campo é clicado. (somente este evento está disponível para uma aplicação do tipo consulta)

onclickpt

  • onBlur – Este evento ocorre quando o campo tem o foco, o valor do campo não é alterado e o foco é direcionado para outro objeto.

onblurpt

  • onFocus – Este evento ocorre quando o campo tem o foco.

onfocuspt

Para melhor instruir sobre ajax dentro do SC, temos também alguns tutoriais práticos que demonstram a utilização dentro do nosso ambiente, sinta-se à vontade para ler:

  • Consultas com navegação AJAX:

http://www.scriptcase.com.br/tutoriais/consulta-com-navegacao-ajax/

Exemplo:

https://www.scriptcase.com.br/exemplos/relatorios-php/consulta-ajax/  


  • Eventos AJAX na consulta:

http://www.scriptcase.com.br/tutoriais/consulta-com-evento-ajax/

Exemplo:

http://www.scriptcase.com.br/exemplos/relatorios-php/consulta-com-eventos-ajax/?view=clean


  • Usando botão AJAX:

http://www.scriptcase.com.br/tutoriais/usando-o-botao-ajax/


Caso você ainda não conheça, o Scriptcase é uma solução para o desenvolvimento de aplicações web e relatórios de business intelligence de forma rápida e colaborativa.

Faça o download e venha experimentar a nossa ferramenta!

https://www.scriptcase.com.br/download/

 

Você pode gostar de…

Botão Estilo Togle IOS e Simulando Botão Run Sem Perder Marcação ao Navegar nas Páginas da Consulta

Nesse 3° artigo vou demonstrar o uso do Botão tipo Toggle estilo IOS em uma consulta e simular o ...

Especialista ou generalista, quem usa melhor o Scriptcase?

Quais são os perfis ideias para aqueles  que desejam aproveitar o melhor que o Scriptcase tem a of...

Desabilitando o preenchimento automático e autocomplete do navegador Chrome em telas de login

Olá. Aqui pretendo mostrar uma alternativa para desabilitar o preenchimento automático e o autocom...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.

Usaremos as informações fornecidas para lhe enviar newsletter e ofertas especiais por email. Você pode cancelar a inscrição quando quiser, clicando em um link no rodapé de qualquer e-mail que receber de nós, ou entrando em contato conosco pelo e-mail sales@scriptcase.net. Saiba mais sobre nossa Polícia de Privacidade.