Ajax

[Shoxsz]

Olá pessoal, estou fazendo uma página web, na página de login escolhi usar ajax para que possa acessar o BD sem recarregar a página, mas acontece que no método para receber os dados, o conteúdo da página retornada é nulo, na página de teste existe apenas um 'echo' justamente para ter certeza que terá algo escrito lá, então acho que o problema é no método 'open', estou passando apenas o nome do arquivo php para ele, acho que ele não está conseguindo encontrar a página, também já passei a url toda pra ele e ainda assim ele não pega o conteúdo da página, pelo que pesquisei na web, todos os exemplos usam apenas o nome da página, alguém sabe me dizer porque não está funcionando?

function sendData(){	//Novo Request	linkReq = createRequest();				if(linkReq != undefined){		//Pegar dados		var email = document.getElementById('email');		var password = document.getElementById('password');		//Montar requisição		linkReq.open("POST","auth.php",true);		linkReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');		linkReq.onreadystatechange = receiveData;		var params = "email="+email.value+"&password="+password.value;						//Enviar		linkReq.send(params);	}};

Aqui a função receiveData:

function receiveData(){	//Verificar pelo estado "4" de pronto	if (linkReq.readyState == '4')		alert(linkReq.responseText); //teste de conteúdo}

 e a página php possui apenas um echo como já disse.

 

Agradeço a atenção de todos.

[Mog.Lucas]

Podem ser várias coisas.. você precisa "debugar" e verificar em qual parte da requisição está o problema.

 

Uma requisição HTTP simples vai de Cliente -> Servidor- > Cliente. Nesse caminho você pode ter, por ex, erro 404, onde o destino da requisição não é encontrado.

Você possui algum debugador como o Firebug ou o HttpWatch Professional, ou ainda o console do Chrome, para saber o resultado dessa requisição? Se for 404, o arquivo auth.php está no mesmo diretório do arquivo atual?

 

[Shoxsz]

Comecei a usar o fireBug alguns dias atrás, mas os breakpoints na função 'receiveData' não funcionam, o auth.php está na mesma pasta que o arquivo atual.

[Virneto]

@Shoxsz,

 

O firebug será mesmo uma boa ajuda. No separador "rede" ou "network" você pode verificar se o pedido é feito e se leva dados.

Confirme também se está correta esta sua linha de código:

var params = "email="+email.value+"&password="+password.value; //não sera antesvar params = "email=" + email + "&password=" + password;

[Shoxsz]

a variável params recebe este valor: "email=123&password=1"(retirado do firebug), e pelo que vi, estou recebendo erro 404.

 

primeira linha do cabeçalho http de requisição: "POST /auth.php HTTP/1.1"

[Virneto]

Em seu browser abra sua página onde está a corer o logIn e no url adicione /auth.php, por exemplo:

seu url onde executa -> website/login.php  mude para  -> website/auth.php

 

deverá obter o mesmo echo do que o request.

[Mog.Lucas]

Você está usando redirecionamento de URL (mod_rewrite, .htaccess)?

Quando você passa o mouse em cima da linha do firebug (na aba network), sem clicar, qual endereço aparece?

 

Novamente com o mouse em cima da requisição, botão direito -> copiar localização (copy location?!) -> abre uma aba no navegador -> control+v.. funciona?

[Shoxsz]

aparece a url completa(o "truque" que Mog.Lucas disse realmente funcionou), mas antes, um esclarecimento: quando disse que estava recebendo o erro 404 foi um erro(me desculpem por isso), eu tinha olhado em outras requisições, mas a questão é, o código da resposta é 200(OK) e a resposta é exatamente o que a página php escreve: "ola", mas só que não esta aparecendo esse valor no alert, não sei porque.

  

[DiF]

Olá, uma alternativa é usar jQuery. Na minha opinião facilita muito quando precisamos de ajax.

$(document).ready(function(){                //recebe em variáveis os valores dos campos	var e =  $('#email').val();        var p = $('#password').val();	$('#seuBotaoSubmit').click(function(e){           //mesmo que return false           e.preventDefault();           //função ajax           $.ajax({                url: 'auth.php',                dataType: 'html',                data: 'email=' + e +'password='+p,                success: function(data){                             alert(data);                          },                error: function(data){		           alert(data);                       };           });        });});

[Shoxsz]

hmm, entendo, muito do que achei na internet era em jQuery e eu sabia que era questão de tempo até que eu cedesse e baixasse a API, vou começar a utiliza-lá, mas ainda assim me intriga muito não saber porquê diabos o alert não mostra o valor contido em responseText.

[Mog.Lucas]

Depende muito do seu código. Você pode fazer o seguinte pra descobrir o motivo:

if (linkReq.readyState == '4'){ console.log(linkReq.responseText); // debuga o responseText console.log(typeof linkReq.responseText); // Debuga o responseText console.log(typeof linkReq); // Debuga o objeto linkReq alert(linkReq.responseText);}

Só executar com o firebug aberto na aba "Console", onde serão gravados os logs acima. Pelo que vi da sua função, você usa a variável (objeto) linkReq, mas como você está dentro de outra função (e a variável linkReq não é global), essa outra função (recieveData) não tem acesso a ele. Ou seja, esse objeto não existe.
 

Mas o debug acima vai dizer..
 

PS: O código acima é apenas para te matar a curiosidade.. não existem motivos para não migrar para o jQuery (ou outra biblioteca tão potente quanto)

[Shoxsz]

funciona, no chorme o objeto não é nulo mas o conteúdo de 'responseText' é, mas no IE, o objeto não é nulo e o seu conteúdo é o esperado, mas para que funcione eu devo ficar pressionado o botão até que o 'alert' apareça, caso contrário, nada acontece.

Comecei a ver jQuery e vou tentar implementar com ele, depois posto o resultado.

 

_EDITADO_

Testei com o jquery, agora ele "funciona", mas no entanto não estão reconhecendo os índices 'email' e 'password' na variável '$_POST', código usado é:

(function($) {	$(document).ready(function(){					//recebe em variáveis os valores dos campos		var e =  $('#email').val();		var p = $('#password').val();		$('#btt_login').click(function(e){	 			   //mesmo que return false			   e.preventDefault();	 			   //função ajax			   $.ajax({					url: 'auth.php',					dataType: 'html',					data: "email=" + e /* ou e.value ou $('#email').val()*/ + "&password="+ p,					success: function(data){								 alert(data); 							 },					error: function(data){					   alert(data);						   }			   });			});	});})(jQuery);

a url retorna é bem esquisitinha: "http://localhost/site/auth.php?email=[object%20Object]&password=", o código acima foi fornecido por 

dif

[DiF]

No jQuery, para pegar o valor do campo usa-se a função val().

 

$("#seucampo").val();

 

 

Retifico a linha 15 do post #09:

data: {email: e, password: p}

ps: tive que consultar meu livro Ajax com jQuery do Mauricio samy Silva

 

acho que agora deve funcionar como o esperado.

 

Edit: Só para conhecimento, o jQuery possui uma função que pega todos os campos e serializa, para evitar que você escreva um "data" enorme caso tenha muitos campos.

 

ps: se quiser saber outros parametros da função $.ajax()  veja:  http://www.webmaster.pt/requisicoes-ajax-jquery-2216.html

exemplo:

//Serializa todo seu formulário em uma variávelvar dados = $('form').serialize();//parametro da função $.ajax()data: dados;

[Shoxsz]

hmm, dei uma linda no link e vi que faltava o especificar o tipo de requisição, no caso POST, agora sim ele está funcionando e posso dar continuidade ao site  .

 

Então gostaria de agradecer a ajuda de todos, muito obrigado mesmo.