รู้จักเอแจ๊กซ์ (AJAX) และการใช้งาน

AJAX ย่อมาจากคำว่า Asynchronous JavaScript and XML ซึ่งหมายถึงการพัฒนาเว็บแอพพลิเคชั่นที่ประมวลผลในเบื้องหลังเป็นเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้สามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น ทำให้ความรู้สึกการใช้งานโปรแกรมเหมือนกับเดสก์ท็อปแอปพลิเคชัน ปกติแล้วในภาษาสคริปต์ที่ใช้งานกับเว็บไซต์จะมีการทำงานประมวลผลแบบเป็นลำดับ (synchronous) โดยที่คำสั่งแรกจะต้องประมวลผลให้เสร็จสิ้นก่อนแล้วถึงจะทำงานในคำสั่งถัดไป แต่กระบวนการทำงานแบบเอแจ๊กซ์เมื่อบราวเซอร์ (Browser) ร้องขอข้อมูลไปยังเซิร์ฟเวอร์ (Server) บราวเซอร์จะไปทำงานคำสั่งถัดไปทันที (asynchronous) โดยที่ไม่ต้องรอการตอบกลับจากเซิร์ฟเวอร์ก่อน ทำให้การตอบสนองต่อผู้ใช้งานดูรวดเร็วขึ้น และเมื่อเซิร์ฟเวอร์ประมวลผลเสร็จแล้วถึงจะส่งข้อมูลกลับมาที่เอแจ๊กซ์และให้เอแจ๊กซ์ทำงานกับข้อมูลที่ส่งกลับมาอีกทีซึ่งสามารถเขียนโค้คการทำงานดังนี้ ตัวอย่างโค้คการทำงาน AJAX ของโดยใช้ jQuery และปัจจุบันในการเขียน JavaScript เพื่อเรียกใช้งาน AJAX นั้นเราไม่จำเป็นต้องพึ่งพา jQuery อีกต่อไปแล้วซึ่งสามารถเขียนโค้ดการทำงานได้ดังนี้ วิธีที่ 1  ใช้ XMLHttpRequest [1] วิธีที่ 2 ใช้ Fetch API [2] อ้างอิง: https://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery [1] https://developers.google.com/web/updates/2015/03/introduction-to-fetch [2] https://www.javascripttutorial.net/javascript-fetch-api/   วิดีโอ: https://www.youtube.com/watch?v=F1TECaRf-uA&feature=youtu.be&t=2375

รู้จักการจัดการข้อมูล JSON และการใช้งาน

รูปแบบข้อมูล JSON เป็นมาตรฐานในการแลกเปลี่ยนข้อมูลระหว่างเซิฟเวอร์และไคลเอนต์ที่ได้รับความนิยมในปัจจุบันซึ่งได้ถูกนำไปใช้งานอย่างแพร่หลายเช่นการเขียนโปรแกรมโดยใช้เทคนิค AJAX, RESTFul, เขียนคอนฟิกไฟล์ หรือการพัฒนา API เป็นต้น ด้วยคุณสมบัติของ JSON ที่เป็นไฟล์ประเภทข้อความ (Text based) ขนาดเล็กน้ำหนักเบา เป็นมาตรฐานกลางทุกภาษาสามารถใช้งานได้ง่ายทั้งการอ่านและเขียนที่มนุษย์สามารถอ่านเข้าใจได้ง่าย อักขระมาตารฐานของ JSON เครื่องหมาย “:” ใช้สำหรับแยกค่า name และ value เครื่องหมาย “,” ใช้สำหรับแยกข้อมุล name-value ในแต่ละคู่ เครื่องหมาย “{” และ “}” ระบุว่าข้อมูลเป็นออบเจ็ค เครื่องหมาย “[” และ “]” ระบุว่าข้อมูลเป็นอาเรย์ เครื่องหมาย “” (double quotes) ใช้เขียนค่า name-value ใน JSON ตัวอย่างการเขียนค่า Json – จำนวน 1 คู่ – หากมีมากกว่า … Read more

วิธีการ 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 ของ control นั้น ๆ control_prop : property ของ control ที่ต้องการกำหนดค่า value : ค่าที่ต้องการกำหนด   ตัวอย่างเช่น ต้องการกำหนดให้ … Read more

วิธีการตรวจสอบข้อมูลในรูปแบบ 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 เข้ามา เพื่อให้สามารถ Bypass การตรวจสอบได้ เช่น ตัวอย่าง SQL Injection ที่เขียนจาก PHP ที่หน้าที่รับ username และ password เข้ามาตรวจสอบ … Read more