TAG | JavaScript
Executando Ajax via JQuery de modo enfileirado – Parte II
1 comentário · Post por Petter Rafael em Dicas, JavaScript, JQuery
Já viram o post anterior sobre Ajax e JQuery? Não deixem de ler, nele apresentamos um problema causado pelo assincronismo do Ajax e uma forma simples, porém não ideal, de resolvê-lo.
Para o problema proposto no outro post existe uma forma de realizar a execução assíncrona, sem utilizar .defered e mesmo assim estabelecer que uma execução só irá ocorrer após a outra, isso se deve a um recurso antigo da programação e que nem todo programador domina: a recursividade.
Veja o exemplo anterior, só que modificado:
function execExclu(executou){ jQuery.each(mapArray, function(i){ if(executou == i){ executou ++; jQuery.ajax(“/meuScript.php” ) .done(function() { alert(“Executou com sucesso!”); execExclu(executou); }) .fail(function() { alert("Erro no processo!"); }); return false; } }); } |
O exemplo e autoexplicativo, foi criada uma função recursiva que ao ser chamada faz o primeiro step no laço de repetição, aciona o execução Ajax do JQuery e imediatamente retorna falso finalizando a execução do laço, o pulo do gato está no detalhe que por se assíncrono a execução Ajax continua o seu processo e ao finalizar com sucesso ele chama novamente a própria função (recursividade).
Nesta função existe uma variável que é o indexador anterior que comparado com o indexar da atual repetição irá indicar em qual step do laço de repetição a chamada Ajax deve ser acionada.
Nesta técnica aproveitamos o recurso chamado callback que o JQuery implementa de forma maravilhosa, nos callbacks conseguimos executar ações específicas no final da execução, assim podemos ter diversos tipos de processo para cada tipo de callback retornado (sucesso, erro, etc).
Para refinar ainda mais, podemos aproveitar o .ajaxStart() e .ajaxStop() para implementar overlay para indicar de forma visual e bem elegante ao usuário que existe uma execução em andamento e que ele deverá ter paciência até o final da execução.
Leia mais:
dicas · JavaScript · JQuery
Executando Ajax via JQuery de modo enfileirado
1 comentário · Post por Petter Rafael em Dicas, JavaScript, JQuery
JQuery adicionou uma nova visão sobre o desenvolvimento de interfaces ricas para sites e sistemas Web, afinal, não era mais preciso programar dezenas de linhas em Ajax, poderíamos consumir Ajax de forma simples utilizando as funções da JQuery.
Como todos sabem, por excelência as chamadas de Ajax no JQuery são assíncronas, e quando você está dentro de um laço de repetição e aciona uma URL que irá processar algo para o seu sistema em backend, porém esta execução é lenta e ir chamando via Ajax tem a particularidade de ir executando o laço de repetição até a sua finalização e mesmo que a execução do Ajax não tiver sido finalizada uma nova requisição é feita.
A principio isto não é ruim, porém, em determinados casos é possível que uma execução interfera sobre a outra devido ao fato de que podem manipular a mesma rotina interna, como acertar isto então?
Embora desde a versão 1.5 o JQuery implemente .deferred nas chamadas Ajax é possível que a alteração da sua rotina para um controle de .deferred se torne muito árduo, por isso existem soluções mais simples e que podem servir a um grande leque de situações, a solução mais simples para o processo acima é deixar a execução do Ajax via JQuery de forma síncrona, assim, uma repetição do laço só ocorre quando a requisição Ajax terminar, criando assim um fila única do processo.
Veja um exemplo:
jQuery.ajax({ url: “/meuScript.php”, //Aqui vai a URL ou script a ser acionado async: false, //Aqui você define a execução como síncrona jsonp: false, //Controle do fluxo de retorno complete: function( /*coloque aqui sua instrução ao finalizar com sucesso a sua requisição*/){ } }); |
Viu, muito simples, como tudo em JQuery, embora extremamente simples de se implementada a técnica acima tem um grave problema, por ser uma execução síncrona, o browser ficará congelado, o que não é nada elegante, aguardando o retorno da execução e caso outros scripts precisem se acionados eles terão que esperar a execução da chamada síncrona, não haverá modo de executa-los paralelamente.
Como resolver então?
É simples também, não deixem de acompanhar a solução assíncrona para o problema proposto.
Leia mais:
dicas · JavaScript · JQuery
Ultimamente tenho me divertido um bocado programando interfaces Web e para isso o conjunto HTML + CSS + JQuery (JavaScript) tem demonstrado o nível de refinamento que as interfaces Web possuem hoje, seja na caga assíncrona de dados ou puramente adicionando artefatos e efeitos visuais em tela, arrisco dizer que hoje uma interface Web pode ser mais rica que uma interface desktop e olhe que não estou me referindo ao Adobe Flash ou Microsoft Silverlight.
Uma duvida que é recorrente dos novatos e que é muito simples de resolver via JQuery é a captura da altura da tela e da altura do HTML, note que a altura do HTML pode ser maior que a altura da tela pelo simples fato que os navegadores geram barras de rolagem.
Via JQuery temos com capturar os dois casos:
$(window).height(); // Retorna a altura do view do navegador $(document).height(); // Retorna a altura do HTML |
Viram? Bem simples aplicando o JQuery, de posse dos valores o tratamento vai de como você quiser e precisar.
Leia mais:
Muitos desenvolvedores Web se veem obrigados a espalhar códigos CSS em meio ao HTML, JavaScript ou PHP por um simples motivo: o seu código CSS precisa receber valores dinamicamente, um caso difícil de ser resolvido, bem, difícil até agora.
Na verdade existem duas formas de conseguir enviar valores para um arquivo CSS, a primeira é editando o arquivo .htaccess e por consequência só irá funcionar em servidores Apache, mas é bem provável que você encontre formas alternativas em outros servidores web, esta técnica não envolve nenhuma alteração mais profunda no código-fonte da sua aplicação web e toda a alteração consiste apenas no lado do servidor.
Consiste em incluir uma linha como esta no seu arquivo .htaccess:
AddType application/x-httpd-php .css |
Está linha irá indicar para o servidor Apache que arquivos com a extensão CSS deverá ser interpretados como um arquivo PHP, logicamente captura de dados via GET e POST será possível de ser implementado, somente se lembre de tomar cuidado com a segurança de sua aplicação web.
A segunda técnica não necessita de alterações nas configurações do servidor web e por isso toda a implementação é realizada via código-fonte da própria aplicação e seu uso se torna universal. Esta técnica somente aceita parâmetros enviados via GET e consiste em forçar um cabeçalho indicando que se trata de um arquivo CSS e nomeá-lo com a extensão .PHP, assim você terá um arquivo PHP (poderá utilizar todo o poder de programação da linguagem) e o mesmo será tratado como um CSS. Veja o exemplo abaixo:
<?php header('Content-type:text/css'); ?> body { background-color: <?php echo (isset($_GET['fundo']) && $_GET['fundo'] == 'verde') ? '#0f0' /* Verde */ : '#00f' /* Azul */; ?> } |
Viu, código CSS e PHP juntos.
Fonte: PHPIT
Leia mais:
JavaScript · PHP · segurança
Todo mundo que acessa a Internet já deve ter ficado com raiva quando que no momento da leitura de algum texto do nada o site recarrega, isso se chama autorefresh, e sites como Terra, R7, etc abusam deste recurso tornando a navegação no site um verdadeiro exercício de paciência.
Existem basicamente dois motivos para isso, o primeiro é que com o autorefresh do site todo é possível ganhar mais pageviews, inflando os resultados e consequentemente aumentando o valor cobrado por espaços de publicidade e o segundo é para manter o conteúdo sempre atualizado.
Como no caso de manter o conteúdo sempre atualizado existe soluções muito mais polidas baseadas em JavaScript (AJAX) acredito que o fator seja o caso inflar os resultados de pageviews mesmo ou em última instancia é uma equipe extremamente despreparada que mantem o site.
O lado positivo deste post é que a maioria dos browsers tem opções que podemos configurar para evitar os aborrecimentos que o autorefresh causa:
- Chrome: por incrível que possa parecer este browser não tem tal recurso, para isso basta instalar esta extensão que o problema estará resolvido;
- Firefox: basta apontar para Ferramentas > Opções > Avançado e marcar a opção “Alertar se sites tentarem redirecionar ou recarregar a página”;
- Internet Explorer: vá para o botão de configurações (fica ao lado da “estrela” que indica favoritos) > Opções da Internet > Segurança > Nível Personalizado > procure por “Permitir META REFRESH” e marque a opção “Desabilitar”.
Com isso seus problemas devem ser diminuídos e seria bom que sites de grande porte como Terra, IG e R7 pararem de abusar do autorefresh.
Fonte: Tecnoblog
Leia mais:
Chrome · firefox · internet · JavaScript · Mozilla
Framework para desenvolvimento Web em PHP/JavaScript
2 comentários · Post por Petter Rafael em Dicas, JavaScript, JQuery, PHP, Webdesign
Durante o ano de 2010 esteve um planejamento e execução o projeto de um Framework para desenvolvimento Web utilizando PHP e JavaScript baseado nas seguintes premissas e necessidades:
- Deixar o layout livre para qualquer tipo de desenvolvimento (seja utilizando Tableless ou não);
- Não ser tão friendly-user como o WordPress, nosso usuário irá desenvolver código e não arrastar elementos em tela. Centrar-se no poder do desenvolvimento de código, deixar o desenvolvedor, nosso público-alvo, fazer a sua mágica em PHP;
- Centrar-se no uso da JQuery como framework JavaScript para suprir todas as necessidades de crossbrowser;
- Ser livre para o desenvolvedor alterar o código-fonte do projeto e sugerir novos recursos;
- Padronizar e formatar a persistência de dados;
- Permitir que programadores e desenvolvedores iniciantes em PHP produzam sites e sistemas Web complexos;
- Facilitar a manutenção e gestão do sistema;
- Área administrava pronta, com elementos principais utilizados para gestão de sites.
Bem pessoal, está apresentado o framework iMais, que pelos testes permite reduzir em até 60% do tempo gasto no desenvolvimento de sites e sistemas Web.
Com o código-fonte aberto e livre é possível utilizar o framework com os recursos existentes e expandi-lo através de desenvolvimento próprio, de forma fácil e flexível. Mesmo utilizando o framework não existe a perda de performance, problema comumente encontra em frameworks de mercado.
Nos próximos dias estaremos liberando para download o conjunto básico, o que significa que no decorrer deste ano iremos investir tempo e recurso para que o framework cresça em termos de utilizadores e recursos, facilitando a criação de elementos Web ricos.
Vai desenvolver em PHP? Então utilize o iMais.
Leia mais:
dicas · JavaScript · JQuery · PHP · Webdesign
Remendo no Firefox mais atrapalha do que ajuda
1 comentário · Post por Petter Rafael em Dicas, JavaScript
A alguns meses atrás a Mozilla precisou adicionar um remendo na linha Firefox 3.x, isso porque scripts JavaScript mal feitos ou estrategicamente programados para isso podiam entrar em colapso e travar todo o browser.
E como o Firefox trabalha com abas, imagine o tamanho do problema.
E a solução mais viável e inteligente seria o Firefox isolar a thread de cada aba, assim como o Chrome já faz, e assim quando um site travar todas as outras abas ficariam protegidas.
Só que esta solução é complexa demais para ser implementada em um minor update e teremos que esperar a versão 4 do Firefox para ver isso.
Mas a Mozilla nos brindou com um quebra-galho que mais atrapalha do que ajuda.
Agora quando o processamento de um script JavaScript ultrapassar 10 segundos o browser irá emitir um aviso sobre o script lento e se queremos continuar a execução ou cancelar.
Pronto, tudo resolvido na terra do Panda de Fogo, ou não!
Esse processo é anacrônico, mais confunde o usuário (ainda mais os leigos do que realmente ajuda) e em alguns diversos casos mesmo você optando por continuar a execução o Firefox faz o script se perder atrapalhando ou mesmo impedindo o correto funcionamento de toda a página.
Qual a solução definitiva?
Não precisamos chegar ao ponto extremo de utilizar a bomba do Internet Explorer, então temos que optar para o Opera (quem ninguém utiliza) ou ir para o Chrome que parece ser o caminho mais natural para os usuários do Firefox e que estão insatisfeitos.
Fica aqui a dica para o uso do Chrome.
E para você Mozilla, melhor sorte da próxima vez.
Leia mais:
Chamando um script PHP a partir da página com JQuery
1 comentário · Post por Petter Rafael em JavaScript, JQuery
Imagine a seguinte necessidade, você tem um formulário HTML, e conforme o usuário vai preenchendo os dados é preciso alterar os dados dos campos seguintes desse mesmo formulário.
Essa tarefa pode ser realizada, utilizando somente PHP, porém será necessário alguns reloads no formulário que pode irritar algum usuário mais exigente e ainda teremos que criar uma série de controles para isso.
Qual a solução então?
Podemos utilizar JQuery para isso.
Como vimos nas máscaras utilizar JQuery além de simples pode deixar sua aplicação Web muito mais elegante e funcional, vamos ao exemplo.
Supondo que eu queira retornar o campo rua (que contém o nome da rua) após consultar o CEP informado pelo usuário. Começaremos pelo script HTML que gera o formulário Web. Vamos criar um div e colocar em seu id a string “retorno”.
<input type="text" name="cep" id="cep" value="<?php echo $cep; ?>" size="10" maxlength="10" /> <input type="button" name="cCep" id="cCep" value="Procurar" onclick="javascript:return chCEP(2, document.novoCliente.cep)"/> <div id="retorno"></div> |
No exemplo acima podemos observar que o botão “Procurar” dispara uma função JavaScript, o conteúdo dessa função é o seguinte:
function chPage(acao, campo){ jQuery(function($){ $("#retorno").load("buscaCep.php", {acao: acao, cep: campo.value} ); }); } |
Viram o pulo do gato nessa função?
Ela dispara o script PHP buscaCep.php passando duas variáveis via POST, a primeira é a variável acao e a outra cep.
Essas duas variáveis servem para que o script PHP execute uma consulta a um banco de dados qualquer e retorne HTML puro, ou seja, o seu retorno seria:
<input name="rua" id="rua" value="Rua pesquisada" /> |
E essa parte da função JavaScript - $(“#retorno”) - serve para indicar em qual objeto do formulário o HTML de retorno será inserido.
Viram que interessante, de uma página HTML que é na verdade um formulário HTML eu chamo e executo um script PHP e consigo inserir em tempo de execução o HTML retornado do script PHP sem a necessidade de reload em todo o formulário.
Leia mais:
Continuando a falar das facilidades de desenvolvimento trazidas com a JQuery, vou explicar como fazer de forma simplificada como fazer máscaras utilizando a JQuery. Observem o código abaixo:
jQuery.noConflict(); jQuery(function($){ $("#cnpj").mask("99.999.999/9999-99"); $("#cep").mask("99.999-999"); }); |
Perceberam a facilidade?
Funciona da seguinte forma:
A primeira linha tem a função de evitar conflitos com outros scripts JQuery ou JavaScript puro que você possa ter na sua página.
A segunda linha iniciamos a função na sintaxe do JQuery.
A terceira linha temos o ID do nosso elemento HTML que irá receber a mascara (no caso é um text) e em seguida definimos a máscara, sem nenhum segredo, sem códigos miraculosos.
Sem mais nada.
Simples e funcional em todos os browsers modernos.
Leia mais:
Eu não sou muito fã de frameworks, até porque um framework pode engessar de forma desnecessária a sua aplicação e você fica dependente da ferramenta para prestar manutenção e/ou atualizar sua aplicação, porém em alguns casos temos que tirar o chapéu para um framework.
É o caso do JQuery, que é um framework para JavaScript que tem por finalidade diminuir a complexidade de desenvolvimento de software web e minimizar a incompatibilidade do código JavaScript entre navegadores, além de possuir a possibilidade de implementação segura de efeitos e CSS via adoção de plugins.
Com o JQuery podemos abranger máscaras, validações complexas em formulários até mesmo efeitos de transição entre páginas, tudo isso sem a grande preocupação de desenvolvedores JavaScript que é a compatibilidade do código-fonte entre os diversos navegadores disponíveis no mercado.
A sua instalação é simples, podemos fazer o download da versão de produção do próprio site do JQuery e depois para utilizar ele em uma página basta utilizar a seguinte linha na tag HTML header:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> |
Leia mais:
internet · JavaScript · JQuery · Webdesign · webdesigner
