การส่งค่าตัวแปรข้ามไฟล์ ระหว่าง Javascript และไฟล์ php

โดยปกติการอ้างอิงไฟล์ภายนอกของ Javascript จะเรียกใช้ไฟล์ นามสกุล .js แต่น้อยคนที่จะทราบว่า Javascript สามารถเรียกใช้งาน และรับค่ามาจากไฟล์ php ได้

นี่เป็นการเปิดโลกทางเลือกใหม่ที่ทำให้ Javascript ซึ่งเป็น Client-side สามารถสื่อสารกับ PHP ซึ่งเป็น Server-side ได้ ทำให้เพิ่มศักยภาพของ Javascript ได้อย่างมหาศาล

รูปแบบ การอ้างอิงถึง(เรียกใช้งาน)ไฟล์ myscript.php ของ Javascript (ในไฟล์ HTML)

          <script type="text/javascript" src="myscript.php"></script>

ถ้าต้องการส่งค่าไปยังไฟล์ PHP ก็สามารถทำได้ ผ่านทาง Query string ดังนี้

          <script type="text/javascript" src="myscript.php?id=3&name=george"></script>

ไฟล์ PHP จะรับค่าที่ส่งเข้ามา ผ่านทาง global variable $HTTP_GET_VARS[] ประเด็นหลัก ก็คือว่า เนื่องจากเราใช้ Javascript เรียก PHP ดังนั้น ผลลัพธ์ที่ออกมาก จะต้องอยู่ในรูปแบบของ Javascript หรือเป็นไปตาม syntax ของ Javascript เท่านั้น

ข้างล่างนี้ คือตัวอย่างไฟล์ ip.php ที่อ่านค่า IP และนำมาแสดงผ่านทาง Javascript

          <?
          //   "ip.php" example- display user IP address on any page
          Header("content-type: application/x-javascript");
          $serverIP=$_SERVER['REMOTE_ADDR'];
          echo "document.write(\"หมายเลข IP address ของท่าน คือ: <b>" . $serverIP . "</b>\")";
          ?>

เรียกใช้งานไฟล์ ip.php ด้วย Javascript ในไฟล์ HTML ดังนี้

         <script type="text/javascript" src="ip.php"></script>

เมื่อเรียกใช้งานไฟล์ HTML จะแสดงค่า IP ตามที่ระบุ



คำอธิบายไฟล์ PHP

• ในไฟล์ PHP ต้องระบุใน Header เพื่อบอกให้ทราบว่า ผลที่จะให้แสดงจะเป็นไปตามรูปแบบของ Javascript 
• สิ่งที่จะให้ PHP แสดง หรือ Echo ออกมา จะต้องอยู่ในรูปของ Javascript จะต้องเป็นไปตามกฎ หรือ Syntax ของ Javascript เท่านั้น ดังนั้น เมื่อสั่งให้ PHP แสดงผลด้วยคำสั่ง echo จึงต้องใช้ Syntax ของ Javascript โดยใช้ Document.write() เพื่อให้ Javascript แสดงข้อความที่ส่งมาจากไฟล์ PHP

รายละเอียดและตัวอย่าง ดูได้จากแหล่งอ้างอิงข้างล่าง

ตัวอย่างการใช้ PHP อ่านไฟล์ภาพ และส่งต่อให้ Javascript แสดงในไฟล์ HTML

ไฟล์ PHP (getimages.php)

ไฟล์ HTML (ตั้งชื่ออะไรก็ได้ เช่น slideShow.html)

อ้างอิง/แหล่งที่มา
http://www.javascriptkit.com/javatutors/externalphp.shtml
http://www.javascriptkit.com/javatutors/externalphp2.shtml