บทความนี้เราจะสาธิตการเขียนโปรแกรมให้แสดง IP address บนหน้าบราวเซอร์
- เปิด editor หรือ IDE และสร้างไฟล์ html
ใน VS studio เราสามารถใส่ tag html อัตโนมัติโดยเริ่มพิมพ์ html จากนั้นเลือก html: 5 จาก drop-down list
2. ใส่ JavaScript element จะใส่ในไฟล์ html ไปเลย หรือ แยกเป็นไฟล์สกุล js ต่างหาก แล้วค่อยใส่ชื่อไฟล์ใน attribute src ของ script tag ก็ได้
3. เขียนโปรแกรมใน tag script
คำอธิบายโปรแกรม
JavaScript code จะอยู่ใน tag <script>
เริ่มบรรทัดที่ 12 เป็นการกำหนดตัวแปรให้ XMLHttpRequest ชื่อตัวแปรว่า xhr
XMLHttpRequest คืออะไร?
XMLHttpRequest หรือ XHR คือ API ที่อยู่ในรูปของ object โดยมี method สำหรับถ่ายโอนข้อมูลระหว่าง web browser และ web server
เราสร้าง object XMLHttpRequest โดยใช้คีย์เวิร์ด new และกำหนดให้เป็นค่าของตัวแปรตัวหนึ่ง (ตัวแปรในที่นี้คือ xhr)
object ตัวนี้จะทำหน้าที่ส่ง request จาก web browser ไปที่ server
บรรทัดที่ 13 สร้าง callback function ชื่อ requestProcess
เมื่อ object ส่ง request ไปแล้ว เราสามารถตามสถานะของ XHR ได้โดยเรียกใช้ onreadystatechange property ซึ่งใน onreadystatechange จะมี EventHandler ที่ return สถานะทุกครั้งที่ readyState ของ XMLHttpRequest เปลี่ยนไป
readyState คืออะไร?
readyState คือ property ที่จะ return สถานะของ XHR ฝั่ง client ว่าทำงานไปถึงขั้นไหนแล้วบ้าง XHR มีทั้งหมด 5 สถานะ
ค่า 0 สถานะ UNSENT หมายถึง สร้าง XHR client แล้วแต่ยังไม่ได้เรียก open() method
ค่า 1 สถานะ OPENED หมายถึง open() method ถูกเรียกแล้ว ในสถานะนี้สามารถตั้งค่า request headers ได้โดยใช้ setRequestHeader() method และสามารถเรียก send() method ได้เพื่อเริ่มดึงข้อมูล
ค่า 2 สถานะ HEADERS_RECEIVED หมายถึง เรียก send() method ไปแล้ว และได้รับ response headers แล้ว
ค่า 3 สถานะ LOADING หมายถึง กำลังโหลดเนื้อหาที่ขอไปอยู่ หาก responseType อยู่ในรูปของ “text” resposeText (เนื้อหาที่ได้รับจาก server หลังจากส่ง request ไป) จะค่อยๆปรากฏทีละส่วน
ค่า 4 สถานะ DONE หมายถึง กระบรวนการดึงข้อมูลเสร็จสิ้นลงแล้ว ซึ่งผลลัพท์ของการถ่ายโอนข้อมูลอาจจะประสบความสำเร็จหรือไม่ก็ได้
บรรทัดที่ 14 ใช้ conditional statement if เราต้องการข้อความแจ้งเตือนเมื่อการถ่ายโอนข้อมูลเสร็จสิ้นแล้วเท่านั้น
ใช้ this คีย์เวิร์ดเพื่ออ้างถึงว่าค่านี้เป็นค่าที่ได้จาก object ใน function ซึ่งก็คือ xhr กำหนดให้เช็คค่า readyState ค่าที่ 4
บรรทัดที่ 15 ใช้ conditional statement if/else เมื่อเช็คได้ค่าที่ 4 จาก condition แรกแล้ว ให้เช็ค HTTP status code ว่าตรงกับรหัส 200 หรือไม่ (อ่านเกี่ยวกับรหัส HTTP status)
ระบุใน else condition หากรหัสที่ได้ไม่ตรงกับ 200 ให้แสดง error
บรรทัดที่ 16 ข้อมูลที่ได้รับจาก server จะอยู่ในรูปของ String ใช้ parse() method แปลงข้อมูลที่เป็นข้อความให้กลายเป็น JavaScript object แทน
JSON คืออะไร?
JSON ย่อมาจาก JavaScript Object Notation เป็นรูปแบบการเปลี่ยนแปลงข้อมูล JSON จะอยู่ในรูปของข้อความเท่านั้น มนุษย์สามารถอ่านและเขียนได้ ส่วน machine สามารถวิเคราะห์และแยกคำได้
ในการแลกเปลี่ยนข้อมูลระหว่าง browser และ server ข้อมูลที่แลกเปลี่ยนต้องอยู่ในรูปของข้อความเท่านั้น เราสามารถแปลง JavaScript object ใดๆเป็น JSON และส่ง JSON ไปให้ server หรือ รับข้อมูลในรูปแบบของ JSON จาก server และแปลงออกมาเป็น JavaScript object ได้
JSON.parse() เป็น method สำหรับแปลงค่านี้
บรรทัดที่ 17 สร้าง popup box แสดง ip เครื่องที่ได้จาก server
หลังจากเขียน function เสร็จแล้ว ก็ต้องส่ง request ในบรรทัดต่อๆไปดังนี้
บรรทัดที่ 23 ใน open() method จะต้องใส่ argument 3 ตัว
- HTTP method ที่ต้องการเรียก: เนื่องจากเราต้องการรับข้อมูล เราจึงใช้ method GET
- URL ที่เราส่ง request ไป: สำหรับเลขที่ ip เราจะส่ง request ไปที่ https://ipinfo.io/json
- ต้องการให้เว็บเพจตอบสนองต่อผู้ใช้ขณะที่ส่ง request หรือไม่: ใส่ true เสมอ เพื่อให้เว็บเพจและ code อื่นๆยังคงรันต่อไปขณะที่รอ response จาก server
บรรทัดที่ 24 ใช้ send() method ส่ง request
จบการเขียนโปรแกรม
เรียกไฟล์ html บนบราวเซอร์
1. copy path ของไฟล์ ชื่อไฟล์ด้านซ้ายมือ คลิ้กขวา แล้วเลือก Copy Path
2. เปิด Chrome แล้ว paste + enter
Computer and Languages 