我找到了一个很好的教程:
tutorial
原文链接:https://www.f2er.com/ajax/160045.html但它在本地不起作用.
问题是,responsetext返回我的整个PHP代码.
我双击我的ajaxclock.html并使用Firefox.
令人惊讶的是,它适用于服务器.
这里的代码:
ajaxclock.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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").'"}'; ?>