我将尝试一个简单的答案:
问题说明
首先,让我们了解从服务器提供页面时的事件流:
- 首先运行PHP,它将生成供客户端使用的HTML。
- 然后,将HTML交付给客户端,在PHP完成后,我想强调一下,一旦代码离开服务器,PHP就完成了,并且无法再访问它。
- 然后,带有JavaScript的HTML到达客户端,客户端可以在该HTML上执行JavaScript。
所以确实,这里要记住的核心是HTTP是无状态的。请求离开服务器后,服务器将无法触摸它。因此,我们可以选择:
- 初始请求完成后,从客户端发送更多请求。
- 编码服务器在初始请求中必须说的内容。
解决方案
您应该问自己的核心问题是:
我在写网站还是应用程序?
网站主要基于页面,并且页面加载时间需要尽可能快(例如Wikipedia)。Web应用程序的AJAX更为繁重,并且需要执行许多往返操作才能快速获取客户端信息(例如-库存仪表板)。
网站
初始请求完成后,从客户端发送更多请求的速度很慢,因为它需要更多具有大量开销的HTTP请求。而且,它要求异步,因为发出AJAX请求需要一个处理程序以完成请求。
我不建议再次提出请求,除非您的站点是用于从服务器获取该信息的应用程序。
您需要快速的响应时间,这对转换和加载时间有很大的影响。在这种情况下,发出Ajax请求对于初始正常运行时间很慢,因此是不需要的。
您有两种方法可以解决此问题
- 设置cookie -cookie是服务器和客户端均可读取的HTTP请求中发送的标头。
- 将变量编码为JSON -JSON看起来非常接近JavaScript对象,并且大多数 JSON对象都是有效的JavaScript变量。
设置cookie确实不是很困难,您只需为其分配一个值即可:
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
然后,您可以使用JavaScript使用读取它document.cookie
:
这是一个简短的手动解析器,但是我链接到此上方的答案得到了更好的测试:
var cookies = document.cookie.split(";").
map(function(el){ return el.split("="); }).
reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});
cookies["MyCookie"] // Value set with PHP.
Cookies有助于获取少量数据。这就是跟踪服务经常做的事情。
一旦有了更多数据,我们就可以使用JavaScript变量中的JSON对其进行编码:
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
假设$value
是json_encode
能够在PHP端(通常是这样)。例如,此技术就是Stack Overflow对其聊天进行的处理(仅使用.NET而不是PHP)。
应用
如果您正在编写应用程序,突然之间,初始加载时间并不总是与应用程序的持续性能一样重要,并且开始获得回报,分别加载数据和代码。
我在这里的答案说明了如何在JavaScript中使用AJAX加载数据:
function callback(data){
// What do I do with the response?
}
var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState === 4) { // Request is done
if (httpRequest.status === 200) { // successfully
callback(httpRequest.responseText); // We're calling our method
}
}
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();
或使用jQuery:
$.get("/your/url").done(function(data){
// What do I do with the data?
});
现在,服务器只需要包含一个/your/url
路由/文件,其中包含可以获取数据并对其执行某些操作的代码,在您的情况下:
<$php
...
$val = myService->getValue(); // Makes an API and database call
echo json_encode($val); // Write it to the output
$>
这样,我们的JavaScript文件会要求数据并显示它,而不是要求代码或布局。这是更干净的应用程序,随着应用程序变得更高,它开始获得回报。它也可以更好地分离关注点,并且可以在不涉及任何服务器端技术的情况下测试客户端代码,这是另一个优点。
附言:从PHP到JavaScript注入任何东西时,您必须非常了解XSS攻击媒介。这是非常难以逃脱正确的价值观和它的上下文敏感的。如果您不确定如何处理XSS,或者不知道它-请阅读此文章OWASP,这个和这个问题。
myPlugin.start(<?=$val?>
故意的吗?“有时可行”是真的吗?