BRASIL TUTORIAIS - Tudo sobre tutoriais » AJAX

AJAX PARA UPLOAD DE ARQUIVOS

admin — Fri, 06 Mar 2009 20:36:53 +0000

Aqui temos uma solução poderosa e elegante para fazer upload de arquivos dentro dos seus aplicativos web. A grande vantagem deste script é permitir o upload de diversos arquivos ao mesmo tempo com barra de progresso em cada um. Ele é compatível com todos os navegadores atuais.

Veja alguns recursos:

Selecione vários arquivos e envia ao mesmo tempo.
Filtro de tipos de arquivo
O filtro é aplicado antes mesmo do arquivo ser copiado para o servidor
Pode ser ativado limitações para o upload
Parte da solução utiliza Flash 8

A melhor forma de entender é ver a solução funcionando. Para isto visite este endereço. Clique no botão “Browser Files” e selecione 2 ou mais arquivos que estiverem no seu computador. Você verá o nome dos arquivos e o tamanho dos mesmos exibidos no campo abaixo. Se você clicar no circulo vermelho que aparece do lado de cada arquivo poderá apagar o mesmo da lista. Se clicar em “Start Upload” inicia o processo de envio dos arquivos. Uma barra de progresso vai indicando a evolução do upload.

O autor do FancyUpload fornece o javascript, html, css, flash (swf) e php necessários para download. Se possuir dificuldade com o inglês veja a versão traduzida.

AJAX PARA UPLOAD DE ARQUIVOS is a post from: BRASIL TUTORIAIS - Tudo sobre tutoriais

NOTICIAS RELACIONADAS:

10 ANIMAÇÕES USANDO JQUERY

admin — Fri, 06 Mar 2009 20:33:42 +0000

O site webdesignerwall [traduzido] publicou um ótimo artigo com 10 animações utilizando o javascript jquery. O artigo é destinado a webdesigners iniciantes e para visualizar cada animação basta procurar o link “demo” em cada tutorial. Uma das animações mais interessantes é que exibe uma janela na parte superior do site quando um botão é clicado. Veja o demo. Para testar todas as animações visite. Todos os demos podem ser copiados aqui.

10 ANIMAÇÕES USANDO JQUERY is a post from: BRASIL TUTORIAIS - Tudo sobre tutoriais

NOTICIAS RELACIONADAS:

CALENDÁRIO AJAX PARA CAMPO DE FORMULÁRIO

admin — Fri, 06 Mar 2009 20:30:41 +0000

Uma forma fácil de padronizar o preenchimento de campos de formulário destinados a data é o uso de um mini calendário para que o visitante do site possa selecionar a data no lugar de digitar a data.

Isto é muito útil quando o visitante precisa saber qual é o dia da semana da data que será escolhida. Em sites onde a data de um evento é fundamental este tipo de recurso é muito importante para facilitar a vida do visitante e evitar o preenchimento incorreto. Exemplo: sites de hotéis, empresas de transporte, locadoras, empresa de eventos, etc.

Você encontrará uma boa solução no site dev.base86.com. Veja diversos “demos“. Clicando em “show code” nestes demos você pode visualizar o código que deve aplicar. Não esqueça de carregar os arquivos javascripts no da página. Veja como aqui

CALENDÁRIO AJAX PARA CAMPO DE FORMULÁRIO is a post from: BRASIL TUTORIAIS - Tudo sobre tutoriais

NOTICIAS RELACIONADAS:

Engatinhando com AJAX e PHP

admin — Wed, 18 Feb 2009 00:31:57 +0000

Como esse tutorial é bem básico, para quem está começando com AJAX, eu vou esplicar explicar coisas bem básicas. Desde como funciona o protocolo HTTP e um exemplo de AJAX.

Para que você possa usufruir ao máximo do tutorial, você necessita de conhecimentos de HTML, JavaScript e PHP.

Vamos ver aqui então: Como funciona um HTTP request, um HTTP response, técnicas utilizadas e como comunicar o cliente com o servidor.

HTTP Resquests

O formato de um HTTP request é assim:
[]

A primeira linha() necessita da indicação do tipo do request, diretório de acesso eda versão do HTTP. Já no indica informações adicionais para o server. Depois a , é seguida do que é opcional.

Não vou ficar explicando muito aqui, pois não é o foco do nosso tutorial. Agora vou mostrar um exemplo prático de como o browser envia o HTTP request:
GET /?cod=1 HTTP/1.1 Host: www.felipetonello.com User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1) Gecko/20060601 Firefox/2.0 (Ubuntu-edgy) Connection: Keep-Alive

Explicando resumidamente: Na primeira linha vimos que usamos o tipo GET seguido da / quer dizer que irá acessar ao diretório root do server com o parametro cod=1 e em seguida da versão do HTTP. Depois os cabeçalhos que são auto-explicativo.
Quem usa PHP a um tempo conhece bem esses headers.

Então vimos como o browser se comunica com os servidores por meio do HTTP(Hypertext Transfer Protocol).

HTTP Responses

Agora vamos ver como o servidor responde, quando recebe um request, por meio do HTTP.
[]

O formato é bem parecido, apenas muda a primeira e ultima linha. Na primeira linha ele retorna a versão do HTTP e o status da resposta. Já na ultima ele retorna o corpo da resposta. Exemplo:
HTTP/1.1 200 OK Date: Sat, 11 Nov 2006 23:59:59 GMT Content-Type: text/html;charset=UTF-8 Content-Length: 122
Felipe Tonello

Na primeira linha temos a versão do HTTP em seguida do status(200). Os cabeçalhos e depois a resposta que no caso foi como um text/html.
Os status mais comuns são:

200 (OK): arquivo encontrado com sucesso.
304 (NOT MODIFIED): O arquivo não foi modificado desde o ultimo request. Isso é mais utilizado em browsers com mecanismos de cache.
401 (UNAUTHORIZED): Cliente não tem autorização para acessar o arquivo. Normalmente isso irá fazer com que o browser pergunte por usuário e senha para logar no servidor.
403 (FORBIDDEN): O Cliente falhou na autorização. Normalmente acontece quando você falha na autorização depois de um erro 401.
404 (NOT FOUND): Quando o arquivo não existe na localização informada.

Nesse tutorial vocês entenderam como funciona o protocolo HTTP para se comunidar entre servidor e cliente.
Para não ficar muito grande vou separar em 2 partes. Na proxima parte vamos ver um exemplo de comunicação cliente-servidor usando AJAX.

Engatinhando com AJAX e PHP is a post from: BRASIL TUTORIAIS - Tudo sobre tutoriais

NOTICIAS RELACIONADAS:

Tutorial básico sobre AJAX

admin — Tue, 17 Feb 2009 20:48:04 +0000

O que é AJAX? (Asynchronous Javascript and XML, mais conhecido como AJAX) foi criado com o principio de ser uma maneira rápida e otimizada de podermos fazer requisições Web, sendo esta totalmente transparente ao usuário.

Sabemos que todo o tipo de acesso a dados de um servidor de sites na internet, roda encima de requisições Web (Requisições via protocolo HTTP ao servidor de destino), e por resposta o servidor também com o mesmo protocolo retorna os dados solicitados, tais como HTMLs.

Este processo normalmente não é notado na visão do usuário, mas é isso que acontece quando digitamos em nosso navegador de internet um endereço da Web. O AJAX por sua vez também roda encima desta lógica.

Mas e afinal, para que usamos o AJAX?

Hoje esta tecnologia é utilizada para uma infinidade de processos, mas o que precisamos saber não é o que fazer com ele, mas sim saber como ele trabalha para podermos adequar tal tecnologia em nosso dia-a-dia.

Um exemplo básico da utilização de AJAX, é um refresh de página, sem que o usuário necessite faze-lo.

O programador que cria a página, programa uma requisição AJAX, para que busque novos dados no servidor em um limite de tempo, e então também por Javascript, altera a visualização do usuário, talvez inserindo linhas em uma tabela ou algo do gênero, assim dando um aspecto de atualização automática.

Como utilizar?

Hoje, o AJAX é suportado pelos principais browsers disponíveis no mercado, e utilizados pela comunidade Web.

Para isso utilizados objetos Javascript, que rodam encima do browser do usuário e transitam dados por estas requisições.

Assim sendo, podemos fazer interações com processos de servidor, sem que seja necessário por exemplo recarregar a página do usuário, ou mesmo se quer visualize tal iteração.

Vejamos um exemplo básico:

//variavel ajax
var ajax = null;

//função que faz a requisição ajax
function requisicaoAjax(){
    //utilizado para requisições no browser Internet Explorer
    if (window.ActiveXObject) ajax = new ActiveXObject(’Microsoft.XMLHTTP’);
    //utilizado como o padrão javascript para requisições AJAX.
    else if (window.XMLHttpRequest) ajax = new XMLHttpRequest();
    //se a variável ajax for nula, logo o browser não suporta tal tecnologia
    if(ajax != null){
      //abre a requisição ajax, passando o método de acesso, a url
solicitada e o parâmetro sobre sincronia
      ajax.open(’GET’,’http://gujs.com.br/’,false);
      //seta a funcao que sera chamada quando o ajax for retornado
      ajax.onreadystatechange = statusAjax;
      //inicia o tranporte
      ajax.send(null);
    }
}

//função que trata o retorno ajax
function statusAjax(){
//caso o status do ajax esteja ok, então chama a função retornoAjax
enviando o retorno da requisição como parâmetro
if(ajax.readyState == 4 && ajax.status == 200){
retornoAjax(ajax.responseText);
}
}

//função que é chamada quando o ajax for retornado
function retornoAjax(response){
//dá um alerta no texto de retorno
alert(response);
}
requisicaoAjax();
Sendo que:

Criamos um objeto para o transporte do AJAX;
Setamos ao objeto as diretivas da solicitação como a url a ser solicitado e o método. O terceiro parâmetro é se deve ser assíncrono ou não, no caso estamos passando false, para o Javascript aguardar o retorno da requisição.
Indicamos qual será a função que irá fazer o tratamento de estados da requisição. O status da requisição é retornado pelo browser para tratamento a cada vez que este status muda.
Você pode ver a listagem completa de status aqui:

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Quando dizemos:

ajax.onreadystatechange = statusAjax;
Estamos indicando que toda a vez que este AJAX mudar de status, ele deve chamar esta função.

No nosso caso, o único status interessante é o status de requisição ok.

Se a requisição retornar um status ok, então a partir daí trabalharemos em nosso refresh, como dito acima, onde trataríamos os dados retornados e aplicaríamos na visualização do usuário;

Uma coisa que devemos considerar e que por sua vez é de grande importância, é que não podemos fazer requisições AJAX a outro domínio diferente ao que o site atual roda.

Por exemplo: Sendo que minha página exemplo_ajax.htm estivesse dentro de http://www.gujs.com.br, só poderei fazer requisições AJAX para arquivos que fiquem dentro de http://www.gujs.com.br.

Este exemplo é bem simples, mas apenas para podermos ter uma noção de como funciona uma requisição AJAX.

Existem hoje, várias bibliotecas Javascript para formalizar tais requisições, bibliotecas que fazem o controle de estados inválidos da requisição, ou mesmo que facilitam o transporte de requisições via método POST.

O intuito deste artigo é simplesmente desmistificar este fênomeno chamado AJAX.

Tutorial básico sobre AJAX is a post from: BRASIL TUTORIAIS - Tudo sobre tutoriais

NOTICIAS RELACIONADAS: