I found a good Tutorial: tutorial
but it doesn't work locally. The Problem is, that the responsetext returns my entire php code. I double-click at my ajaxclock.html and use Firefox. Surprisingly, it works on the server.
Here the code: ajaxclock.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
".dtd">
<html xmlns="" xml:lang="en" lang="en">
<head>
<title>AJAX Tutorial</title>
</head>
<body>
<div id="time"></div>
<button onclick="getTime();">Aktualisieren</button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
var req = getXmlHttpRequestObject();
window.onload = getTime();
function getXmlHttpRequestObject()
{
if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert('Ajax funktioniert bei Ihnen nicht!');
}
}
function getTime()
{
if(req.readyState == 4 || req.readyState == 0)
{
req.open('GET', 'ajaxclock.php', true);
req.setRequestHeader("Content-Type","text/plain");
req.onreadystatechange = setMessage;
req.send(null);
}
}
function setMessage()
{
if(req.readyState == 4)
{
var response = eval('(' + req.responseText+ ')');
document.getElementById('time').innerHTML = response.time;
}
}
ajaxclock.php
<?php echo '{"time": "'.date("H:i:s").'"}'; ?>
I found a good Tutorial: tutorial
but it doesn't work locally. The Problem is, that the responsetext returns my entire php code. I double-click at my ajaxclock.html and use Firefox. Surprisingly, it works on the server.
Here the code: ajaxclock.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>AJAX Tutorial</title>
</head>
<body>
<div id="time"></div>
<button onclick="getTime();">Aktualisieren</button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
var req = getXmlHttpRequestObject();
window.onload = getTime();
function getXmlHttpRequestObject()
{
if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert('Ajax funktioniert bei Ihnen nicht!');
}
}
function getTime()
{
if(req.readyState == 4 || req.readyState == 0)
{
req.open('GET', 'ajaxclock.php', true);
req.setRequestHeader("Content-Type","text/plain");
req.onreadystatechange = setMessage;
req.send(null);
}
}
function setMessage()
{
if(req.readyState == 4)
{
var response = eval('(' + req.responseText+ ')');
document.getElementById('time').innerHTML = response.time;
}
}
ajaxclock.php
<?php echo '{"time": "'.date("H:i:s").'"}'; ?>
- of course PHP needs the server to process PHP directives. otherwise, without a server, AJAX just returns whatever was written in the file! – Joseph Commented Apr 17, 2012 at 6:10
-
Why is that code setting the request's Content-Type to
text/plainwhen there is no message body at all? – Quentin Commented Apr 17, 2012 at 6:13 -
1
This isn't a good tutorial, it makes use of a global
reqvariable. There is no reason to use globals for this. – Quentin Commented Apr 17, 2012 at 6:13 - For me, The problem was that I didn't use the php opening and closing tags " <?php " and " ?> " , I added them and it fiwed the problem – samouray Commented Mar 24, 2016 at 13:32
2 Answers
Reset to default 6Surprisingly, it works on the server.
PHP is a server side technology. It will only ever work on a server (specifically a server configured to run PHP programs).
If you use it without such a server then nothing will execute the PHP and it will be delivered to the browser in its raw state.
I had the same problem. Did not find any reason until I realized that the LiveServer Plugin in Firefox (97.0.1 (64-Bit)) didn't execut the php file. For whatever reason. I use XAMPP (v.3.2.4) and tried it the "old" way via: localhost/project/index.php and it worked fine for me again.