เข้าใจกับ jQuery Ajax Cross Domain

หลังจากที่ผมใช้ 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 ด้วยจะได้เห็นทางเลือกที่เจ๋งๆอีกนิดหน่อย

ปัญหางานทั่วไปที่เจอในงานพัฒนาเว็บ (1)

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

Next Page »