iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
0
自我挑戰組

你看微客=[ 前端領域 - 超入門 ]系列 第 10

HTML 5---[ API:( 第三方網域 ) Web 資料請求 ]---無用小觀念

API:( 第三方網域 ) Web 資料請求

  • 若想要規避瀏覽器安全政策的限制來取得第三方網域的資料,可採用 JSONP 的方式。
  • JSONP ( JSON with Padding ) 是利用 < script > 標籤去讀取其他網域提供的 Javascript 檔的方式,來擷取 JSON 物件資料。( 將資料放在 JS 程式碼中傳遞 )
  • 當瀏覽器讀到網頁中的 < script > 元件時,便會向其 src 指向的 URL 發出 HTTP request,伺服器接到請求後,會將以物件參數形式包裹在 Javascript 函式中的 JSON 資料回傳
    範例:
<script src="http://第三方網域提供資料的URL/?callback=receiveFunc">
/// ?後面另外加上的字串,receiveFunc為指定用來接收資料的函式(自訂),callback為URL參數
  • 回傳的資料經過瀏覽器解析直譯後會,其資料型別會變成 Javascript 物件的形式
  • 若請求來源不明的第三方網域提供的 web 服務,其回應的資料中有被嵌入惡意程式碼的風險,故有安全漏洞上的疑慮,假使本身設計的網路程式需存取較為機密的資料,就最好不要使用此方式去做第三方網域的資料請求。
  • 若要定時自動發出 request 來更新最新資料,可利用 setInterval 設置定時呼叫函式處理器的方式來不斷replace < script > 標籤。( 若要避免瀏覽器快取而拿到重複的資料,可在 URL 後加上一組亂數 )
  • 許多 web 服務都有公開的 API,內含可讓使用者存取其服務的方式。

上一篇
HTML 5---[ API:( 同網域 ) Web 資料請求 ]---無用小觀念
下一篇
HTML 5---[ API:Web Storage 瀏覽器儲存 ]---無用小觀念
系列文
你看微客=[ 前端領域 - 超入門 ]30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言