>> เพื่อนๆคงทราบแล้วว่า เราสามารถขนส่งข้อมูลผ่าน HTTP protocol ได้หลายรูปแบบโดยการกำหนดผ่านทาง MIME Type หรือก็คือการระบุค่าสตริงดังกล่าวให้กับ Content-type (ขึ้นอยู่กับแต่ละภาษาว่าจะกำหนดอย่างไร)
>> MIME Type ต้องถูกกำหนดจากสองฝั่งเสมอ สองฝั่งที่ว่านี้ก็คือ client site และ server site เพื่อนๆสามารถดูวิธีการกำหนด MIME Type ให้กับแต่ละภาษายอดนิยมได้ที่นี้ รวมถึง MIME Type แต่ละรูปแบบด้วย
http://www.freeformatter.com/mime-types-list.html
>> เรากำลังพูดถึง application/json ซึ่งเป็น MIME Type รูปแบบหนึ่ง ที่จะขนส่งข้อมูลจาก client สู่ server หรือจาก server ไปยัง client โดยเพื่อนๆสามารถตรวจสอบว่า json ที่กำลังจะใช้เป็นข้อมูลนั้นถูกต้องตามไวยากรณ์หรือไม่ ได้ที่นี่
https://jsonformatter.curiousconcept.com/
ด้วยการทดลองเขียนสตริงนี้ลงไป
{"one": "Singular sensation", "two": "Beady little eyes"}
>> ครับ ผมกำลังจะสร้างเว็บจาวาตัวอย่างที่เราเตรียม json สตริงไว้ก่อน จากนั้นเตรียม servlet ให้อ่านมัน และ servlet นี้ถูกเรียกให้ดึงค่า json สตริงดังกล่าวมาแสดงผลเป็น option ของ select tag ที่ฝั่งหน้าบ้าน โดยกลไกการดึงค่าจะอาศัย post ของ jQuery เป็นตัวช่วยครับ
>> อ่านเพิ่มเติม
- post ของ jQuery
http://api.jquery.com/jquery.post/
- html ของ jQuery
http://api.jquery.com/html/
- select and option tag เผื่อว่าใครลืมไปแล้ว
http://www.w3schools.com/tags/tag_select.asp
>> เรามาเริ่มกันเลยดีกว่า เปิด Eclipse ตัวเก๋าขึ้นมา ผมใช้เวอร์ชัน 8.0.2 นะครับ จากนั้นสร้าง Dynamic Web Project
- ตั้งชื่อว่า GetJsonFromServletByJQuery
- รายละเอียดอื่นๆตามภาพด้านล่างนี้ครับ
>> อย่าเพิ่งกด Finish นะครับ กด Next ไปก่อนจนเจอหน้าต่าง Web Module ตรงนี้เพื่อนๆจะให้มัน Generate web.xml deployment descriptor ให้ด้วยก็ได้ แน่นอนว่าผมต้องการ
>> Eclipse ไม่สร้างไฟล์ index ให้เรา (หน้าแรกของเว็บ หรือก็คือหน้า home page) เราก็สร้างกันเอง คลิกขวาที่ folder ชื่อ WebContent เลือก New แล้วมองหา JSP File ตั้งชื่อว่า index (นามสกุลมันใส่ให้เอง)
>> ตามไปโหลด jQuery มาเพราะเราจำเป็นต้องใช้ พิมพ์ใน Google ใช้คีย์ว่า jquery download มองหาปุ่มสีส้มแล้วคลิก
>> ผมเลือก Download the compressed, production jQuery 1.113 ตามรูป (เลือกตัวที่บีบอัดแล้ว ไฟล์จะมีขนาดเล็ก แต่ดูโค้ดลำบากมาก ทว่าเราไม่ตามเข้ามาดูหรอก ดังนั้นตัวนี้แหละ)
>> ได้มาแล้วก็ย้ายมันเข้ามาในโปรเจ็กค์ ด้วยการสร้าง folder ชื่อ js ให้อยู่ภายใต้ WebContent ก่อน จากนั้นจึงลากไฟล์ jquery มาใส่
- กลับไปที่ index.jsp เขียนเพิ่มส่วนนำเข้า jquery ดังภาพด้านล่างนี้ ณ บรรทัดที่ 7
- จากนั้นคลิกขวาที่ folder ชื่อ js อีกครั้งเพื่อสร้างไฟล์ javascript เปล่าๆที่ลงท้ายด้วย .js จากภาพผมตั้งชื่อมันว่า my-jquery.js ครับ ณ บรรทัดที่ 8 ก็นำเข้าไฟล์ javascript เปล่าๆนี้เช่นกัน ซึ่งเราจะใช้มันเขียน jquery ในลำดับถัดไป
>> มาทดสอบดูว่าเราสามารถเขียน jquery ให้ทำงานได้หรือไม่ ด้วยโค้ดต่อไปนี้
>> แต่เอ๋! เรายังไม่มี server ที่จะใช้รัน web app นี้เลยนี่ คลิกขวาที่โปรเจ็กค์แล้วเลือก Run As ดูก่อน
>> อื่ม...Eclipse นี้ใหม่มาก อย่าสน ไม่มี server ก็หามาติดตั้งได้ไม่ยาก ณ หน้าต่าง Run On Server จงเลือก Manually define a new server เลือกรายการของ Apache แล้วเลือกโครงสร้างของ Tomcat v8.0 Server (ใครจะใช้เวอร์ชันต่ำกว่านี้ก็ได้นะ แต่ต้องหา Tomcat เวอร์ชันตามรายการที่เลือก) กด Next ครับ
>> ทิ้ง Eclipse ไว้ก่อน ออกท่องโลกกันต่อ พี่ Google พิมพ์ลงไปว่า apache tomcat download ลิงค์ของ Apache เองกดเข้าไปเลย เพื่อนๆสามารถมองหาเวอร์ชันที่ต้องการได้จากฝั่งซ้าย (ดูภาพประกอบนะ) ส่วนตัวผมเองขณะนี้เลือก Tomcat 8.0.24 Released แล้วกดลิ้งค์ Download เลย
>> มายังหน้าดาวน์โหลดของมัน ก็หาที่เป็นรุ่นที่เข้ากับระบบปฏิบัติการของเรา ของผมคือ 64-bit Windows zip กดไป
>> ได้มาแล้วก็แตก zip จากนั้นกลับมาหา Eclipse จากคราวก่อนเมื่อเรากด Next ก็จะพบกับหน้า Tomcat Server ที่ได้เลือกมา ให้เรากดปุ่ม Browse... ไปยัง folder ของเจ้าแมว Tomcat ที่เพิ่งแตก zip ไปสดๆ ก่อนจะกด Finish
>> ทีนี้คลิกขวาที่โปรเจ็กค์อีกครั้งแล้วทดสอบ Run As ไป ณ Server ที่เราเพิ่งจัดการติดตั้งแล้วเสร็จ แต้นแต้นนน! อิอิอิ
>> เห็นไหม ความสำเร็จเล็กๆก็เกิดขึ้นได้ ขอเพียงเรามีความเพียรพยายามมากพอ แต่อย่าเพิ่งดีใจเร็วเกินไป หัวใจของเรื่องนี้ยังไม่ได้เริ่มกันเลยนะเธอ เออสิ อ้อ!เธอจะลองคัดลอก URL ใน address bar ไปวางไว้ที่ Browser ตัวโปรดก็ได้นะ ก็จะได้อย่างที่ฉันได้ทำไปนี้
>> เราต้องมาสร้าง Servlet กันแล้วล่ะ ผมเริ่มด้วยการสร้าง package ก่อน ให้ชื่อว่า com.pros.controller ซึ่งอยู่ภายใต้ folder ชื่อ src ดังในภาพ (ก็คลิกขวาที่ src นั่นแล้วเลือก New ต่อด้วย Servlet ไงล่ะ) จากนั้นค่อยกด Next
>> จัดการเรื่อง URL Mapping เสียให้เรียบร้อย เอาเป็นว่าชื่อ JsonController นี่แหละ เพื่อเมื่อยิงมายังชื่อนี้แล้วก็จะมาเจอ servlet ตัวนี้เลย อย่าลืมกด Next
>> ณ หน้าต่าง Create Servlet จากในภาพผมเลือกที่จะ override เฉพาะเมธอด doPost ครับ คือจะให้ jquery ยิง post มาที่ doPost แห่งนี้ ดังนั้น interface ทั้งสองนี้ต้องสอดรับกันพอดี กด Finish
>> เรากำลังอยู่ที่คลาส JsonController กับเมธอด doPost ก่อนอื่นต้องเตรียม json ซึ่งก็คือสตริงรูปแบบธรรมดาที่เข้าคู่กันด้วย key กับ value โดยที่ระหว่าง key กับ value จะต้องคั่นด้วยเครื่องหมาย : (colon) และระหว่างแต่ละคู่จะต้องคั่นด้วยเครื่องหมาย , (comma) อีกนิดหนึ่ง... json ยอมรับให้ key กับ value อยู่ภายใต้เครื่องหมาย " (double quote) เท่านั้น ซึ่งพวกมันทั้งหมดจะต้องถูกห่อด้วยเครื่องหมายวงเล็บปีกกา { และ } ตามภาพผมสร้างขึ้นมาสามคู่
{ "one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep" }
>> ต่อมาก็ขอ response object มาระบุชนิดของข้อมูลที่จะส่งกลับไปยัง client เพราะข้อมูลนี้เป็น json จึงต้องบอกผ่าน content type เพื่อให้มันเข้าใจว่าเราใช้ MIME Type เป็น application/json ดังนี้
response.setContentType("application/json");
***หมายเหตุ หากต้องการให้มันเข้าใจว่ามีภาษาไทยอยู่ด้วย ก็ให้ใช้ระบบ UTF-8 ช่วย ดังนี้
response.setContentType("application/json; charset=utf-8");
จากนั้นจัดการสั่งออบเจ็กค์ PrintWriter พิมพ์ออกมา (out.print) บอกให้มันกวาดข้อมูลออกไปได้เลยโดยไม่ต้องรอให้บัฟเฟอร์เต็มก่อน (out.flush) สุดท้ายก็ปิดการใช้สตรีม (out.close)
***หมายเหตุ หากเราไม่ปิดสตรีมเองก็อย่าได้กังวลมากนัก เพราะโดยธรรมชาติแล้วแมวน้อย Tomcat จะปิดให้โดยอัตโนมัติ (แต่เมื่อไรอีกเรื่องหนึ่งนะ)
>> เราเตรียมหลังบ้านเรียบร้อย ต่อไปก็เวิร์กหน้าบ้านกันต่อ เปิดไฟล์ index.jsp เพิ่มบรรทัดที่ 11 ในรูปเข้าไปครับ เพราะเราจะอ่าน json จากหลังบ้านมาแสดง ณ จุดๆนี้
>> เกือบจะสุดท้ายแล้ว นี่คือหัวใจของเรื่องนี้เลยนะ เปิดไฟล์ my-jquery.js ที่ได้สร้างไว้ก่อนหน้านี้ขึ้นมา ลบโค้ดเก่าออกแล้วพิมพ์เข้าไปใหม่ตามภาพครับ
- บรรทัดที่ 2 คือ console.log เอาไว้ดูเป็น debug ด้วยการกด F12 ณ Chrome Browser ว่า .post ทำงานหรือเปล่า
- บรรทัดที่ 5 ประกาศอาเรย์แบบ javascript เตรียมไว้เก็บ option tag
- บรรทัดที่ 6 ใช้ .each ของ jquery อ่าน jsonData ที่ถูก return กลับมาในรูปแบบ callback function แยก json ออกเป็น key กับ value
- บรรทัดที่ 10 ใช้ jquery หา select tag ที่เพิ่งเขียนเพิ่มเข้าไป จากนั้นต่อ option tag ให้กับมัน
- บรรทัดที่ 12 ระบุว่าผลลัพธ์ของการ callback คือรูปแบบ json (มิเช่นนั้นมันอาจตีความไม่ถูกต้อง)
>> รันผ่าน server อีกครั้งผลลัพธ์จึงเป็นที่ประจักษ์แก่สายตา! (ฮ่าๆๆๆ!!!)
***หมายเหตุ หาก Eclipse ของเพื่อนๆไม่เห็นผลการเปลี่ยนแปลงใดๆหลังจากแก้ไขไฟล์ jquery หรืออื่นๆโปรดตรวจสอบว่า เราได้บอกให้ Eclipse มัน reload โปรเจ็กค์ให้หรือไม่ ถ้ายังก็ควรเลือก Build Automatically ไว้ด้วย
>> สวัสดี
ไม่มีความคิดเห็น:
แสดงความคิดเห็น