클라이언트 측 프로그래밍과 서버 측 프로그래밍의 차이점은 무엇입니까?


498

이 코드가 있습니다 :

<script type="text/javascript">
    var foo = 'bar';
    <?php
        file_put_contents('foo.txt', ' + foo + ');
    ?>

    var baz = <?php echo 42; ?>;
    alert(baz);
</script>

왜 이것이 "bar"를 텍스트 파일에 쓰지 않고 "42"라고 경고합니까?


주의 :이 질문의 이전 개정은 서버의 PHP와 클라이언트의 JavaScript에 관한 것입니다. 문제와 솔루션의 본질적 특성은 클라이언트와 서버에서 같은 언어를 사용하더라도 서버에서 실행될 때 모든 언어 쌍에서 동일합니다. 특정 언어에 대한 답변이 보이면이를 고려하십시오.

답변:


460

코드는 서버 측클라이언트 측으로 완전히 분리 된 두 부분으로 나뉩니다 .

                    |
               ---------->
              HTTP request
                    |
+--------------+    |    +--------------+
|              |    |    |              |
|    browser   |    |    |  web  server |
| (JavaScript) |    |    |  (PHP etc.)  |
|              |    |    |              |
+--------------+    |    +--------------+
                    |
  client side       |      server side
                    |
               <----------
          HTML, CSS, JavaScript
                    |

양측은 HTTP 요청 및 응답을 통해 통신합니다. PHP는 서버에서 실행되며 HTML이 해석되고 JavaScript가 실행되는 클라이언트에 대한 응답으로 전송되는 일부 HTML 및 JavaScript 코드를 출력합니다. PHP가 응답 출력을 마치면 스크립트가 종료되고 새로운 HTTP 요청이 올 때까지 서버에서 아무 일도 일어나지 않습니다.

예제 코드는 다음과 같이 실행됩니다.

<script type="text/javascript">
    var foo = 'bar';
    <?php
        file_put_contents('foo.txt', ' + foo + ');
    ?>

    var baz = <?php echo 42; ?>;
    alert(baz);
</script>

1 단계 : PHP는 <?php ?>태그 사이의 모든 코드를 실행 합니다. 결과는 다음과 같습니다.

<script type="text/javascript">
    var foo = 'bar';

    var baz = 42;
    alert(baz);
</script>

file_put_contents호출은 아무것도 발생하지 않았으며 파일에 "+ foo +"를 썼습니다. 이 <?php echo 42; ?>호출로 인해 출력 "42"가 발생했으며, 이제 해당 코드가 있던 위치에 있습니다.

이 결과 HTML / JavaScript 코드가 이제 클라이언트로 전송되어 평가됩니다. alert그동안 호출은, 작동 foo변수가 임의의 장소에서 사용되지 않습니다.

클라이언트가 JavaScript를 실행하기 전에 모든 PHP 코드가 서버에서 실행됩니다. JavaScript가 상호 작용할 수있는 응답에 PHP 코드가 남아 있지 않습니다.

일부 PHP 코드를 호출하려면 클라이언트가 서버에 새로운 HTTP 요청을 보내야합니다. 가능한 세 가지 방법 중 하나를 사용하여 발생할 수 있습니다.

  1. 브라우저가 새 페이지를로드하게하는 링크입니다.
  2. 서버에 데이터를 제출하고 새 페이지를로드하는 양식 제출.
  3. AJAX와 자바 스크립트 기술이다 요청은, (1, 2 것처럼)하지만, 현재 페이지를 떠나지 않고 서버에 정기적으로 HTTP 요청을합니다.

이러한 방법을보다 자세하게 설명하는 질문이 있습니다.

JavaScript를 사용하여 window.location양식 1을 사용 하거나 양식을 사용하여 브라우저에서 새 페이지를 열도록 하여 가능성 1과 2를 모방 할 수도 있습니다.


1
window.openiframe을 사용 하여 두 번째 페이지를 열거 나 페이지를 로드 할 수도 있습니다 .
jcubic

통신 방법 목록에 WebSocket을 추가하는 것이 좋습니다.
Quentin

드롭 다운 값이 jquery를 통해 업데이트된다고 가정 해보십시오. 사용자가 2 단계를 수행 할 때 "제출"버튼을 통해 서버에 데이터를 제출하고 새 페이지를로드하는 양식 제출이 jquery 업데이트 된 값을 PHP의 컨트롤러로 전달할 수 있습니까? 아니면 jquery를 통해 dom에 추가되었으므로 PHP에 표시되지 않습니까? @deceze
FabricioG

@Fabricio HTTP 요청이 <form>데이터 에서 작성되어 서버로 전송됩니다. Javascript를 사용하여 양식을 조작하여 다른 데이터를 포함 할 수 있습니다. 예, 해당 데이터는 제출 될 때 양식의 일부인 경우 결과 HTTP 요청의 일부가됩니다. 원본 HTML인지 Javascript를 통해 나중에 추가되었는지는 중요하지 않습니다.
deceze

163

PHP 코드가 JavaScript 코드 에서 작동하지 않는 이유를 확인하려면 클라이언트 측서버 측 언어가 무엇 이며 어떻게 작동하는지 이해해야 합니다.

서버 측 언어 (PHP 등) : 데이터베이스에서 레코드를 검색하고 상태 비 저장 HTTP 연결을 통해 상태를 유지 하며 보안이 필요한 많은 작업을 수행합니다. 그것들은 서버에 상주하며,이 프로그램들은 소스 코드를 사용자에게 노출시키지 않습니다.

wikipedia_http : //ko.wikipedia.org/wiki/ 파일의 이미지 : Scheme_dynamic_page_en.svg 이미지 속성

따라서 서버 측 언어가 HTTP 요청을 처리하고 처리한다는 것을 쉽게 알 수 있으며, @deceze가 말했듯이 PHP는 서버에서 실행되어 일부 HTML 및 JavaScript 코드를 출력합니다.이 코드는 클라이언트에 대한 응답으로 전송됩니다. HTML이 해석되고 JavaScript가 실행됩니다.

반면에 JavaScript와 같은 클라이언트 측 언어 는 브라우저에 상주하고 브라우저에서 실행됩니다. 클라이언트 쪽 스크립팅은 일반적으로 서버 쪽 대신 사용자의 웹 브라우저에 의해 클라이언트 쪽에서 실행되는 웹상의 컴퓨터 프로그램 클래스를 말합니다 .

JavaScript는 사용자가 볼 수 있고 쉽게 수정할 수 있으므로 보안을 위해 JavaScript에 의존해서는 안됩니다.

따라서 서버에서 HTTP 요청을 할 때 서버는 먼저 PHP 파일을주의해서 읽고 실행해야 할 작업이 있는지 확인한 후 클라이언트 측에 응답을 보냅니다. @deceze가 말했듯이 PHP가 응답 출력을 마치면 스크립트가 종료되고 새로운 HTTP 요청이 올 때까지 서버에서 아무 일도 일어나지 않습니다 . *

그래픽 표현

이미지 소스

PHP를 호출해야한다면 어떻게해야합니까? 페이지를 다시로드하거나 AJAX 호출을 사용하여 수행 방법에 따라 다릅니다.

  1. 페이지를 새로 고침하고 HTTP 요청을 보내면됩니다.
  2. JavaScript로 AJAX 호출을 할 수 있습니다. 페이지를 다시로드 할 필요가 없습니다.

잘 읽음 :

  1. Wikipedia : 서버 측 스크립팅
  2. Wikipedia : 클라이언트 측 스크립팅
  3. Madara Uchiha : 클라이언트 측과 서버 측 프로그래밍의 차이점

30

자바 스크립트는 서버가 아닌 클라이언트에서 실행됩니다. 이는 foo서버 측에서 평가되지 않으므로 서버의 파일에 값을 쓸 수 없음을 의미합니다.

이 프로세스를 생각하는 가장 좋은 방법은 마치 텍스트 파일을 동적으로 생성하는 것입니다. 생성하는 텍스트는 브라우저가 해석 한 후에 만 ​​실행 가능한 코드가됩니다. <?php태그 사이에 배치 한 것만 서버에서 평가됩니다.

그건 그렇고, 임의의 PHP 로직 조각을 HTML이나 Javascript에 포함시키는 습관을 가지면 코드가 크게 복잡해질 수 있습니다. 나는 고통스러운 경험에서 말합니다.


3
여기에 당신의 대답은 주목할 만하다. 그러나 서버 환경에서 Javascript를 컴파일하고 실행할 수 있으며 서버에서도 인터셉트 할 수 있습니다.
Brett Caswell

3

웹 애플리케이션에서 모든 작업은 요청 및 응답 방식으로 실행됩니다.

클라이언트 측 프로그래밍은 Java 스크립트 및 해당 프레임 워크가 포함 된 HTML 코드를 사용하며 라이브러리는 인터넷 탐색기, Mozilla, 크롬 브라우저에서 실행됩니다. 자바 시나리오에서 서버 측 프로그래밍 서블릿은 Tomcat, web-logic, j boss, WebSphere 서버에서 실행됩니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.