더 간단한 답변을 시도하겠습니다.
문제 설명
먼저 서버에서 페이지가 제공 될 때 이벤트 흐름을 이해합니다.
- 먼저 PHP가 실행되면 클라이언트에 제공되는 HTML이 생성됩니다.
- 그런 다음 HTML이 클라이언트에 전달되고 PHP가 완료되면 코드가 서버를 떠나면 PHP가 완료되어 더 이상 액세스 할 수 없다는 것을 강조하고 싶습니다.
- 그런 다음 JavaScript가 포함 된 HTML이 클라이언트에 도달하여 해당 HTML에서 JavaScript를 실행할 수 있습니다.
따라서 여기서 기억해야 할 핵심은 HTTP는 stateless 입니다. 요청이 서버를 떠나면 서버는이를 만질 수 없습니다. 따라서 우리의 옵션은 다음과 같습니다.
- 초기 요청이 완료된 후 클라이언트에서 더 많은 요청을 보냅니다 .
- 초기 요청에서 서버가 말한 내용을 인코딩하십시오.
솔루션
그것은 당신이 스스로에게 물어봐야 할 핵심 질문입니다.
웹 사이트 나 응용 프로그램을 작성하고 있습니까?
웹 사이트는 주로 페이지 기반이며 페이지로드 시간은 최대한 빨라야합니다 (예 : Wikipedia). 웹 애플리케이션은 AJAX를 많이 사용하고 클라이언트에게 빠른 정보 (예 : 재고 대시 보드)를 얻기 위해 많은 왕복을 수행합니다.
웹 사이트
초기 요청이 완료된 후 클라이언트에서 더 많은 요청을 보내면 상당한 오버 헤드가있는 더 많은 HTTP 요청이 필요하므로 속도 가 느립니다 . 또한 AJAX 요청을 수행하려면 완료시 핸들러가 필요하므로 비동기 성 이 필요합니다 .
나는 것 없는 또 다른 요청을 추천 사이트 응용 프로그램이 아닌 서버에서 해당 정보를 얻기 위해.
변환 및로드 시간에 큰 영향을주는 빠른 응답 시간을 원합니다 . 이 경우 초기 가동 시간 동안 Ajax 요청이 느리고 필요하지 않습니다.
이 문제를 해결하는 두 가지 방법이 있습니다
- 쿠키 설정 -쿠키는 서버와 클라이언트 모두가 읽을 수있는 HTTP 요청으로 전송 된 헤더입니다.
- 변수를 JSON으로 인코딩-JSON은 JavaScript 객체와 매우 유사하며 대부분의 JSON 객체는 유효한 JavaScript 변수입니다.
쿠키를 설정하는 것은 그리 어렵지 않습니다. 값을 지정하면됩니다.
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.
쿠키는 작은 데이터에 좋습니다. 이것이 추적 서비스가 자주하는 일입니다.
더 많은 데이터가 있으면 대신 JavaScript 변수 내에서 JSON으로 인코딩 할 수 있습니다.
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
가정 $value되고 json_encode는 PHP 측에 수 (보통이다). 이 기술은 예를 들어 스택 오버플로가 채팅에서 수행하는 작업입니다 (PHP 대신 .NET 만 사용).
신청
응용 프로그램을 작성하는 경우-갑자기 초기로드 시간이 항상 응용 프로그램의 지속적인 성능만큼 중요하지는 않으며 데이터와 코드를 별도로로드하기 위해 비용을 지불하기 시작합니다.
내 대답은 여기에 어떻게 자바 스크립트에서 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에서 자바 스크립트 아무것도 주입 할 때 XSS 공격 벡터를 알고 있습니다. 그건 아주 제대로 값을 탈출하기 어렵다과는 상황이다. XSS를 처리하는 방법을 잘 모르거나 모르는 경우이 OWASP 기사 , 이 기사 및 이 질문을 읽으십시오 .
myPlugin.start(<?=$val?>의도적으로 없습니까? "이것은 때때로 작동한다"는 것이 사실입니까?