试试下面的例子。替换指向您自己服务器上的页面/服务的 URL,该 URL 返回下一个字符串值(仅此而已)。请务必将您的响应(来自服务器)中的内容类型设置为“文本/纯文本”。
正如其他帖子中所述/指示/暗示的那样,问题在于 HTTP 是无状态的协议。浏览器发送请求。服务器发送响应。结束。:-) PHP 代码只在服务器上执行,它的工作只是为 Web 浏览器生成内容。但除此之外,它不会以任何方式与浏览器交互。一旦 PHP 代码生成的所有内容都发送到浏览器,PHP 代码就完成了。您应该阅读一些关于输出缓冲等概念的内容。您可以稍微控制一下您的 PHP 代码是缓冲所有输出,然后一次性将其发送到浏览器,还是在生成时将其涓涓细流。但是您根本无法使用 PHP 代码以交互方式更改网页上的任何内容。一旦你将它发送到浏览器,它就会被发送,仅此而已。你不能把它召回并改变它。
现在,话虽如此,您当然可以使用 PHP 代码发出 JavaScript 代码,然后这些代码可以与浏览器中的 DOM 进行交互,还可以通过 AJAX 回调服务器上的不同资源,这些资源又可以是不同的 PHP 页面做任何你需要他们做的事情并返回结果以在浏览器中显示或进一步处理(这可能导致对服务器的额外 AJAX 调用,尽管“健谈”通常不等于“好”)。
AJAX(异步 JavaScript 和 XML)是一种技术,可让您从网页调用回Web 服务器,而无需重新加载整个页面。您可以使用诸如 setInterval() 和 setTimeout() 之类的 JavaScript 计时器函数来实现延迟或创建重复事件,例如文本更新。不要太沉迷于“AJAX”中的“XML”。一种称为 JSON 的更新的数据封装标准已经变得非常流行,并且至少在几乎所有情况下都可以通过 AJAX 使用,就像 XML 一样。 JSON是“JavaScript Object Notation”,标准基本上只是序列化的 JavaScript 数据结构,使用起来非常自然。
事实上,在我下面展示的示例中,既没有使用 XML 也没有使用 JSON(为了简单起见)。但是 XML 或 JSON 都可以很容易地使用,并且可能应该在一个严肃的服务实现中。
XMLHttpRequest对象是使 AJAX 成为可能的魔法位。XMLHttpRequest、setInterval()、setTimeout() 和大量其他 API 使用异步回调。所以这是你需要接受的另一个概念。异步回调只是您传递给的函数,例如, setInterval() 以便在计时器事件发生时能够“回调”(您传递对函数的引用)。同时,您的界面没有锁定等待回调。因此它是异步的。我下面的示例还使用了称为闭包的内联(未命名、匿名)函数,这是另一个对现代 JavaScript 编程非常重要的概念。
最后,我衷心推荐使用 jQuery 之类的东西。好吧,我会推荐 jQuery。还有其他 JavaScript 框架,但我不完全确定再看其他任何一个框架有什么意义。下面的示例不使用 jQuery。
您使用原始示例完成的主要事情是,由于 PHP 仅在服务器上执行,因此使您的页面需要更长的时间才能完全完成渲染,这意味着您的请求需要更长的时间才能与 Web 服务器断开连接,这反过来又是在服务器上占用其他浏览器实例无法使用的连接资源,直到请求在启动后至少 10 秒完成。
<html>
<head>
</head>
<body>
<div id="blah">Watch me change.</div>
<script language="javascript">
// set callback function, to be called every 2 seconds
setInterval( function() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else { // IE6, IE5
xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
// callback function called for each state change, "4" means request finished.
xmlhttp.onReadyStateChange = function() {
if( 4 == xmlhttp.readyState && 200 == xmlHttp.status ) {
document.getElementById("blah").innerHTML = xmlHttp.responseText;
}
}
xmlhttp.open( "GET", "http://source-of-new-string...", true );
xmlhttp.send();
}, 2000 );
</script>
</body>
</html>