Aug 09
Hoje irei dar um exemplo de como usar JSON com Prototype em uma chamada via Ajax. Não estou muito acostumado com o Prototype mas comecei a usar por ser um especificação de um projeto que estou trabalhando atualmente.
O JSON é um acrônimo para “JavaScript Object Notation” e é um padrão para a troca de mensagens. JSON é muito usado em chamadas Ajax por ser mais simples e mais leve que SOAP que usa XML.
Abaixo segue um exemplo de um objeto JSON que irei usar neste tutorial.
Crie um arquivo chamado conteudo.htm e insira o código abaixo.
{ "jogos" : [
{ "nome": "World of Warcraft", "preco": "49,90" },
{ "nome": "Diablo 3", "preco": "89,90" },
{ "nome": "StarCraft 2", "preco": "49,90" }
]
}
Agora basta criar um arquivo com o nome index.htm e inserir o conteúdo abaixo.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
</head>
<body>
<input type="button" name="pesquisar" onclick="pesquisar();" value="pesquisar"/>
<script>
function pesquisar () {
var request = new Ajax.Request('conteudo.htm', {
'method' : 'post',
'parameters' : {
'codigo' : '1'
},
'onComplete' : function(response) {
var text = response.responseText.stripTags();
// Transformo o texto em objeto
var objeto = text.evalJSON();
var jogos = objeto.jogos;
var str = "";
jogos.each(function(jogo) {
str += jogo.nome + ' ';
str += jogo.preco + '\n';
});
alert(str);
}
});
}
</script>
</body>
</html>
Agora é necessário que os dois arquivos estejam no mesmo diretório para que o exemplo funcione.
Clicando no botão pesquisar será feita uma consulta via Ajax para conteudo.htm retornando os valores do arquivo.
Caso tenha alguma duvida uma outro opinião sobre o Post deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais e Posts aqui apresentados.
Tags:
ajax,
javascript,
JSON,
Prototype,
SOAP,
XML
Oct 28
Hoje estava conversando com um amigo que começou a estudar AJAX
para fazer uma entrevista de emprego para programador Jr e que pediam conhecimentos básicos de PHP, AJAX e JQuery.
Perguntei para ele o que você entende por AJAX?
“É um bagulho que pega informações do lado servidor sem
precisar recarregar a página.”
A resposta esta certa e o conceito é este.
Então hoje resolvi criar um post sobre o que é o tal de AJAXem um
exemplo pratico e simples de entender que mostrei para meu amigo.
Vamos usar o JQuery para fazer a conexão AJAX.
No exemplo vamos pegar o conteúdo de uma pagina “texto.html” e adicionar
o conteúdo na página “index.html” em uma tag span.
Vamos criar uma página index.html com o código abaixo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EXEMPLO BASICO DO USO DO AJAX COM JQUERY</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<input type="button" onclick="ajax();" value="Pegar texto" name="Pegar texto" />
<br />
<span id="conteudo_ajax"></span>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ajax () {
// Caso queira limpar o valor do elemento antes de adicionar remova o comentario abaixo.
//$("#conteudo_ajax").empty();
jQuery.ajax({
type: "get", // Defino o método de envio POST / GET
url: 'texto.html', // Informo a URL que será pesquisada.
success: function(html){
$("#conteudo_ajax").append(html); // Adiciono o valor dentro do elemento.
}
});
}
</script>
Agora crie uma página texto.html com o texto para pesquisa
Texto que foi pego usando AJAX.
O código é simples mas já dá uma idéia de como funciona o AJAX para quem esta começando a estudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
É isso pessoal uma ótima semana e até o próximo post.
Tags:
ajax,
iniciante,
JQuery,
PHP
Aug 14
Não é possível fazer upload de arquivo via Ajax porem alguém encontrou a solução usando iframe. Vamos chamar de fake upload via Ajax. No AJAX F1 tem um tutorial de como fazer este sistema de AJAX file upload.
Um leitor do solicitou uma ajuda com a listagem do itens após o upload do arquivo e também para remover ele. Resolvi criar um sistema baseado no AJAX F1 e disponibilizar.
O sistema esta bem crú então conforme for passando o tempo vou melhorar o código.
Aqui esta o link para o dowload do exemplo com css e imagens.
No exemplo aqui postado esta sem o css para o código fica menor.
Vamos criar um arquivo index.php e colocar o código abaixo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enviar e Remover Arquivos</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function startUpload(){
// Quando inicia o Upload o elemento a mensagem de progreso fica visível e o formulário é ocultado.
document.getElementById('f1_upload_process').style.visibility = 'visible';
document.getElementById('f1_upload_form').style.visibility = 'hidden';
return true;
}
function stopUpload(success,file){
var result = '';
if (success == 1){
// Caso o retorno do envio do arquivo vindo do iframe seja 1 ele adiciona o arquivo na lista.
result = '<span>O arquivo foi enviado com sucesso!<\/span><br/><br/>';
adicionar(file);
}
else {
// Se ocorrer erro mostra a mensagem.
result = '<span>Ocorreu um erro na hora de enviar o arquivo!<\/span><br/><br/>';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" value="Upload" /><\/label>';
document.getElementById('f1_upload_form').style.visibility = 'visible';
return true;
}
// Remove elementos
function removeElement(id) {
// Declara variável lista que indica onde o elemento será removido.
var lista = document.getElementById('lista');
// Declara variavel elemento que indica qual elemento será removido.
var elemento = document.getElementById(id);
// Função removeChild irá procurar elementos que estão dentro da variável lista com o valor
// da variavel elemento para remover.
lista.removeChild(elemento);
}
// Adiciona elementos basedo no valor do file input
function adicionar(id) {
// Pega a id do item da lista criado baseado no nome do arquivo
var valor = id;
// Cria uma variavel com referencia ao Id do Elemento
var lista = document.getElementById('lista');
// É criado uma tag <li> que contem informação do elemento adicionado.
// Também é adicionado um <input> do tipo hidden com o nome do arquivo.
// Estou usando o nome do arquivo como ID na lista criada.
var dado = '<li id="element_' + valor + '">'
+ '<form action="delete.php" method="post" target="delete_target">'
+ '<label for="file">' + valor + '</label>'
+ '<input name="file" value="' + valor +'" type="hidden"/>'
+ '<input id="item_' + valor + '" type="submit" value="Remover" name="Remover"/></form></li>';
// Pega o código HTML dentro da lista e adiciona novos registros.
lista.innerHTML = lista.innerHTML + dado;
return true;
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header"><div id="header_left"></div>
<div id="header_main">Enviar e Remover Arquivos</div><div id="header_right"></div></div>
<div id="content">
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
<!-- Mensagem de progresso de envio do arquivo -->
<p id="f1_upload_process">Carregando...<br/><img src="loader.gif" /><br/></p>
<p id="f1_upload_form" align="center"><br/>
<label>Arquivo:
<input name="myfile" id="myfile" type="file" size="30" />
</label>
<label>
<input type="submit" name="submitBtn" value="Enviar" />
</label>
</p>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
</div>
<div id="arquivos">
<fieldset>
<legend>Arquivos</legend>
<div>
<!-- Lista onde será adicionado a relação dos arquivos enviados -->
<ul id="lista"></ul>
</div>
<iframe id="delete_target" name="delete_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</fieldset>
</div>
<div id="footer">
<a href="http://www.ajaxf1.com" target="_blank">Powered by AJAX F1</a> /
<a href="http://www.phaneronsof.com" target="_blank">Powered by Phaneronsoft</a>
</div>
</div>
</body>
Agora vamos criar um arquivo php que o iframe irá solicitar para enviar o arquivo. Vamos nomear de upload.php
<?php
// Modifique o endereço do upload aqui
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
// Pega o nome do arquivo para devolver para a lista HTML via Javascript.
$file_name = $_FILES['myfile']['name'];
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
//Caso o arquivo seja enviado com sucesso retorna 1.
$result = 1;
}
sleep(1);
?>
<!-- Quando este arquivo é solicitado no Iframe ele irá enviar para a função da pagina index.php o resultado php passando para a função em JS -->
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>,'<?php echo $file_name; ?>');</script>
E por ultimo criar um arquivo com o nome delete.php que irá remover o arquivo que foi enviado.
<?php
// Modifique o endereço do upload aqui
$destination_path = getcwd().DIRECTORY_SEPARATOR;
// Pega o nome do arquivo para devolver para a lista HTML via Javascript ara ser removido da lista.
// Estou usando o nome do arquivo como ID na lista.
$file = $_POST['file'];
$target_path = $destination_path. $_POST['file'];
@unlink($target_path);
sleep(1);
?>
<!-- Quando este arquivo é solicitado no Iframe ele irá enviar para a função da pagina index.php o resultado php passando para a função em JS -->
<script language="javascript" type="text/javascript">window.top.window.removeElement('element_<?php echo $file; ?>');</script>
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
Tags:
ajax,
Upload
Comentários Recentes