DominixZ : Live Smart & Geeky

หลังจากที่ผมใช้ jQuery เป็น Javascript Framework หลักมาตลอดตอนนี้ ผมพึงได้ทำอะไรใหม่ๆ มากกว่าที่ผมทำอยู่เป็นประจำเช่น การทำ Web Service ที่ Javascript จะต้องเป็นคนเรียก วันนี้ผมก็พึุงได้รู้ว่าจริงๆแล้ว jQuery Ajax ไม่ได้โหลด Cross Domain ได้ทุก function หลังจากลอง Search ดูก็พึุงรู้ว่าจริงๆแล้วตอนนี้มีแค่

• getJSON
• getScript
• $.ajax

เท่านั้นที่ทำได้ โดย $.ajax ก็คือการ setup ให้ datatype เป็น JSONP  หรือไม่ก็ Script เท่านั้นถึงทำได้ ดังนั้นเวลาเรียกให้ควร check เรื่องพวกนี้เป็นพิเศษ เพราะการทำภายใต้ domain เดียวกันนั้น คุณสามารถใช้พวก $.get , $.post ได้ตามสะดวก แต่พอจะทำ cross domain แล้วนั้นกลับทำไม่ได้ ดังนั้น ถ้าคิดจะทำ Web Service ที่ Javascript สามารถเรียกได้ ควรทดสอบด้วย getJSON หรือ getScript เท่านั้นครับ

ส่วนถ้าใช้กับพวก Server Side Script จะมีวิธีที่เรียกว่า Proxy ซึ่งทำให้สะดวกในการทำงาน ซึ่งเราสามารถใช้ได้ทุก Ajax เช่น $.get $.post ก็ใช้ได้หมด โดยมีตัวอย่างที่ทำเข้าใจอย่างมากของฝรั่งเขา ดูได้ที่นี้เลยครับ
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html

ปล. สำหรับลิงค์ที่้ให้ไป อ่าน comment ด้วยจะได้เห็นทางเลือกที่เจ๋งๆอีกนิดหน่อย

หลังจากทำงานกับที่ Duocore.tv มาก็เจอปัญหาในการโค้ดมากมาย โดยผมนำมาเขียนเตือนตัวเองไว้ แล้วก็เป็นประโยชน์สำคัญท่านอื่นๆที่อาจจะเคยเจอปัญหานี้ หรืออนาคตอาจจะเจอ

1. Web Service กับ JSON หรือ AJAX Cross Domain

โดยปกติแล้วเราจะใช้ Javascript ดึงข้อมูลจากฝั่ง Server Side Script ภายใต้โดเมนเดียวกันแล้วมันได้ ผลแต่ถ้าเราจะทำ Ajax Cross Domain ด้วย JSON นั้นเราต้องรู้จักสิ่งที่เรียกว่า JSONP ซึ่งเคยเขียนในสองสามบทความที่แล้วกับวิธีทำ ซึ่งปัญหานี้ ถ้าเราไม่กะเปิด Service ให้คนอื่นใช้คงไม่เจอ แล้วเมื่อก่อนก็นึกว่ามันง่ายกว่านี้ แต่จริงๆมันต้องแก้ด้วย JSONP นี้เอง แต่ถ้าเป็นพวก XML แล้วนั้นจะไม่ต้องใช้ JSONP มาแก้ปัญหา

บทสรุปของวิธีแก้ปัญหา : ใช้ JSONP ในการส่งข้อมูลแบบ JSON ข้าม Domain หรือใช้ข้อมูลแบบ XML เพื่อไม่ต้องยุ่งกับ JSONP

2.  Asynchronous และ Synchronous

ในการเขียน Javascript หรือ jQuery และ AJAX คงเป็นเรื่องที่ขาดไม่ได้สำหรับเว็บ 2.0 ดังนั้นเราหลีกเลี้ยงที่จะไม่เจอปัญหานี้ในบางครั้งไม่ได้ ในกรณีของผมคือเจอกรณีที่เราต้องการให้ข้อมูลโหลดมาเสร็จก่อน แล้วค่อยที่จะทำคำสั่งต่อไปเรื่อยๆ ซึ่งผมก็เจอข้อจำกัดบางอย่างของ JSONP ของ jQuery นั้นก็คือมันไม่สามารถทำเป็น Synchronous ได้ ดังนั้นในกรณีที่เราต้องการให้มีการรอข้อมูลก่อน แล้วค่อยทำงานอย่างอื่นต่อจึงทำไม่ได้นั้นเอง

บทสรุปของวิธีแก้ปัญหา : ส่งข้อมูลด้วย XML หรือทำให้การท่อง DOM เป็นแบบ Static ที่สุด ไม่งั้นอาจจะเจอกรณีที่ข้อมูลส่งมาช้ากว่าคำสั่งที่สั่งให้เปลี่ยน DOM แบบ Dynamic

3. XML-RPC

เรื่องของ XML-RPC อาจเป็นเรื่องน่างง ว่าเป็นปัญหาได้อย่างไร ผมต้องใช้เจ้า function ที่ชื่อว่า xmlrpc_encode_request เป็น function ที่เอาไว้ส่ง xml rpc แต่มันดันต้องใช้ extension ของ php อย่าง xmlrpc ซึ่งต้องเปิดใช้งานก่อน ซึ่งใน Windows หรือเครื่องเราก็ไม่มีปัญหาอะไรต้องตกใจ แต่พอขึ้นโฮสที่เป็น Linux XMLRPC ตัวนี้ไม่สามารถเปิดใช้งานได้ง่ายๆ เพราะโฮสส่วนใหญ่ไม่ได้ compile เจ้า xmlrpc ตัวนี้ไว้ เลยดังนั้นการเปิดใช้งานมันจึงเป็นเรื่องที่น่าปวดหัว

วิธีแก้ปัญหา : แจ้งเจ้าของโฮสให้เปิดให้ แต่ถ้าเจ้าของโฮสเปิดไม่เป็น เห็นทีต้องใช้ library ตัวอื่นแล้วแทนแล้วเช่น XML-RPC ของ CodeIgniter

4. ข้อผิดพลาดในการเขียนโค้ด inline css

ระหว่างการทำงานภาษาที่ต้องเขียนก็มีมากมายทั้ง CSS , JavaScript , HTML , PHP , jQuery ซึ่งบางทีมันก็น่าปวดหัวจนมึนไปและข้อผิดพลาดอาจเกิดขึ้นได้ตลอดเวลา รวมถึงความที่เป็นมนุษย์มักคิดเข้าข้างตัวเอง หรือมองข้ามสิ่งเล็กๆน้อยไป กรณีที่ผมเจอก็คือเขียน inline css ผิดนั้นเอง เช่น style=”width:480; height:270;” ซึ่งดูผ่านๆก็น่าจะใช้ได้ แล้วการ render ในบาง browser สามารถ render ได้ แต่ไม่ได้ในบาง browser แล้วยังได้ในบางกรณี และไม่ได้ในหลายกรณีซึ่งทำให้เกิดความสับสนกับคนเีขียนได้อย่างมาก

วิธีแก้ปัญหา : จงเชื่อในมาตรฐานและการตรวจสอบของคอมพิวเตอร์ในกรณีนี้ก็คงเป็น HTML Validator เป็นต้น

5. แก้บัค,อัพเกรด,เปลี่ยนความต้องการ

ทำให้สามารถเกิดบัคอีกตัวขึ้นมาได้  หรือการคุยงานมาไม่ถูกต้อง สามารถทำให้เกิดปัญหาทำให้เราแก้ซ้ำซากได้อยู่ตลอดเวลา หรือสิ่งที่ให้ทำเป็นอย่างหนึ่งแต่การนำไปใช้จริงเป็นอีกอย่าง

วิธีแก้ปัญหา : เขียน Test Cases หรือ Test Script ช่วยทำให้ค้นพบบัคได้เร็วขึ้น แล้วก็คุยความต้องการให้ถูกต้อง ถ้าเป็นไปได้ออกแบบให้เป็น Dynamic และง่ายต่อการแก้ไข

ครั้งนี้เอาไป 5 อย่างก่อนที่เจอมาแล้วจำได้ เดียวไว้อนาคตผมพบเจออะไรอีก เดียวจะนำมาแชร์ให้คนอื่นอ่านกันครับผม การแชร์ความสำเร็จเป็นสิ่งที่ดี แต่การแชร์ความผิดพลาดจะทำให้คนที่มาอ่านสามารถเตรียมพร้อมกับปัญหาที่จะเกิดขึ้นหรือแก้ไขในอนาคตได้ วันนี้ลาไปก่อนสวัสดีครับ

เอาละครับ วันนี้ผมได้เจอปัญหา Ajax Cross Domain อย่างจริงๆจังๆ แล้วตกผลึกความรู้ได้มาพอสมควรครับ ทุกคนผมติต่างว่ารู้จัก Web Service นะครับโดยวันนี้เราจะมาทำแบบ REST กันครับ โดยผมมาพร้อมกับปัญหาที่ผมเจอบ่อยๆมีดังนี้ครับ

• สามารถเรียก Web Service ได้จาก Domain เดียวกัน
• สามารถเรียก Web Service จาก Host ได้จาก localhost
• แต่ไม่สามารถเรียกจาก host หนึ่งไปยังอีก host หนึ่งได้

หลังจากที่ผมได้ลองทำ Web Service มาหลายแบบ แบบที่ผมชอบที่สุดก็คงหนีไม่พ้นแบบ JSON แน่นอนครับ เพราะใน php มันมี function ที่ชื่อว่า json_encode ซึ่งเปลี่ยน array ของ php ไปเป็น json ให้เราได้ทันที แต่วันนี้ผมจะเอาตัวอย่างที่ผมทำผิดแล้ว วันนี้ได้เรียนรู้มาบอกต่อกันครับ ซึ่งใน php ตัวที่ผมทำ web service นั้นชอบทำแบบนี้ครับ

echo json_encode($array);

ซึ่งวิธีนี้จริงๆแล้วน่าจะใช้ได้ดีกับหมดทุกระบบแล้วนะครับ เพราะปกติถ้าใน php เรามี function นี้ครับ file_get_content ซึ่งอำนวยความสะดวกเรื่องนี้ให้เรา เสร็จแล้วเราก็ json_decode จบได้ข้อมูลมาใช้ละง่ายโคตรๆ แต่กระนั้นครับ แล้วถ้าเราจะใช้ Javascript ดึง Web Service ของเราละครับ ยิ่งถ้าใช้ jQuery ก็คงยิ่งหมูเลย

$.getJSON(url,callback);

แค่นี้ก็น่าจะเพียงพอ แต่ผลที่ได้คือ “ถ้าไม่อยู่ใน domain เดียวกัน หรือไม่มีการเปิดให้สิทธิทำ cross-domain ก็จะใช้ไม่ได้ครับ” ในที่นี้ผมหมายถึง เวลา internet explorer จะขึ้น privacy ซึ่งถ้าเราตกลง มันก็ยอมให้เราทำ cross-domain ได้ซึ่ง การใช้ json_encode ถึงเพียงพอครับ แต่พอเอาไปขึ้น host จริงๆคนอื่นที่เขาใช้ javascript ดึงก็ใช้ไม่ได้อยู่ดีแล้วเราจะแก้ปัญหาอย่างไรละ ? ผมเลยค้นหาวิธีต่างๆซึ่ง JSONP เนี้ยเป็นคำตอบ แล้วทำยังไงละ ? วันนี้ผมเอาวิธีทำมาให้เลยละกัน โดย ต้องขอบคุณ Tee++ จาก jQueryTips ซึ่งเป็นคนนำทางผมครับ ผมแนะนำให้อ่านของคุณ Tee++ ก่อนนะครับเอาละประเด็นคืออยู่ที่บรรทัดนี้ครับ

echo $_GET[‘jsoncallback’].‘(’.$json->encode($arr).‘)’; // ของคุณ Tee++ ผมข้อแก้เป็นด่านล่าง เพื่อลักษณะใกล้เคียง
echo $_GET[‘jsoncallback’].‘(’.json_encode($arr).‘)’;

ซึ่งสังเกตว่าจะใช้ . นะครับ ไม่ใช่ = แล้วจะตามวงเล็บเปิดแล้วลงท้ายด้วยวงเล็บปิด ซึ่งเป็นตามหลัก JSONP ส่วนสาเหตุที่ทำไมต้องทำเช่นนี้ ผมยังไม่แน่ใจนัก แต่อธิบายคร่าวๆได้ว่า การใช้ Ajax Cross Domain ตรงๆนั้นมันมีึความเสี่ยงสูง ดังนั้นเลยเกิด JSONP (JSON with Padding) เพื่อมาช่วย แล้วการที่เรามีการใส่ตัวแปลสักตัว ในตัวอย่างคือ jsoncallback แล้วมีการใส่วงเล็บเปิดปิดไปนั้น เืพื่อให้ทางฝั่ง Client สามารถเล่นกับข้อมูลได้สะดวก โดยถ้าเป็น jQuery ก็จะมีการใส่่  jsonp1236274532659 (แล้วแต่มันจะ genให้)แบบนี้เป็นต้น ซึ่งผลลัพธ์ตอนจบมันจะกลายเป็นประมาณนี้

jsonp1236274532659({"name":"dominixz","url":"http:\/\/dominixz.com"})

จะสังเกตว่าพอสามารถใส่อะไรลงไปข้างหน้าได้ มันจะกลายเป็น function !!! ซึ่งทำให้ทางฝั่ง client เล่นอะไรกับข้อมูลนี้ก็ได้ โดยถ้าให้ผมเดาเป็นผมกรณีนี้ใน function นั้นก็อาจมีการ set ค่าตัวแปรค่างๆหรือแม้กระทั่ง eval ข้อมูลเลยก็เป็นได้ แล้วแต่เราจะเขียน โดยถ้าใช้พวก Framework นั้นมีการจัดการกับ JSONP เกือบทุกตัวแล้วละไม่ว่าจะเป็น MooTools , jQuery , Dojo ฯลฯ อธิบายพอเห็นภาพละ แล้ววิธีเรียกใน jQuery ละทำยังไงก็ง่ายๆเลยครับ

$.getJSON(url+”?jsoncallback=?”,callback);

โดยผมมีตัวแบบจริงสักอันละกันครับ โดยถ้าผมมี Web Services ของ CodeIgniter ดังนี้ครับ http://localhost/codezend/index.php/webservices/test ดังนั้นโค้ดนี้ผมจะได้ url เป็นดังนี้ครับ

$.getJSON(“http://localhost/codezend/index.php/webservices/test?jsoncallback=?”,callback);

ซึ่งใน web service ของผมก็ต้องมีการ set ค่า jsoncallback เหมือนกันไม่งั้นก็ใช้ไม่ได้ โดยถ้าไม่ได้ใช้ CodeIgniter แค่นี้ก็คงจบบทความแล้วแต่ CodeIgniter ถ้าทำแค่นี้ไม่ได้แน่ครับ เพราะเจ้า CodeIgniter ดันไม่ยอมให้ใส่ ?jsoncallback=? อย่างงี้ตอนเริ่มต้นได้นี้สิ โดยถ้าต้องการใช้เราจะต้องไป set ใน config.php ให้ enable_query_strings เป็น TRUE ซะก่อนนะครับ

$config['enable_query_strings'] = TRUE;

เป็นอันจบครับ ไว้ผมมีประสบการณ์อะไรเพิ่มเติมจะนำมาเล่าต่อครับผม วันนี้ไปนอนแล้วครับสวัสดีครับ

เบื่อไหม ? ที่ทำเว็บแล้วใน Browser ทุกตัวก็ดูดี ยกเว้น IE6 ทุกวันนี้ใครยังทนทุกที่จะต้องทำงานเกี่ยวกับเว็บให้ลูกค้า ก็ยังเจอมันหลอกหลอน อยู่เป็นแน่แท้ ผมไม่มั่นใจว่าคนส่วนใหญ่ทำไมยังใช้ IE6 กัน แต่ที่แน่ๆคือมีคนใช้อยู่ต้องยอมรับความจริง แต่ที่มาประกาศวันนี้คือเชิญชวนให้ทุกท่านที่ยังใช้ IE6 อยู่เปลี่ยนกันเถอะครับ เพราะคนทำเว็บลำบากที่จะต้องทำให้ IE6 แสดงผลเหมือน Browser ตัวอื่น ข้อเสียที่เห็นได้บ่อยๆใน IE6

• PNG แบบโปรงใสใช้ไม่ได้ใน IE6 ต้องใช้ Javascript แก้
• Layout ที่เพี้ยนเวลาใช้ padding หรือ margin

ทางแก้ปัญหาก็คือเชิญชวนให้ทุกๆคนมาใช้ IE7 , Firefox , Safari , Chrome หรือแม้แต่ Opera กันดีกว่าครับคนทำเว็บจะได้ไม่ต้องมาแก้ปัญหาจุกจิก แล้วเอาเวลาไปพัฒนางานให้ดีขึ้นแทนกันครับ เพราะถ้านักพัฒนาต้องแก้ปัญหพวกนี้แล้วอย่างน้อยต้องเสียเวลาไปทำเรื่องพวกนี้ครับ

• PNG โปรงใส
• CSS reset
• IE6 Hack
• Javascript Framework problem (ถ้าใช้ jQuery บาง effect ก็ไม่ติด)

อย่างน้อยกว่าจะแก้สิ่งเหล่านี้อาจจะเสียเวลาหลายวันหรือไม่ก็หลายอาทิตย์เลยก็ได้ครับ สำหรับงานขนาดใหญ่ หรือไม่ได้วางแผนไว้ตั้งแต่ต้น ฝากเนื้อหานี้ให้ Blogger ช่วยกันโพส รณรงค์เรื่องนี้กัน และเิชิญชวนให้ผู้อ่านทุกท่านที่ยังใช้ IE6 upgrade เป็น IE7 เถอะครับหรือไม่ก็เปลี่ยนไปใช้ Browser ตัวอื่นกันครับ

สำหรับชาว Blogger ทุกท่านช่วยกัน Tag อันนี้กันครับ : เลิกใช้ IE6 , abandon-ie6

ผมไม่ค่อยมีกะจิตกะใจอัพบล็อคเท่าไรด้วยอารมณ์เซ็งๆ แล้วก็งานที่เข้ามาอย่างล้นเหลือ แต่ก็ไม่ทำสักที วันนี้เลยเอาเว็บไซค์มาฝาก สำหรับคนที่อยากจะพัฒนาตัวเองในด้านต่างๆไม่ว่าจะโปรแกรมมิ่งหรือพัฒนาตัวเอง โดยในตอนนี้ผมมักจะใช้บริการเหล่านี้เป็นประจำ

1. Google Alerts

ไม่ใช้ไม่ได้แล้วสำหรับคนที่อยากจะหาเนื้อหาเฉพาะที่ชอบเฉพาะเจาะจง โดยวิธีก็คือใส่คำที่ต้องการจะหา โดย Google จะเอาอันที่มัน index ได้ใหม่ๆเข้ามาให้เราอ่าน โดยผมใช้มันหาบทความเกี่ยวกับ jQuery , Ruby , Rails , CodeIgniter ครับผม

2. Howcast

เว็บไซต์นี้เป็นแหล่งที่ผมชอบมากๆ มันเป็นเรื่องเกี่ยวกับ How to ล้วนๆไม่ว่าจะเป็นเรื่องทำอาหาร, วิธีทำ home spa และอื่นๆอีกมากมาย พักจากการดูข่าว it ก็จะมาดูนี้ละครับ

3. Web Design Resources I use

อันนี้เจอโดย Google Alert ครับโดยเป็นแหล่งรวมสิ่งต่างๆเกี่ยวกับพวก PHP , JavaScript แล้วก็เทคนิคทั่วไป รวมถึง software ต่างๆ

4. 50 Extremely Useful PHP Tools

บทความนี้เป็นบทความแนะนำสำหรับคนอยากเก่ง PHP ขึ้นไปอีก

5.iUI / iPhone Unlock Screen

สำหรับคนที่อยากจะทำหน้า Web สำหรับ iPhone อย่าพลาด 2 ตัวนี้เป็นอันขาดโดยเฉพาะตัวแรก

6.CrawlRapidShare

สุดยอดเครื่องมือสำหรับค้นหาไฟล์ที่ไปฝากไว้บนโฮส Rapidshare ซึ่งบอกได้คำเดียวว่าเทพมาก

7.Improve your jQuery

25 ตัวอย่างที่จะทำให้คุณเขียน jQuery ได้ดีขึ้นมากๆ

8.CodeIgniter User’s Guide

สำหรับคนที่พึงเริ่มต้นอยากจะใช้ Framework ของ PHP แต่อ่านอังกฤษไม่่ค่อยแข็งแรง ผมแนะนำ CodeIgniter ซึ่งเขียนไม่ยากและผมกำลังทำการแปลอยู่เรื่อยๆ

9.Twitter

งงอะเดะทำไมผมถึงบอกเป็น Twitter ความรู้ / ประสบการณ์ของคนอื่นจะเป็นแหล่งข้อมูลที่ทำให้คุณพัฒนาได้มากมาย ไม่เชื่อลอง follow เพื่อนๆใน twitter ผมทั้งหมดดูสิ

จบบทความที่เลข 9 เป็นเลขที่ดีสำหรับผมเพราะผมเกิดวันที่ 9 วันนี้ผมต้องไปก่อนแล้ว ไว้จะมาอัปเดตอีกเรื่อยๆนะครับ