Ajax Image Gallery

Postado por: Pedro Rogério em
Ajax Image Gallery

Criar galerias de imagens provavelmente é o que os desenvolvedores mais fazem no dia-a-dia, e pra facilitar isso, vou deixar aqui um exemplo de um código paraa criar uma galeria de imagens com a utilização de Ajax.

Continuar lendo »

Ajax load com jQuery

Postado por: Pedro Rogério em

Em um outro post onde mostrei como utilizar Ajax com jQuey surgiu uma dúvida de um usuário de como adicionar uma imagem de carregando enquanto o conteúdo não é totalmente carregado. Isso não é muito difícil de se fazer com jQuery, pois iremos utilizar as funções ajaxStart e ajaxStop da jQuery.

Para esse exemplo, preparei uma marcação HTML muito simples:

<a id="load" href="#" title="Clique aqui para carregar o arquivo">Carregar arquivo</a>
<div id="content"></div>

O HTML é composto de um link que o ser clicado carrega o conteúdo desejado dentro da div content, o javascript necessário será o seguinte:

Continuar lendo »

Alternativa a Google AJAX Libraries API

Postado por: Pedro Rogério em

O Google que até então parecia um serviço indestrutível não é mais o que parece. Após quedas relatadas no Twitter, o que podemos fazer se dependemos desse serviço? Ainda mais aqueles que dependem da Google AJAX Libraries API para que suas aplicações fucionem.

Recentemente descobri uma alterantiva ao Google AJAX Libraries API, onde caso o serviço esteja off-line, ele utiliza o arquivo JavaScript que está hospedado em seu servidor. Basicamente você teria que criar um arquivo JavaScript e colocá-lo antes do fechamento da tag body:

<script type="text/javascript" src="meu-script-google.js"></script>

O conteúdo desse arquivo deve ser o seguinte:

var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC do Google
sc.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?rand=' + Math.random();
var timer = setTimeout(function(){
   if (typeof jQuery == 'function') return;
        var sc = document.createElement("script");
        sc.type = "text/javascript";
        // SRC local
        sc.src = 'http://www.pinceladasdaweb.com.br/blog/js/jquery-1.3.2.min.js';
        document.getElementsByTagName("head")[0].appendChild(sc);
   // Tempo em milisegundos antes de carregar o arquivo local.
}, 200);

sc.onload = sc.onreadystatechange =  function(e){
    clearTimeout(timer);
}
document.getElementsByTagName("head")[0].appendChild(sc);

É uma ótima alternativa, pois caso o serviço fique indisponível, é carregado um JavaScript alternativo.

Ajax com jQuery – Método load()

Postado por: Pedro Rogério em

jQuery oferece bastante funcionalidades Ajax que podem facilitar a tarefa de enviar e fazer requisições asíncronas no servidor. O método mais simples de jQuery para carregar conteúdo através de Ajax é o load(). Esse post tratará de forma simples este comando para mostrar as diferentes formas de uso.

Sintaxe

load(url,parametros,callback)

Inicia uma requisição Ajax a URL solicitada com parâmetros opcionais. Você pode especificar uma opção de callback, que pode ser chamada quando a requisição está completa.

Argumentos

  • url: A URL que é solicitada a requisição.
  • parâmetros: Um objeto cuja propriedades são serializadas em uma série de parâmetros codificados corretamente e que se passam a requisição. Se utilizado, deve-se especificar se a requisição utiliza o método POST, caso contrário, se omitido, a requisição utiliza o método GET.
  • callback: Uma função chamada após a solicitação já ter sido processada.

Continuar lendo »

AxsJax – Ajax Acessível

Postado por: Pedro Rogério em
AxsJax

AxsJax é o novo companheiro dos desenvolvedores no mundo do Ajax. Se trata de um Framework que permite adicionar acessibilidade aos projetos web que fazem o uso de Ajax. Assim, usuários que fazem o uso de tecnologias assistivas ou similares podem desfrutar de todas as características das aplicações.

Exemplos de aplicações que fazem o uso de AxsJax: Google Web Search, Google Reader, Google Scholar e o jogo Jawbreaker. Detalhes sobre o uso e implementação, você pode encontrar em seu showcase.

Referências

Páginas:1234»