Problema com AJAX

topastop

Power Member
Boas!
Estou a tentar alterar um texto de uma página .html utilizando uma função chama um ficheiro .php, mas não estou a conseguir por isto a funcionar...

Eis o que tenho:
.html:

Código:
<!DOCTYPE html>
<html>
<head>
<script>
function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "test.php");
    httpRequest.send();
    return httpRequest.responseText;
}


function Start() {
var result = foo();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}


</script>
</head>
<body>


<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="Start()">Change Content</button>


</body>
</html>

e o .php:

PHP:
<?php
echo "Hello!";
?>


Alguém sabe como resolver este problema?
 
O teu problema, basicamente, é estares a ler a resposta "cedo" demais. Repara que estás a aceder ao responseText logo a seguir a enviares o GET, e nada te garante que o servidor já tenha respondido.

A API do XMLHttpRequest (o JavaScript/DOM API no geral) são assíncronos, e tens de gerir essa questão de forma adequada. Neste caso, o ciclo de vida do pedido HTTP vai despoletar eventos, os quais terás de "escutar" com um event listener. Basicamente, tens de passar uma função que será invocada quando houver resposta por parte do servidor. Nessa função, verificas o estado do pedido, o código da resposta HTTP (estás à espera de um 200 - OK) e, se estiver tudo OK, fazes o que tens a fazer (neste caso, aceder a um elemento do DOM e alterar o conteúdo do dito). Vê este exemplo/documentação: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
 
Última edição:
Hum experimentei aguardar readyState e o status do xmlhttp, mas continua sem funcionar. Sabes como poderia fazer?

Código:
<!DOCTYPE html><html>
<head>
<script>
function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "ajax.php");
    httpRequest.send();
    xmlhttp.onreadystatechange=function()
     {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       return httpRequest.responseText;
       }
    })
       
}


function Start() {
var result = foo();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}


</script>
</head>
<body>


<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="Start()">Change Content</button>


</body>
</html>
 
A variável result não vai ter o resultado da função "foo" porque ela nunca chega a retornar nada. O "return" que estás a fazer, se reparares bem, já está dentro do bloco de outra função. O que tens a fazer, na forma mais simples, é alterar o DOM dentro da função listener.
 
Muito obrigado pela ajuda, já está a funcionar.
Posto aqui o código final caso alguém também tenha este problema no futuro:

Código:
<!DOCTYPE html>
<html>
<head>
<script>
function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "test.php");
    httpRequest.send();
    httpRequest.onreadystatechange=function()
  {
  if (httpRequest.readyState==4 && httpRequest.status==200)
    {
    document.getElementById("myDiv").innerHTML=httpRequest.responseText;
    return;
    }
  }


}


</script>
</head>
<body>


<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="foo()">Change Content</button>


</body>
</html>
 
Back
Topo