AJAX ย่อมาจากคำว่า Asynchronous JavaScript and XML ซึ่งหมายถึงการพัฒนาเว็บแอพพลิเคชั่นที่ประมวลผลในเบื้องหลังเป็นเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้สามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น ทำให้ความรู้สึกการใช้งานโปรแกรมเหมือนกับเดสก์ท็อปแอปพลิเคชัน ปกติแล้วในภาษาสคริปต์ที่ใช้งานกับเว็บไซต์จะมีการทำงานประมวลผลแบบเป็นลำดับ (synchronous) โดยที่คำสั่งแรกจะต้องประมวลผลให้เสร็จสิ้นก่อนแล้วถึงจะทำงานในคำสั่งถัดไป แต่กระบวนการทำงานแบบเอแจ๊กซ์เมื่อบราวเซอร์ (Browser) ร้องขอข้อมูลไปยังเซิร์ฟเวอร์ (Server) บราวเซอร์จะไปทำงานคำสั่งถัดไปทันที (asynchronous) โดยที่ไม่ต้องรอการตอบกลับจากเซิร์ฟเวอร์ก่อน ทำให้การตอบสนองต่อผู้ใช้งานดูรวดเร็วขึ้น และเมื่อเซิร์ฟเวอร์ประมวลผลเสร็จแล้วถึงจะส่งข้อมูลกลับมาที่เอแจ๊กซ์และให้เอแจ๊กซ์ทำงานกับข้อมูลที่ส่งกลับมาอีกทีซึ่งสามารถเขียนโค้คการทำงานดังนี้ ตัวอย่างโค้คการทำงาน AJAX ของโดยใช้ jQuery และปัจจุบันในการเขียน JavaScript เพื่อเรียกใช้งาน AJAX นั้นเราไม่จำเป็นต้องพึ่งพา jQuery อีกต่อไปแล้วซึ่งสามารถเขียนโค้ดการทำงานได้ดังนี้ วิธีที่ 1 ใช้ XMLHttpRequest [1] วิธีที่ 2 ใช้ Fetch…
Tag: javascript
รู้จักการจัดการข้อมูล JSON และการใช้งาน
รูปแบบข้อมูล JSON เป็นมาตรฐานในการแลกเปลี่ยนข้อมูลระหว่างเซิฟเวอร์และไคลเอนต์ที่ได้รับความนิยมในปัจจุบันซึ่งได้ถูกนำไปใช้งานอย่างแพร่หลายเช่นการเขียนโปรแกรมโดยใช้เทคนิค AJAX, RESTFul, เขียนคอนฟิกไฟล์ หรือการพัฒนา API เป็นต้น ด้วยคุณสมบัติของ JSON ที่เป็นไฟล์ประเภทข้อความ (Text based) ขนาดเล็กน้ำหนักเบา เป็นมาตรฐานกลางทุกภาษาสามารถใช้งานได้ง่ายทั้งการอ่านและเขียนที่มนุษย์สามารถอ่านเข้าใจได้ง่าย อักขระมาตารฐานของ JSON เครื่องหมาย “:” ใช้สำหรับแยกค่า name และ value เครื่องหมาย “,” ใช้สำหรับแยกข้อมุล name-value ในแต่ละคู่ เครื่องหมาย “{” และ “}” ระบุว่าข้อมูลเป็นออบเจ็ค เครื่องหมาย “[” และ “]” ระบุว่าข้อมูลเป็นอาเรย์ เครื่องหมาย…
วิธีการ set property ของ radio button ใน Dojo
เนื่องจากช่วงนี้ ผู้เขียนมีโอกาสได้เข้ามาอยู่ในแวดวงของ Dojo และได้ประสบกับปัญหาในการที่จะ set property ของ Dojo ซึ่งในที่นี้คือ Radio Button หลังจากที่ได้ลองผิด ลองถูก Error กันหัวหมุน จนสุดท้ายได้เจอทางออก เลยอยากจะบันทึกไว้สำหรับตัวเองมาดูในอนาคต และเผื่อท่านอื่นที่ประสบปัญหาเดียวกัน มาเจอจะได้ลองนำไปใช้งานกันดูค่ะ Let’s GO!!! เนื่องจาก Radio Button เป็น Control ภายใต้ dijit/form/RadioButton ดังนั้น การเขียนคำสั่งเพื่อ set property จึงได้เป็นดังนี้ dijit.byId(‘control_id‘).set(‘control_prop‘, value); control_id : id ของ…
วิธีการตรวจสอบข้อมูลในรูปแบบ JSON
ข้อมูลรูปแบบของ JSON เป็นที่นิยมใช้เป็นวิธีการส่งข้อมูลอย่างมากในปัจจุบัน ซึ่งในบ้างครั้งข้อมูลส่งจะมีความซับซ้อนหรือมีการซ้อนกันของข้อมูลหลายชั้น ทำให้การอาจเกิดข้อผิดพลาดในการสร้างข้อมูลหรือยากในการตรวจสอบข้อมูล ซึ่งในบทความนี้จึงขอเสนอเว็บไซต์ที่ช่วยในการตรวจสอบข้อมูลและแบ่งชั้นของข้อมูลที่ซ้อนกันหลาย ๆ ชั้น ในรูปแบบ JSON ได้ คือ https://jsonformatter.curiousconcept.com จากรูป มีสิ่งที่ต้องระบุหลัก ๆ คือ JSON Data/URL สามารถวางข้อมูลหรือ URL ของข้อมูลได้ทั้งสองอย่าง JSON Standard เลือกว่า JSON ของเราสร้างโดยมาตรฐานใด หรือเราอยากตรวจสอบว่า JSON ที่เราสร้างอยู่ในมาตรฐานที่เราต้องการไหม เมื่อกำหนดเรียบร้อยก็กดปุ่ม Process จากรูป ระบบจะแสดงผลการตรวจสอบว่าถูกต้องหรือไม่ และนอกจากนี้ระบบยังแบ่งชั้นข้อมูลในแต่ละระดับที่ซ้อนกันให้ ทำให้เราดูชุดข้อมูลได้ง่ายยิ่งขึ้น หากข้อมูลผิดล่ะ จะเป็นไง ลองทำกันดู ในกรณีที่ไม่ถูกต้อง…
วิธีตรวจสอบเว็บไซต์ที่โดน Hack #9
สวัสดีปีใหม่ ปี 2557 ขอทุกท่านนประสบความสำเร็จในหน้าที่การงาน คิดหวังสิ่งใดก็สมปรารถนา และมีสุขภาพแข็งแรง ปลอดภัยตลอดทั้งปีครับ บทความนี้ ขอกล่าวถึงปัญหาสำคัญปัจจุบัน เรียกว่าเป็น Trends ของปีที่ผ่านมาและต่อไปในปีนี้ (2557) ด้วย นั่นคือ เรื่อง Cross Site Scripting หรือ ที่เขียนย่อๆว่า XSS XSS นั้น ก็คล้ายๆกับปัญหาเดิมของ SQL Injection เดิม SQL Inject คือ Web Form ที่ให้ผู้ใช้ป้อนข้อมูลเข้ามา ไม่ได้มีการกรองข้อมูลให้ดี จึงทำให้ Hacker สามารถ แทรกคำสั่ง SQL…
เทคนิคในการบันทึกความเร็วของ Web Browser มาเก็บไว้ที่ Web Server
ต่อจาก วิธีพัฒนา Squirrelmail Plugin – กรณี pagespeed เทคนิคการส่งค่าจาก PHP ให้ JavaScript เมื่อรู้ระยะเวลาที่ Web Browser ประมวลผลแล้ว ต่อไปก็ต้องการเก็บข้อมูลต่างๆมาเก็บที่ Web Server เพื่อบันทึกเก็บไว้วิเคราะห์ต่อไป สามารถทำได้โดยการใช้ JavaScript ส่งค่่าผ่าน HTTP GET Method มายัง PHP เริ่มจากสร้าง PHP ให้ชื่อว่า getdata.php สำหรับรับค่าจาก JavaScript ที่ทำงานจาก Web Browser ของผู้ใช้ ดังนี้ <?php …
เทคนิคการส่งค่าจาก PHP ให้ JavaScript
ต่อจากตอนที่แล้ว “วิธีพัฒนา Squirrelmail Plugin – กรณี pagespeed” จากการพัฒนา pagespeed plugin สำหรับ Squirrelmail เพื่อแสดงให้ผู้ใช้เห็นถึง “ความเร็ว” ในการประมวลผลจากฝั่ง server ได้แล้ว ต่อไปเราต้องการเอาดูว่า “ความเร็ว” ในการเดินทางและแสดงผลบน Web Browser ของผู้ใช้ เป็นเท่าไหร่ ทำได้โดยการใช้งาน JavaScript จับเวลาการทำงาน โดยเขียนโค๊ดต่อไปนี้ ใน ฟังก์ชั่น pagespeed_top echo ‘ <SCRIPT LANGUAGE=”JavaScript”> beforeload = (new Date()).getTime(); </script>…