Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom pessoal eu vou tentar passar como usar o ajax em sistemas php de um modo facil
muitos devem ter visto varios exemplos em ajax, mas ainda nao conseguiu fazer sua propria aplicação entao quero mostrar um exemplo facil onde qualquer pessoa consegue fazer um sistema em ajax basta olhar o exemplo e edita-lo, implementado ate aprender, bom vamos ao que interessa
primeiro a parte javascript onde criaremos um objeto ajax para usarmos em qualquer lugar de sua pagina
//Prototype e herança de objeto
//crio um objeto principal e outros objetos que serao as subClasse para o primeiro, fazendo a herança de objetos
function ajax() {
}; this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
this.xmlhttp = false;
}
}
}
return true;
}ajax.prototype.ocupado = function() {
estadoAtual = this.xmlhttp.readyState;
return (estadoAtual && (estadoAtual < 4));
}ajax.prototype.processa = function() {
if (this.xmlhttp.readyState == 4 && this.xmlhttp.status == 200) {
return true;
}
}if (!this.xmlhttp) {
this.iniciar();
} if(metodo == "GET") {
this.xmlhttp.open("GET", url, modo);
this.xmlhttp.send(null);
} else { this.xmlhttp.open("POST", url, modo);
this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
this.xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
this.xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
this.xmlhttp.setRequestHeader("Pragma", "no-cache");
this.xmlhttp.send(url);
} return unescape(this.xmlhttp.responseText.replace(/\+/g," "));
}
}
return false;
}para usar basta fazer assim:
crie uma função
function teste(url, metodo, modo)
{
//aqui eu pego o valor do campo text
var campo = document.getElementById('form1').texto.value;
//estancio o ajax
remoto = new ajax();
//envio os dados para uma pagina php passando os parametros texto = valor do campo text
envia = remoto.enviar(url + "?" + "texto=" + campo, metodo, modo );
document.getElementById("conteudo").innerHTML = envia;
}pagina php que recebera os dados
receber.php
<?php
$texto = $_REQUEST["texto"];echo urlencode($texto);
?>e na função do botao você pode mudar em vez de passar POST pode passar por GET e mudar a url etc..
para um melhor entendimento eu coloquei o script completo para download basta analisarem ele
qualquer duvida posta ai
no proximo tutorial vou explicar como fazer um sistema de login com ajax
e um sistema de cadastro editar excluir usuarios com ajax
ate a proxima
beleza, vou ver se consigo fazer os outros tutoriais, falta é tempo = )
Show de bola viu.. tbm ja tinha tentado varias vezes e sem sucesso.. graças a essa dica to conseguindo fazer;; Pretendo implementar em um sistema de notas.vlw Fabyo.. excelente post.
beleza qualquer duvida posta ai
Excelente Fabyo, muito bom.
Para contribuir também, fiz algumas alterações para deixar o sistema mais acessível, ou seja, mesmo que não tiver o javascript habilitado pode usar o sistema.
Ficaria assim:
O form:
<form action="receber.php" method="post" name="form1" id="form1"> <input type="text" name="texto" id="texto" /> <input type="submit" name="sbtAjax" id="sbtAjax" value="Enviar Ajax" /></form>
No form, realizei duas alterações, sendo elas:
* setei a action para a página que recebe o texto e troquei o button por um submit. Se o cara não tiver o js habilitado o form será redirecionado para a página (receber.php) e se tiver será usado o ajax, assim:
Funcoes.js
function loadFunctions() { teste('receber.php','POST',false);}window.onload = loadFunctions;function teste(url, metodo, modo) { var btn = document.getElementById('sbtAjax'); // referência ao botão de submit btn.onclick = function() { // Ao clicar no botão de submit var campo = document.getElementById('form1').texto.value; remoto = new ajax(); envia = remoto.enviar(url + "?" + "texto=" + campo, metodo, modo ); document.getElementById("conteudo").innerHTML = envia; return false; }}Assim, vejo duas vantagems, a separação da estrutura ((x)html) e do comportamento (js) e claro mais acessível.
http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
Fabão como sempre arebentando... tu ta viciando em AJAX em cuidado que é um produto quimico e tem que ficar longe de alcance de crianças...hahhaha :P
hehe é mesmo = )
e Leandro valeu pela contribuição tbm
abraços
Ótimo tutorial Fabyo. Parabéns.Já tinha lido algo sobre o assunto, mas não tinha colocado a "mão na massa". Esse será o meu primeiro passo com Ajax . :P
olaaa dexa eu ver se eu entendi.....
o codigo passado pelo fabyo serve por exemplo: se eu fizer um form e na página recebe eu fizer com que ele seja guardado em banco as variaveis do form serão passado ou get ou post e processadas sem atualizar a página?
as página la em cima não tem link entre elas tipo
<?php include "minhapagina.js" ?>
só um exemplo
e dai se eu fizer um form e mandar pra recebe essa página javascript tem que estar na recebe?
eu so nuam intendi o vinculo das página tipo quando eu der enviar vai pra página recebe.. e o cosigo ajax??teria que estar na recebe né??
é isso que eu to meio boianu hahaha
as páginas foram feitas cada uma com seu codigo mais a linkagem de uma página puxando a outra eu não vi..
vlw
óóóóiaaaaa hahahaha disculpa meu estado de alegriaa hahahaha eu ACHO que consigui, e é o que eu senpre quis aprender, issoo é muito show hahahaha
pow fabyaoo show de bola cara sem palavras http://forum.imasters.com.br/public/style_emoticons/default/yay.gif
ele da reflesh quando envia?
eu coloquei todos os codigos do fabyo numa página só
Tenho um conjunto aqui + simples e + facil de ser entendido:
var xmlHttp;
function Cria_XmlHttpObject(){
var xmlHttp = null;
//cria o objeto XMLHttpRequest pra firefox, mozila, opera, etc
try {
xmlHttp = new XMLHttpRequest();
}
//cria o objeto XMLHttpRequest pra internet explorer, 6,0 + e posteriormente para internet explorer
catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function carregaPagGet(pagina, id, carregar){
xmlHttp = Cria_XmlHttpObject();
if (xmlHttp == null) {
alert('O seu Broswer n�o suporta AJAX!');
return;
}
var objetoHTML = document.getElementById(id);
if (carregar == true) {
objetoHTML.innerHTML = "<div id='carregando'>Carregando...</div>" + objetoHTML.innerHTML;
}
xmlHttp.open("GET", pagina, true);
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
objetoHTML.innerHTML = xmlHttp.responseText;
}
else
if (xmlHttp.status == 404) {
objetoHTML.innerHTML = "<div>P�gina n�o encontrada.</div>";
}
}
}
xmlHttp.send(null);
}A segunda é para carregar paginas com o método GET...
É só especificar a página a ser carregada e o ID do elemento na qual ela será carregada...
Primeiramente parabens pelo tutorial, excelente o mesmo.
Porém estou com uma dúvida, estou tentando colocar o script para rodar, mas ele não retorna nada, eu devo colocar algo em algum lugar? Preciso inserir algum código a mais para linkar o ajax ao PHP?
procure tutoriais sobre jquery
muito bom esse tutorial agora sim eu consegui entender como funciona o esquema do ajax ,dai no receber.php eu posso pegar o valor do texto e salvar num banco ,nao acredito que ate eu consegui fazer funcionar ,nossa valeu mesmo, não vejo a hora de você postar o outro tutorial sobre editar em ajaxvaleu!!!