มาอัพเดทแล้ว! วันนี้จะขอแนะนำ Protocol ของ API ซึ่งกำลังมาแรง เพราะว่าใช้งานง่าย และสามารถทำงานผ่าน Client ได้เลย โดยไม่ต้องพึ่ง Server Side Script นั่นก็คือ JSONp

JSONp เป็น Protocol ที่ใช้เชื่อมเพื่อทำงานกับ Web Service จากที่ต่างๆ โดย API ที่ดังๆ มักจะเตรียมมาไว้ให้ โดยรูปแบบและลักษณะการทำงานจะเป็นดังนี้

1. Request ส่งไปที่ API โดย กำหนดชื่อ Function ที่จะให้ Return หรือ Callback นั่นเอง โดยผมจะยกตัวอย่าง Twitter ดังนี้

http://www.twitter.com/statuses/user_timeline/username.json?callback=twitterCallback&count=20

URL นี้เป็นการเรียก API ของ Twitter ผ่าน JSONp โดยกำหนดให้ Callback เป็น twitterCallback

2. รับค่าที่ Return โดยการสร้าง Tag Script ไว้รองรับ

http://www.twitter.com/statuses/user_timeline/tenshin99.json?callback=twitterCallback&count=20

โดยตัวอย่างผมจะเอา Twitter Account ของผมมาทดสอบดู ถ้าลองดูผ่าน URL ด้านบนจะสังเกตุเห็นได้ว่า ค่าทั้งหมดจะถูกบรรจุ ในรูปแบบของ JavaScript Function ที่มีชื่อว่า twitterCallback(....)

ต่อจากนั้นผมก็จะมาสร้าง Node เพื่อนำ URL นี้ใส่เข้าไป เพื่อที่จะนำค่ามาใช้งาน

var scriptEl = $(‘<script>’);
scriptEl.attr(’src’, apiUrl);
$(‘head’).append(scriptEl);
window[‘twitterCallback’] = function (obj) {
// do something here
}

** jQuery Style

จากนั้นผมก็สามารถนำค่าที่อยู่ ใน function มาใช้งานต่อได้เลยเช่น

$.each(obj, i, item) {
  alert(item.text);
}

 

แค่นี้ผมก็จะได้ค่ามาทั้งหมดเรียบร้อย ซึ่ง API แบบ JSONp นี้มีข้อดีคือ Implement ค่อนข้างง่าย และเสียเวลา Learning ค่อนข้างสั้น รวมไปถึง ไม่มีข้อจำกัดในเรื่อง Rate Limit ของ API เพราะว่า ให้ Client เป็นคนดึงขอมูลเข้ามาเอง จะสะดวกมากสำหรับ API ที่ดัก Server IP เพราะนี่มันต่างคนต่างดึง ใช้ Client IP แทน

แต่ข้อเสียก็มีไม่น้อยนั่นก็คือ API แบบนี้มักจะ สามารถทำได้แค่การ Fetch Data แต่มักจะไม่ Provide ส่วนของการ POST Parameters เข้าไป เช่นพวก Method Insert ต่างๆ แต่ผมว่า เ้ท่านี้ก็สะดวกมากพอแล้ว

และก็อีกเรื่องที่สำคัญกับคนสร้างเวบในยุดคนี้ก็คือ “มันไม่ Support SEO” เพราะว่าใช้การ Render ผ่าน DOM โดยตรง ไม่มี Source Code ในรูปแบบ ที่ Bot View ได้

เอาล่ะครับสาระสำคัญก็หมดไปแล้ว เอาเป็นว่าวันนี้ลากันไปเท่านี้แหละ สวัสดีครับ