Sự khác biệt giữa lập trình phía máy khách và phía máy chủ là gì?


498

Tôi có mã này:

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

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

Tại sao điều này không ghi "thanh" vào tệp văn bản của tôi, nhưng cảnh báo "42"?


Lưu ý: Bản sửa đổi trước đó của câu hỏi này rõ ràng về PHP trên máy chủ và JavaScript trên máy khách. Bản chất cơ bản của vấn đề và giải pháp là giống nhau đối với bất kỳ cặp ngôn ngữ nào khi một ngôn ngữ đang chạy trên máy khách và ngôn ngữ kia trên máy chủ (ngay cả khi chúng là cùng một ngôn ngữ). Vui lòng đưa tài khoản này vào tài khoản khi bạn thấy câu trả lời nói về các ngôn ngữ cụ thể.

Câu trả lời:


460

Mã của bạn được chia thành hai phần hoàn toàn riêng biệt, phía máy chủ và phía máy khách .

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

Hai bên liên lạc qua các yêu cầu và phản hồi HTTP. PHP được thực thi trên máy chủ và xuất ra một số HTML và có thể mã JavaScript được gửi dưới dạng phản hồi cho máy khách nơi HTML được diễn giải và JavaScript được thực thi. Khi PHP đã hoàn thành xuất ra phản hồi, tập lệnh kết thúc và sẽ không có gì xảy ra trên máy chủ cho đến khi có yêu cầu HTTP mới.

Mã ví dụ thực thi như thế này:

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

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

Bước 1, PHP thực thi tất cả mã giữa <?php ?>các thẻ. Kết quả là thế này:

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

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

Cuộc file_put_contentsgọi không dẫn đến kết quả gì, nó chỉ ghi "+ foo +" vào một tệp. Cuộc <?php echo 42; ?>gọi dẫn đến kết quả đầu ra "42", hiện đang ở vị trí mà mã được sử dụng.

Mã HTML / JavaScript kết quả này hiện được gửi đến máy khách, nơi nó được đánh giá. Cuộc alertgọi hoạt động, trong khi foobiến không được sử dụng ở bất cứ đâu.

Tất cả mã PHP được thực thi trên máy chủ trước khi máy khách thậm chí bắt đầu thực thi bất kỳ JavaScript nào. Không còn mã PHP nào trong phản hồi mà JavaScript có thể tương tác.

Để gọi một số mã PHP, máy khách sẽ phải gửi một yêu cầu HTTP mới đến máy chủ. Điều này có thể xảy ra bằng một trong ba phương pháp có thể:

  1. Một liên kết, khiến trình duyệt tải một trang mới.
  2. Một biểu mẫu gửi, gửi dữ liệu đến máy chủ và tải một trang mới.
  3. Một AJAX yêu cầu, mà là một kỹ thuật Javascript để thực hiện một yêu cầu HTTP thông thường đến máy chủ (như 1. và 2. sẽ), nhưng mà không rời khỏi trang hiện tại.

Đây là một câu hỏi phác thảo các phương pháp này chi tiết hơn

Bạn cũng có thể sử dụng JavaScript để làm cho trình duyệt mở một trang mới bằng cách sử dụng window.locationhoặc gửi biểu mẫu, mô phỏng các khả năng 1. và 2.


1
Bạn cũng có thể mở trang thứ hai bằng cách sử dụng window.openhoặc tải trang bằng iframe.
jcubic

Có thể đáng để thêm WebSockets vào danh sách các phương thức giao tiếp.
Quentin

Điều gì sẽ xảy ra nếu chúng ta nói các giá trị thả xuống được cập nhật thông qua jquery. Khi người dùng thực hiện bước 2. Gửi biểu mẫu, gửi dữ liệu đến máy chủ và tải trang mới, qua nút "Gửi", các giá trị được cập nhật của jquery có thể được chuyển đến bộ điều khiển trong php không? Hoặc họ sẽ không hiển thị với php vì nó đã được thêm vào dom thông qua jquery? @deceze
FabricioG

@Fovenio Một yêu cầu HTTP sẽ được tạo từ <form>dữ liệu và được gửi đến máy chủ. Bạn có thể thao tác các biểu mẫu bằng Javascript để chúng chứa các dữ liệu khác nhau. Có, dữ liệu đó sẽ là một phần của yêu cầu HTTP kết quả nếu đó là một phần chính xác của biểu mẫu khi nó được gửi; không quan trọng là nó có trong HTML gốc hay được thêm vào sau đó thông qua Javascript.
lừa dối

163

Để xác định tại sao PHP mã không hoạt động trong mã JavaScript, chúng ta cần hiểu ngôn ngữ phía máy kháchphía máy chủ là gì và cách chúng hoạt động.

Ngôn ngữ phía máy chủ (PHP, v.v.) : Họ truy xuất các bản ghi từ cơ sở dữ liệu, duy trì trạng thái qua kết nối HTTP không trạng thái và thực hiện nhiều việc yêu cầu bảo mật. Họ cư trú trên máy chủ, các chương trình này không bao giờ có mã nguồn của họ tiếp xúc với người dùng.

Hình ảnh từ wikipedia_http: //en.wikipedia.org/wiki/File: Scheme_dynamic_page_en.svg hình ảnh attr

Vì vậy, bạn có thể dễ dàng thấy rằng các ngôn ngữ phía máy chủ xử lý các yêu cầu HTTP và xử lý chúng, và, như @deceze đã nói, PHP được thực thi trên máy chủ và xuất ra một số HTML và có thể là mã JavaScript, được gửi dưới dạng phản hồi cho máy khách, trong đó HTML được diễn giải và JavaScript được thực thi.

Mặt khác, Ngôn ngữ phía máy khách (như JavaScript) nằm trong trình duyệt và chạy trong trình duyệt. Kịch bản phía máy khách thường đề cập đến lớp chương trình máy tính trên web được thực thi phía máy khách, bởi trình duyệt web của người dùng, thay vì phía máy chủ .

JavaScript hiển thị cho người dùng và có thể dễ dàng sửa đổi, vì vậy đối với nội dung bảo mật, chúng ta không được dựa vào JavaScript.

Vì vậy, khi bạn thực hiện một yêu cầu HTTP trên máy chủ, trước tiên, máy chủ sẽ đọc tệp PHP một cách cẩn thận để xem liệu có bất kỳ tác vụ nào cần được thực hiện hay không và gửi phản hồi cho phía máy khách. Một lần nữa, như @deceze đã nói, * Khi PHP kết thúc phản hồi, tập lệnh kết thúc và sẽ không có gì xảy ra trên máy chủ cho đến khi có yêu cầu HTTP mới xuất hiện. *

Biểu diễn đồ họa

Nguồn hình ảnh

Vậy bây giờ tôi có thể làm gì nếu tôi cần gọi PHP? Nó phụ thuộc vào cách bạn cần thực hiện: bằng cách tải lại trang hoặc bằng cách sử dụng cuộc gọi AJAX.

  1. Bạn có thể làm như vậy bằng cách tải lại trang và gửi yêu cầu HTTP
  2. Bạn có thể thực hiện cuộc gọi AJAX bằng JavaScript - điều này không yêu cầu tải lại trang

Đọc tốt:

  1. Wikipedia: Kịch bản phía máy chủ
  2. Wikipedia: Kịch bản phía máy khách
  3. Madara Uchiha: Sự khác biệt giữa lập trình phía khách và lập trình phía máy chủ

30

Javascript của bạn sẽ thực thi trên máy khách, không phải trên máy chủ. Điều này có nghĩa rằngfoo là không được đánh giá ở phía máy chủ và do đó giá trị của nó không thể được ghi vào một tệp trên máy chủ.

Cách tốt nhất để suy nghĩ về quá trình này là nếu bạn đang tạo một tệp văn bản một cách linh hoạt. Văn bản bạn đang tạo chỉ trở thành mã thực thi khi trình duyệt diễn giải nó. Chỉ những gì bạn đặt giữa<?php các thẻ được đánh giá trên máy chủ.

Nhân tiện, tạo thói quen nhúng các đoạn logic PHP ngẫu nhiên trong HTML hoặc Javascript có thể dẫn đến mã bị sai lệch nghiêm trọng. Tôi nói từ kinh nghiệm đau đớn.


3
Câu trả lời của bạn ở đây rất đáng chú ý vì nó đề cập đến / một interpeter. Tuy nhiên, javascript có thể được biên dịch và chạy trong môi trường máy chủ và nó cũng có thể được xen kẽ bởi một máy chủ.
Brett Caswell

3

Trong ứng dụng web, mọi tác vụ đều được thực thi theo cách yêu cầu và phản hồi.

Lập trình phía máy khách là với mã html với tập lệnh Java và các khung của nó, các thư viện thực thi trong trình duyệt internet explorer, Mozilla, trình duyệt chrome. Trong kịch bản java, các máy chủ lập trình phía máy chủ thực thi trong Tomcat, web-logic, j boss, WebSphere sever

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.