ความแตกต่างระหว่างการเขียนโปรแกรมฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์คืออะไร?

ฉันมีรหัสนี้:

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

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

เหตุใดสิ่งนี้จึงไม่เขียน "บาร์" ลงในไฟล์ข้อความของฉัน แต่เตือน "42"

หมายเหตุ: การแก้ไขก่อนหน้านี้ของคำถามนี้ชัดเจนเกี่ยวกับ PHP บนเซิร์ฟเวอร์และ JavaScript บนไคลเอนต์ ลักษณะสำคัญของปัญหาและแนวทางแก้ไขจะเหมือนกันสำหรับคู่ภาษาใด ๆเมื่อมีคนหนึ่งกำลังทำงานบนไคลเอนต์และอีกคนบนเซิร์ฟเวอร์ (แม้ว่าพวกเขาจะเป็นภาษาเดียวกัน) โปรดนำสิ่งนี้ไปยังบัญชีเมื่อคุณเห็นคำตอบที่พูดถึงภาษาเฉพาะ

รหัสของคุณจะถูกแบ่งออกเป็นสองส่วนแยกที่ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

                    |
               ---------->
              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ตัวแปรไม่ได้ใช้ที่ใดก็ได้

รหัส PHP ทั้งหมดจะถูกดำเนินการบนเซิร์ฟเวอร์ก่อนที่ลูกค้าจะเริ่มดำเนินการใด ๆ ของ JavaScript ไม่มีโค้ด PHP เหลืออยู่ในการตอบกลับที่ JavaScript สามารถโต้ตอบได้

ในการโทรหารหัส PHP ลูกค้าจะต้องส่งคำขอ HTTP ใหม่ไปยังเซิร์ฟเวอร์ สิ่งนี้สามารถเกิดขึ้นได้โดยใช้หนึ่งในสามวิธีที่เป็นไปได้:

1. ลิงค์ซึ่งทำให้เบราว์เซอร์โหลดหน้าใหม่
2. การส่งแบบฟอร์มซึ่งส่งข้อมูลไปยังเซิร์ฟเวอร์และโหลดหน้าใหม่
3. AJAXคำขอซึ่งเป็นเทคนิคจาวาสคริปต์ที่จะทำให้การร้องขอ HTTP ปกติไปยังเซิร์ฟเวอร์ (เช่น 1. และ 2. ความประสงค์) แต่ไม่ต้องออกจากหน้าปัจจุบัน

ต่อไปนี้เป็นคำถามที่สรุปวิธีการเหล่านี้โดยละเอียดยิ่งขึ้น

คุณยังสามารถใช้ JavaScript เพื่อทำให้เบราว์เซอร์เปิดหน้าใหม่โดยใช้window.locationหรือส่งแบบฟอร์มโดยจำลองความเป็นไปได้ที่ 1 และ 2

เพื่อตรวจสอบว่าทำไมโค้ดPHPไม่ทำงานในรหัสJavaScriptเราต้องเข้าใจว่าฝั่งไคลเอ็นต์และภาษาฝั่งเซิร์ฟเวอร์คืออะไรและทำงานอย่างไร

ภาษาฝั่งเซิร์ฟเวอร์ (PHP ฯลฯ ) : พวกเขาดึงข้อมูลจากฐานข้อมูลรักษาสถานะผ่านการเชื่อมต่อHTTPไร้รัฐและทำสิ่งต่าง ๆ มากมายที่ต้องการความปลอดภัย พวกเขาอยู่บนเซิร์ฟเวอร์โปรแกรมเหล่านี้ไม่เคยเปิดเผยซอร์สโค้ดแก่ผู้ใช้

_{รูปภาพ}

ดังนั้นคุณสามารถเห็นได้อย่างง่ายดายว่าภาษาฝั่งเซิร์ฟเวอร์จัดการกับคำร้องขอ HTTP และดำเนินการกับพวกเขาและตามที่ @deceze กล่าวว่าPHP ถูกเรียกใช้งานบนเซิร์ฟเวอร์และส่งออก HTML บางส่วนและอาจใช้รหัส JavaScript ซึ่งถูกส่งเป็นการตอบสนองต่อลูกค้า HTML ถูกตีความและใช้งาน JavaScript

ในทางกลับกันภาษาฝั่งไคลเอ็นต์ (เช่น JavaScript) จะอยู่ในเบราว์เซอร์และทำงานในเบราว์เซอร์ ฝั่งไคลเอ็นต์สคริปต์โดยทั่วไปหมายถึงระดับของโปรแกรมคอมพิวเตอร์บนเว็บที่จะดำเนินการฝั่งไคลเอ็นต์โดยเว็บเบราว์เซอร์ของผู้ใช้แทนการด้านเซิร์ฟเวอร์

ผู้ใช้สามารถมองเห็น JavaScript และสามารถแก้ไขได้อย่างง่ายดายดังนั้นเพื่อความปลอดภัยเราต้องไม่ใช้ JavaScript

ดังนั้นเมื่อคุณทำการร้องขอHTTPบนเซิร์ฟเวอร์เซิร์ฟเวอร์จะอ่านไฟล์ PHP อย่างรอบคอบก่อนเพื่อดูว่ามีงานที่ต้องดำเนินการหรือไม่และส่งการตอบกลับไปยังฝั่งไคลเอ็นต์ อีกครั้งตามที่ @deceze กล่าวว่า * เมื่อ PHP แสดงผลการตอบกลับเสร็จสิ้นสคริปต์จะสิ้นสุดและไม่มีอะไรเกิดขึ้นบนเซิร์ฟเวอร์จนกว่าจะมีคำขอHTTPใหม่เข้ามา *

_{แหล่งรูปภาพ}

ดังนั้นตอนนี้ฉันต้องทำอย่างไรถ้าฉันต้องการโทร PHP? ขึ้นอยู่กับว่าคุณต้องทำอย่างไร: โดยการโหลดหน้าซ้ำหรือโดยใช้การโทร AJAX

1. คุณสามารถทำได้โดยการโหลดหน้าซ้ำและส่งคำขอHTTP
2. คุณสามารถโทรด้วย AJAX ด้วย JavaScript ซึ่งไม่จำเป็นต้องโหลดหน้าซ้ำ

อ่านดี:

1. Wikipedia: สคริปต์ฝั่งเซิร์ฟเวอร์
2. Wikipedia: สคริปต์ฝั่งไคลเอ็นต์
3. Madara Uchiha: ความแตกต่างระหว่างฝั่งไคลเอ็นต์และการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์

Javascript ของคุณจะทำงานบนไคลเอนต์ไม่ใช่บนเซิร์ฟเวอร์ หมายความfooว่าไม่ได้รับการประเมินทางฝั่งเซิร์ฟเวอร์ดังนั้นจึงไม่สามารถเขียนค่าลงในไฟล์บนเซิร์ฟเวอร์

วิธีที่ดีที่สุดที่จะคิดเกี่ยวกับกระบวนการนี้คือถ้าคุณกำลังสร้างไฟล์ข้อความแบบไดนามิก ข้อความที่คุณสร้างจะกลายเป็นรหัสที่ใช้งานได้เมื่อเบราว์เซอร์ตีความ เฉพาะสิ่งที่คุณวางระหว่าง<?phpแท็กเท่านั้นที่จะได้รับการประเมินบนเซิร์ฟเวอร์

โดยวิธีการสร้างนิสัยของการฝังตรรกะ PHP สุ่มใน HTML หรือ Javascript สามารถนำไปสู่รหัสที่ซับซ้อน ฉันพูดจากประสบการณ์ที่เจ็บปวด

ในเว็บแอปพลิเคชันทุกงานดำเนินการในลักษณะของการร้องขอและการตอบสนอง

การเขียนโปรแกรมฝั่งไคลเอ็นต์นั้นใช้รหัส html พร้อมด้วยจาวาสคริปต์และเฟรมเวิร์กไลบรารีดำเนินการใน internet explorer, Mozilla, chrome browser ในเซิร์ฟเล็ตการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์ java เรียกใช้งานใน Tomcat, web-logic, j boss, WebSphere severs