aprenda ajax de uma vez

[Fabyo 66]

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() {
};
//metodo iniciar
ajax.prototype.iniciar = function() {
//logo abaixo tentamos estanciar o objeto XMLHttpRequest() para o IE e os demais navegadores
try{
	this.xmlhttp = new XMLHttpRequest();
}catch(ee){
	try{
		this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try{
			this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(E){
			this.xmlhttp = false;
		}
	}
}
return true;
}
//metodo oculpado
ajax.prototype.ocupado = function() {
estadoAtual = this.xmlhttp.readyState;
return (estadoAtual && (estadoAtual < 4));
}
//metodo processa
ajax.prototype.processa = function() {
if (this.xmlhttp.readyState == 4 && this.xmlhttp.status == 200) {
	return true;
}
}
//metodo envia esperando a url, o metodo get ou post e o modo true ou false
ajax.prototype.enviar = function(url, metodo, modo) {
//se nao existir o objeto xmlhttp ele sera criado com o metodo iniciar
if (!this.xmlhttp) {
	this.iniciar();
}
//se nao estiver oculpado
if (!this.ocupado()) {
//se o metodo passado for get
	if(metodo == "GET") {
		this.xmlhttp.open("GET", url, modo);
		this.xmlhttp.send(null);
	} else {
//se for post		
		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);
	}	
//se estiver ok ele retorna o resultado e ja utilizamos um modo para receber acentos
// usando a função unescape e substituindo os + por espaços mesma coisa que usar urldecode() do php
	if (this.processa) {
//recebe o resultado da da pagina php
		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"];
//passando os dados via urlencode para corrigir problemas de acentuação
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

[MayconMM 0]

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!!!

[Fabyo 66]

beleza, vou ver se consigo fazer os outros tutoriais, falta é tempo = )

[elizeu 0]

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.

[Fabyo 66]

beleza qualquer duvida posta ai

[Leandro Vieira Pinho 0]

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

[Perfect Lion 10]

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

[Fabyo 66]

hehe é mesmo = )

 

e Leandro valeu pela contribuição tbm

 

abraços

[Epyllion 0]

Ó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

[buh 0]

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

[buh 0]

óóóó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ó

[Henrique Barcelos 290]

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 primeira função cria o objeto XMLHttpRequest...

 

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...

[amadeuac 0]

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?

[Alaerte Gabriel 662]

procure tutoriais sobre jquery