อะไรคือความแตกต่างระหว่างการเขียนโปรแกรมฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์
ฉันมีรหัสนี้:
<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 บนไคลเอนต์ ลักษณะสำคัญของปัญหาและแนวทางแก้ไขจะเหมือนกันสำหรับคู่ภาษาใด ๆเมื่อภาษาหนึ่งทำงานบนไคลเอนต์และอีกภาษาหนึ่งบนเซิร์ฟเวอร์ (แม้ว่าจะเป็นภาษาเดียวกันก็ตาม) โปรดคำนึงถึงสิ่งนี้เมื่อคุณเห็นคำตอบที่พูดถึงภาษาใดภาษาหนึ่ง
คำตอบ
รหัสของคุณจะถูกแบ่งออกเป็นสองส่วนแยกที่ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์
|
---------->
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 ใหม่ไปยังเซิร์ฟเวอร์ สิ่งนี้สามารถเกิดขึ้นได้โดยใช้หนึ่งในสามวิธีที่เป็นไปได้:
- ลิงก์ซึ่งทำให้เบราว์เซอร์โหลดหน้าใหม่
- การส่งแบบฟอร์มซึ่งส่งข้อมูลไปยังเซิร์ฟเวอร์และโหลดหน้าใหม่
- AJAXคำขอซึ่งเป็นเทคนิคจาวาสคริปต์ที่จะทำให้การร้องขอ HTTP ปกติไปยังเซิร์ฟเวอร์ (เช่น 1. และ 2. ความประสงค์) แต่ไม่ต้องออกจากหน้าปัจจุบัน
นี่คือคำถามที่สรุปวิธีการเหล่านี้โดยละเอียดยิ่งขึ้น
คุณยังสามารถใช้ JavaScript เพื่อทำให้เบราว์เซอร์เปิดหน้าใหม่โดยใช้window.location
หรือส่งแบบฟอร์มจำลองความเป็นไปได้ 1. และ 2
ในการตรวจสอบสาเหตุที่โค้ดPHPไม่ทำงานในโค้ดJavaScriptเราจำเป็นต้องเข้าใจว่าภาษาฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์คืออะไรและทำงานอย่างไร
ภาษาฝั่งเซิร์ฟเวอร์ (PHP เป็นต้น) : ดึงข้อมูลจากฐานข้อมูลรักษาสถานะผ่านการเชื่อมต่อHTTP แบบไม่ระบุสถานะและทำสิ่งต่างๆมากมายที่ต้องการความปลอดภัย พวกเขาอยู่บนเซิร์ฟเวอร์โปรแกรมเหล่านี้ไม่เคยเปิดเผยซอร์สโค้ดแก่ผู้ใช้
ภาพ Attr
ดังนั้นคุณสามารถเห็นได้อย่างง่ายดายว่าภาษาฝั่งเซิร์ฟเวอร์จัดการคำขอ HTTP และประมวลผลได้และตามที่ @deceze กล่าวไว้PHP ถูกเรียกใช้งานบนเซิร์ฟเวอร์และแสดงผล HTML บางส่วนและอาจเป็นรหัส JavaScript ซึ่งส่งเป็นการตอบกลับไปยังไคลเอนต์โดยที่ HTML ถูกตีความและเรียกใช้ JavaScript
ในทางกลับกันภาษาฝั่งไคลเอ็นต์ (เช่น JavaScript) จะอยู่ในเบราว์เซอร์และทำงานในเบราว์เซอร์ ฝั่งไคลเอ็นต์สคริปต์โดยทั่วไปหมายถึงระดับของโปรแกรมคอมพิวเตอร์บนเว็บที่จะดำเนินการฝั่งไคลเอ็นต์โดยเว็บเบราว์เซอร์ของผู้ใช้แทนการด้านเซิร์ฟเวอร์
ผู้ใช้สามารถมองเห็น JavaScript และสามารถแก้ไขได้ง่ายดังนั้นเพื่อความปลอดภัยเราต้องไม่พึ่งพา JavaScript
ดังนั้นเมื่อคุณส่งคำขอHTTPบนเซิร์ฟเวอร์เซิร์ฟเวอร์จะอ่านไฟล์ PHP อย่างรอบคอบก่อนเพื่อดูว่ามีงานที่ต้องดำเนินการหรือไม่และส่งการตอบกลับไปยังฝั่งไคลเอ็นต์ อีกครั้งตามที่ @deceze กล่าวว่า * เมื่อ PHP เสร็จสิ้นการส่งออกการตอบสนองสคริปต์จะสิ้นสุดลงและจะไม่มีอะไรเกิดขึ้นบนเซิร์ฟเวอร์จนกว่าจะมีคำขอHTTPใหม่เข้ามา
แหล่งที่มาของภาพ
ตอนนี้ฉันจะทำอย่างไรถ้าต้องการเรียก PHP? ขึ้นอยู่กับว่าคุณต้องทำอย่างไร: โดยการโหลดหน้านี้ซ้ำหรือใช้การโทร AJAX
- คุณสามารถทำได้โดยการโหลดหน้านี้ซ้ำและส่งคำขอHTTP
- คุณสามารถโทร AJAX ด้วย JavaScript ได้โดยไม่ต้องโหลดหน้าซ้ำ
อ่านดี:
- Wikipedia: การเขียนสคริปต์ฝั่งเซิร์ฟเวอร์
- Wikipedia: การเขียนสคริปต์ฝั่งไคลเอ็นต์
- Madara Uchiha: ความแตกต่างระหว่างฝั่งไคลเอ็นต์และการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์
Javascript ของคุณจะดำเนินการบนไคลเอนต์ไม่ใช่บนเซิร์ฟเวอร์ ซึ่งหมายความว่าfoo
ไม่มีการประเมินทางฝั่งเซิร์ฟเวอร์ดังนั้นจึงไม่สามารถเขียนค่าลงในไฟล์บนเซิร์ฟเวอร์ได้
วิธีที่ดีที่สุดในการคิดถึงกระบวนการนี้ก็เหมือนกับว่าคุณกำลังสร้างไฟล์ข้อความแบบไดนามิก ข้อความที่คุณสร้างขึ้นจะกลายเป็นโค้ดที่เรียกใช้งานได้เมื่อเบราว์เซอร์ตีความเท่านั้น เฉพาะสิ่งที่คุณวางระหว่าง<?php
แท็กเท่านั้นที่จะได้รับการประเมินบนเซิร์ฟเวอร์
อย่างไรก็ตามการสร้างนิสัยในการฝังตรรกะ PHP แบบสุ่มใน HTML หรือ Javascript สามารถนำไปสู่รหัสที่ซับซ้อนอย่างจริงจัง ฉันพูดจากประสบการณ์ที่เจ็บปวด
ในแอปพลิเคชันบนเว็บทุกงานจะดำเนินการในลักษณะของการร้องขอและการตอบสนอง
การเขียนโปรแกรมฝั่งไคลเอ็นต์ใช้โค้ด html ที่มีสคริปต์ Java และเฟรมเวิร์กไลบรารีดำเนินการใน Internet Explorer, Mozilla, เบราว์เซอร์ Chrome ในสถานการณ์จำลอง java servlets การเขียนโปรแกรมฝั่งเซิร์ฟเวอร์ใน Tomcat, web-logic, j boss, WebSphere severs