What the heck is JSONP?

Posted by – December 4, 2010

เคยทำให้มันทำงานได้ แต่ไม่เข้าใจเลยว่าเบื้องหลังมันมีอะไร

JSONP มีไว้หลีกเลี่ยงปัญหา same origin policy คือ ถ้ามี request จาก browser เช่น javascript หรือ flash มันจะไม่อนุญาตให้เพราะต้องป้องกันเรื่อง script injection คือสามารถเข้าถึง resource อย่าง http cookies(session หรือ authentication หลายๆ อย่างก็เก็บใน cookies) ได้

เราแก้มันไม่ได้ แต่หลีกเลี่ยงได้ โดยแนวคิดเริ่มแรกก็มาจากเราสามารถเรียก javascript จาก script tag จากไหนก็ได้

<script src="http://somewhere/jsfile" type="text/javascript"></script>

หลังจากที่โหลดเสร็จมันก็จะ execute javascript ก้อนนี้ได้

แต่ถ้า request ไปแล้วได้ json กลับมา execute ได้จริง แต่ไม่มีอะไรเกิดขึ้น น่าจะมีอะไรมารองรับ json ก้อนนี้หน่อย แต่การที่จะให้ server return อะไรแบบนี้มันก็ดูวุ่นวาย

var json_var = {'var1':'val1'};

ที่น่าจะ ok ก็น่าจะเป็นการที่เราสามารถกำหนด callback ของเราเองได้

myCallback({'var1':'val1'});

โดยตรงส่วนนี้ server ต้องเตรียมให้เราด้วย ซึ่งตรงนี้จะเป็น padding สำหรับรองรับข้อมูลเข้ามา

หน้าที่ต่อไปของเราก็คือประกาศ function นี้ (myCallback) ใน code ของเรา เพื่อรองรับข้อมูล

โดยตัวอย่างจาก graph ของ facebook ก็อนุญาตให้เราเพิ่ม callback นี้ได้เอง

https://graph.facebook.com/175459332480559/albums?callback=myCallback

โดยใส่ ?callback=yourCallback เข้าไป

แต่สิ่งที่ทำให้ผมเข้าใจผิดตอนแรก เพราะจาก jQuery ที่สามารถประกาศ dataType เป็น jsonp ผมก็เข้าใจว่ามันเป็น async  request ที่สามารถข้าม domain name บน browser ได้ หลงเข้าใจผิดอยู่นาน ซึ่งจริงๆ แล้วเบื้องหลังมันก็เตรียม function แบบนี้ให้เราอยู่ดี หน้าตาของ uri จะเป็นแบบนี้

https://graph.facebook.com/19292868552?callback=jsonp1291493679672

ตัว jsonp1291493679672 จะเป็น callback function ที่ถูกประกาศไว้ใน window แบบ window['jsonp1291493679672'] ซึ่งจะเซ็ต data แล้วคืนค่ามาให้ callback ที่เราประกาศไว้ตอนเรียกด้วย ajax อีกที โดย jQuery จะไปต่อท้าย uri ด้วย ?callback=? จากนั้นจะแทนที่ ? ด้วย jsonp1291493679672 ซึ่ง ตัวเลขด้านหลังมาจาก now()

0 Comments on What the heck is JSONP?

Respond

Respond

Comments

Comments