บทความนี้เราจะสาธิตการเขียนโปรแกรมให้แสดง IP address บนหน้าบราวเซอร์

ตัวอย่างการแสดง IP address
  1. เปิด editor หรือ IDE และสร้างไฟล์ html

ใน VS studio เราสามารถใส่ tag html อัตโนมัติโดยเริ่มพิมพ์ html จากนั้นเลือก html: 5 จาก drop-down list

VS studio จะใส่ tag ช่วง head กับ bodyให้

2. ใส่ JavaScript element จะใส่ในไฟล์ html ไปเลย หรือ แยกเป็นไฟล์สกุล js ต่างหาก แล้วค่อยใส่ชื่อไฟล์ใน attribute src ของ script tag ก็ได้

ใส่ script tag ใน body html

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 ตัว

  1. HTTP method ที่ต้องการเรียก: เนื่องจากเราต้องการรับข้อมูล เราจึงใช้ method GET
  2. URL ที่เราส่ง request ไป: สำหรับเลขที่ ip เราจะส่ง request ไปที่ https://ipinfo.io/json
  3. ต้องการให้เว็บเพจตอบสนองต่อผู้ใช้ขณะที่ส่ง request หรือไม่: ใส่ true เสมอ เพื่อให้เว็บเพจและ code อื่นๆยังคงรันต่อไปขณะที่รอ response จาก server

บรรทัดที่ 24 ใช้ send() method ส่ง request

จบการเขียนโปรแกรม

เรียกไฟล์ html บนบราวเซอร์

1. copy path ของไฟล์ ชื่อไฟล์ด้านซ้ายมือ คลิ้กขวา แล้วเลือก Copy Path

2. เปิด Chrome แล้ว paste + enter