javascript - Ajax call to PHP is returning nothing

I'm trying to make my first ajax example working on my MAMP.

my ajax.html looks like:

my ajax.js looks like:

function ajax()
{
>>var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","http://localhost:8888/ajax.php",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {
    document.getElementById("test").innerHTML=xmlhttp.responseText;
    }
  }
}

my ajax.php looks like:

echo 'hello world';

I detected response header from firebug:

Response Headers
Connection Keep-Alive
Content-Length 11
Content-Type text/html
Date Mon, 05 Nov 2012 18:57:46 GMT
Keep-Alive timeout=5, max=99
Server Apache/2.2.22 (Unix) mod_ssl/2.2.22 OpenSSL/0.9.8r DAV/2 PHP/5.4.4
X-Pad avoid browser bug
X-Powered-By PHP/5.4.4

but nothing in response text and nothing changed in my html.

Anyone could help me out please?

Thanks!

Answer

Your problem is that you're trying to do a cross domain request. The browser prevents it due to same origin policy.

The standard solution is to set CORS headers in your PHP to allow those requests.

For example :

header("Access-Control-Allow-Origin: *");
?>