Spróbuję prostszej odpowiedzi:
Wyjaśnienie problemu
Po pierwsze, zrozummy przepływ zdarzeń, gdy strona jest obsługiwana z naszego serwera:
- Najpierw uruchamiane jest PHP, które generuje HTML, który jest dostarczany do klienta.
- Następnie HTML jest dostarczany do klienta, po zakończeniu PHP, chciałbym podkreślić, że gdy kod opuści serwer - PHP jest z nim zrobione i nie może już uzyskać do niego dostępu.
- Następnie HTML z JavaScript dociera do klienta, który może wykonać JavaScript na tym HTML.
Tak naprawdę najważniejszą rzeczą do zapamiętania jest to, że HTTP jest bezstanowy . Gdy żądanie opuści serwer, serwer nie może go dotknąć. To pozostawia nasze opcje:
- Wyślij więcej żądań od klienta po zakończeniu pierwszego żądania.
- Zakoduj to, co serwer miał do powiedzenia w pierwszym żądaniu.
Rozwiązania
Oto podstawowe pytanie, które powinieneś sobie zadać:
Czy piszę stronę internetową lub aplikację?
Strony internetowe są głównie oparte na stronach, a czas ładowania strony musi być tak szybki, jak to możliwe (na przykład - Wikipedia). Aplikacje internetowe są bardziej obciążone AJAX i wykonują wiele podróży w obie strony, aby uzyskać szybkie informacje o kliencie (na przykład - pulpit giełdowy).
Stronie internetowej
Wysyłanie większej liczby żądań od klienta po wykonaniu pierwszego żądania jest powolne, ponieważ wymaga większej liczby żądań HTTP, które mają znaczny narzut. Co więcej, wymaga asynchroniczności, ponieważ wykonanie żądania AJAX wymaga modułu obsługi po zakończeniu.
Bym nie polecam co innego żądania , chyba że witryna jest aplikacją dla uzyskania tych informacji z serwera.
Chcesz szybkich czasów reakcji, które mają ogromny wpływ na czas konwersji i ładowania. W tym przypadku wysyłanie żądań Ajax jest powolne i nie jest konieczne.
Istnieją dwa sposoby rozwiązania tego problemu
- Ustaw plik cookie - pliki cookie to nagłówki wysyłane w żądaniach HTTP, które zarówno serwer, jak i klient mogą odczytać.
- Zakoduj zmienną jako JSON - JSON wygląda bardzo blisko obiektów JavaScript, a większość obiektów JSON jest prawidłowymi zmiennymi JavaScript.
Ustawienie pliku cookie nie jest naprawdę trudne, wystarczy przypisać mu wartość:
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
Następnie możesz przeczytać w JavaScript za pomocą document.cookie:
Oto krótki analizator składany z krótką ręką, ale odpowiedź, którą podałem powyżej, ma lepiej przetestowane:
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.
Pliki cookie są dobre dla niewielkiej ilości danych. Właśnie to często robią usługi śledzenia.
Gdy mamy więcej danych, możemy zamiast tego zakodować je za pomocą JSON w zmiennej JavaScript:
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
Zakładając, że $valuejest w json_encodestanie po stronie PHP (zwykle jest). Ta technika jest tym, co robi na przykład przepełnienie stosu na czacie (używając tylko .NET zamiast PHP).
Podanie
Jeśli piszesz aplikację - nagle początkowy czas ładowania nie zawsze jest tak ważny, jak bieżąca wydajność aplikacji, i zaczyna się opłacać, aby ładować dane i kod osobno.
Moja odpowiedź tutaj wyjaśnia, jak ładować dane za pomocą AJAX w JavaScript:
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();
Lub z jQuery:
$.get("/your/url").done(function(data){
// What do I do with the data?
});
Teraz serwer musi zawierać tylko /your/urltrasę / plik zawierający kod, który pobiera dane i robi coś z tym, w twoim przypadku:
<$php
...
$val = myService->getValue(); // Makes an API and database call
echo json_encode($val); // Write it to the output
$>
W ten sposób nasz plik JavaScript prosi o dane i pokazuje je zamiast pytać o kod lub układ. Jest to czystsze i zaczyna się opłacać, gdy aplikacja staje się wyższa. To także lepsze rozdzielenie problemów i pozwala przetestować kod po stronie klienta bez udziału technologii po stronie serwera, co jest kolejnym plusem.
Postscriptum: Musisz być bardzo świadomi XSS wektorów ataków podczas wstrzykiwania czegokolwiek z PHP do JavaScript. To bardzo trudno właściwie uciec wartości i to od kontekstu. Jeśli nie masz pewności, jak postępować z XSS lub nie wiesz o tym - przeczytaj ten artykuł OWASP , ten i to pytanie .
myPlugin.start(<?=$val?>celowy? Czy to prawda, że „czasem to działa”?