Antes de mais nada, gostaria de dizer que eu sou um fã assumido do framework prototype em prol de um código mais limpo e mais eficiênte sem recorrer a filas de requisição entre outros, e ainda pelo tamanho no framework que é baseado em alguns kb´s.
Um dos grandes atrativos do prototype é a forma como ele lida com as situações envolvendo Ajax, por partes vamos ao que interessa:
Leia o resto deste post »
Bom dia, boa tarde boa noite.
A insônia (maldita) me levou a pesquisar no google (amanha eu vo chega atrasado no trampo) felizmente ou infelizmente me deparei com um artigo de interesse público que me fez gastar 1 hora (isso mesmo, 1 hora) do meu tempo inútil.
Resumindo : Um cidadão criou uma barra de progresso (progress bar pros íntimos) onde a idéia é semelhante a do google.
AJAX !?, nem tanto é o AIFRAME (piadinha interna e irrelevante). Estou postando sobre isso porque o cara fez bem feito e bunitinho, nunca é demais colocar uma barra de progresso num UPLOAD e ainda “realizar o upload sem sair da página”.
Ahhhh é pra PHP 5.2 mais tem uns patch´s pra PHP >= 4
“realizar o upload sem sair da página” = iframe
Visualisar o demo. (Link arrumado, desculpe o incoveniente)
Atualização:
Agora o pacote faz parte do site oficial do php, encontra-se em:
Olá pessoal,
Estou passando um passo a passo de como se criar uma fila de requisições e Ajax, pois como eu acredito que vcs já saibam, se vc fizer muitiplas requisições no Ajax ao mesmo tempo com o mesmo objeto Xmlhttprequest da merda….
Abaixo vai um trecho do artigo do Elcio Ferreira sobre o assunto
****************************
Para começar criamos nossa fila de conexões, um Array, e uma variável com o índice do elemento da fila que vai ser executado:
//Fila de conexões fila=[] ifila=0
Agora nossa função ajaxHTML deve apenas exibir o “Carregando …”, inserir os parâmetros que ela recebe na fila e testar se a fila está em execução. Se não estiver, executa o elemento atual da fila. Fica assim:
//Carrega via XMLHTTP a url recebida e coloca seu valor
//no objeto com o id recebido
function ajaxHTML(id,url){
//Carregando...
document.getElementById(id).innerHTML="<span class='carregando'>"+
"Carregando...</span>"
//Adiciona à fila
fila[fila.length]=[id,url]
//Se não há conexões pendentes, executa
if((ifila+1)==fila.length)ajaxRun()
}
Note a chamada à função ajaxRun. Ela vai ficar bem parecida com nossa ajaxHTML do passo anterior. Basicamente, vai criar a conexão e executá-la, com uma onreadystatechange que faz duas coisas: coloca o HTML recebido no objeto HTML e testa se há conexões na fila esperando execução, se houver, executa a próxima:
//Executa a próxima conexão da fila
function ajaxRun(){
//Abre a conexão
xmlhttp.open("GET",fila[ifila][1],true);
//Função para tratamento do retorno
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4){
//Mostra o HTML recebido
retorno=unescape(xmlhttp.responseText.replace(/+/g," "))
document.getElementById(fila[ifila][0]).innerHTML=retorno
//Roda o próximo
ifila++
if(ifila<fila.length)setTimeout("ajaxRun()",20)
}
}
//Executa
xmlhttp.send(null)
}
Você pode ver o código completo no arquivo ajaxutil.js. Foi construído para que possa ser reaproveitado em qualquer projeto. Veja como o ajax.js ficou. Exatamento igual ao do primeiro artigo, exceto toda a chamada ao XMLHttpRequest, que foi substituída por:
//Carrega o HTML
ajaxHTML("titulo","funcoes.php?h="+n)
ajaxHTML("conteudo","funcoes.php?n="+n)
Se tivéssemos que carregar mais regiões, bastaria acrescentar linhas aqui.
****************************
Se quiserem ver o artigo na integra esta em http://www.tableless.com.br/artigos/ajaxdemo2/
