irpg Community
[Tutorial][JavaScript][PHP] การส่งข้อมูลระหว่าง Client กับ Server - Printable Version

+- irpg Community (https://irpg.in.th)
+-- Forum: irpg Fabella RPG Maker Academia (https://irpg.in.th/forum-4.html)
+--- Forum: RPG Maker Engine School (https://irpg.in.th/forum-7.html)
+--- Thread: [Tutorial][JavaScript][PHP] การส่งข้อมูลระหว่าง Client กับ Server (/thread-2926.html)

[Tutorial][JavaScript][PHP] การส่งข้อมูลระหว่าง Client กับ Server - XthemeCore - 07-28-2016

อย่างที่ทราบกันดี RMMV จะใช้ภาษา JavaScript ในการพัฒนา ซึ่งทำให้สามารถสร้างเกมออนไลน์ได้ง่ายขึ้นวันนี้เราจะมาดูวิธีส่งข้อมูลจากฝั่ง Client คือตัวเกมที่สร้างดว้ย RMMV ไปยัง Server ซึ่งเป็น PHP กันนะครับ

รู้จัก Method
Method หลักๆที่เราจะใช้ในการส่งข้อมูลคือ GET กับ POST ซึ่งแตกต่างสามารถอ่านได้ที่นี่ครับ http://www.w3schools.com/tags/ref_httpmethods.asp
คร่าวๆคือ POST จะไม่มี cached ไว้, ไม่สามารถ bookmark ได้ (เนื่องจากไม่ปรากฏเป็นพารามิเตอร์ของ url)

ตัวอย่างของ GET: http://irpg.in.th/index.php?action=full_shoutbox
พารามิเตอร์ที่ส่งไปได้แก่
  • action มีค่าเป็น 'full_shoutbox'

ตัวอย่างของ POST: http://www.w3schools.com/php/showphp.asp?filename=demo_form_post
[Image: post.png]
จากรูปจะเห็นว่าไม่มีข้อมูลที่ส่งไปปรากฏใน url แต่สามารถดูได้จาก Tool ของ Google CHrome
มีพารามิเตอร์ที่ส่งดังนี้
  • name มีค่าเป็น 'testnaja'
  • email มีค่าเป็น test@naja.com

นอกจากที่กล่าวมาแล้วยังมี method PUT กับ DELETE และอื่นๆด้วย แต่ไม่ขอกล่าวถึงนะที่นี้

รู้จัก Ajax
ไม่ขออธิบายรายละเอียดมากแต่เอาเป็นว่าเราจะใช้ Ajax ในการส่งข้อมูลจาก client ซึ่งเป็น JavaScript ไปยัง PHP (โค้ดในกระทู้นี้ไม่ได้มีการป้องกันเรื่องความปลอดภัยของข้อมูลแต่ประการใด)

Ajax GET Method (โค้ดด้านล่างนี้อาจไม่เข้ากันกับ browser ie)
Code:
function requestGET (url, params, callback) {
   xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
     if (xhttp.readyState == 4 && xhttp.status == 200) {
       callback(xhttp.responseText);
     }
  };

  xhttp.open("GET",url, true);
  xhttp.send(params);
}
อธิบาย
อ้างอิง: (http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp)

ในส่วนของคำสั่ง xhttp.onreadystatechange = function() {} เป็นการสร้าง Callback Function ของ Onreadystatechange Event ซึ่งฟังก์ชันนี้จะถูกเรียกใช้ ทุกครั้งที่มีการเปลี่ยนสถานะของ XMLHttpRequest โดยในที่นี้เราจะทำการตรวจสอบว่า Server ได้ทำการตอบการข้อมูลที่เราส่งแล้วหรือยัง ซึ่งหาก client ได้รับ response เรียบร้อยจะมีค่า readyState เป็น 4 และหากว่าไม่มีข้อผิดพลาดค่า status จะเป็น 200 สำหรับค่าอื่นๆดูได้ลิงค์ที่ให้ไปนะครับ

ทีนี้เมื่อเราค่าที่ Server ตอบกลับเราสามารถรับได้จาก xhttp.responseText (อย่าลืมนะครับว่า xhttp เป็นแค่ตัวแปรที่เราอ้างถึง Object XMLHttpRequest ที่เราได้สร้างไว้) ในโค้ดตัวอย่างเราได้ส่งผลลัพธ์ไปให้ callback function ที่เรารับเข้ามาในพารามิเตอร์ (ในภาษา JavaScript เราสามารถส่งฟังก์ชัน ไปเป็นพารามิเตอร์ได้ ไม่ใช่แค่เฉพาะตัวแปรเท่านั้น)

**ตรงคำสั่ง xhttp.open("GET", url, true); นั้น true ในที่นี้หมายถึง Asynchronous mode ซึ่งก็คือโปรแกรมจะไม่รอให้ server ส่ง response กลับมาก่อน แต่จะไปทำงานอย่างอื่นต่อเลย เมื่อไหร่ที่ server ส่ง response กลับมาจึงจะเรียกใช้ callback function วิธีการนี้ทำให้โปรแกรมไม่ต้องรอ server ตอบกลับ เพราะหากมีปัญหาที่ server โปรแกรมก็จะไม่ค้างไปด้วย

วิธีติดตั้งและใช้งาน
1.ให้บันทึกเป็นไฟล์ .js ครับ เช่น get.js บันทึกไว้ใน plugins ก็ได้ (สามารถเขียนในรูป plugin ได้ ซึ่งแบบนั้นจะเป็นมาตราฐานตามแบบ RMMV มากกว่า แต่จะยังไม่ขอพูดถึงครับ) จากนั้นเปิด RMMV ขึ้นมา

2.เปิด RMMV ขึ้นมา จากนั้นไปที่ Plugin Manager ให้เพิ่ม Plugin ของเราเข้าไป (แม้ว่าเราจะไม่ได้เขียนให้อยู่ในรูป Plugin แต่ก็สามารถใช้งานได้)
เนื่องจากชื่อไฟล์คือ get.js ดังนั้น Plugin จะแสดงเป็น get ดังภาพด้านล่าง
[Image: getjs.png]

3. เมื่อต้องการส่งข้อมูล ให้ใส่คำสั่งใน Event Script ก็ได้
[Image: eventscript.png]
โดยใส่คำสั่ง requestGET( url, params, callback);

ตัวอย่างโค้ด
ฝั่ง Client (JavaScript)
Code:
function getResponse(response){
    alert(response)
}
requestGET( "127.0.0.1/get.php", "name=naja&email=test@irpg.in.th", getResponse);
ฝั่ง Server (PHP)
PHP Code:
echo 'ข้อมูลที่ได้รับ\n Name: ' . $_GET["name"] . '\n Email: ' . $_GET["email"]; 


Ajax POST Method (โค้ดด้านล่างนี้อาจไม่เข้ากันกับ browser ie)
รูปแบบเหมือนกับ GET เพียงแต่จะมีส่วน setRequestHeader เพิ่มเข้ามา หากต้องการรับพารามิเตอร์แบบเดียวกับ GET ก็ใช้ตามตัวอย่างด้านล่างได้เลย (คือพารามิเตอร์แบบต่อไปเรื่อยๆ เช่น name=test&tel=999-9999&... แต่ใน POST จะไม่มีการแสดงบน url ให้เห็น)
Code:
function requestPOST (url, params, callback) {
  xhttp = new XMLHttpRequest();

  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
         callback(xhttp.responseText);
      }
  };

  xhttp.open("POST",url, true);
  xhttp.send(params);
ซึ่งการส่งแบบ POST ยังรองรับการส่งแบบอื่นได้ ตัวอย่างเช่น การส่งข้อมูลในรูปแบบ JSON เป็นต้น ซึ่งไม่พอพูดถึงในส่วนนี้

ตัวอย่างโค้ด
ฝั่ง Client (JavaScript)
Code:
function getResponse(response){
     alert(response);
}
requestPOST( "127.0.0.1/post.php", "name=naja&email=test@irpg.in.th", getResponse);
ฝั่ง Server (PHP)
PHP Code:
echo 'ข้อมูลที่ได้รับ\n Name: ' . $_POST["name"] . '\n Email: ' . $_POST["email"]; 

เป็นไงบ้างครับหวังว่าเป็นประโยชน์ไม่มากก็น้อย *มอง*
แล้วพบกันใหม่โอกาสหน้าครับ เอ้าดื่ม

RE: [Tutorial][JavaScript][PHP] การส่งข้อมูลระหว่าง Client กับ Server - slost - 07-28-2016

เยี่ยมมากครับ เอาข้อมูลจัดเต็มเลย พยายามดันบอร์ดเต็มที่เลยสินะ แมวร้อง