iT邦幫忙

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

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

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

  • 分享至 

  • xImage
  •  

API:( 同網域 ) Web 資料請求

  • 欲連結到某網站時,瀏覽器會對其網路伺服器發出 HTTP request,伺服器收到請求並 response 網頁資訊,除了網頁資訊外,瀏覽器亦可透過 HTTP request 向其伺服器要求提供其他資料訊息
  • 首先我們必須知道要去何處取得資料( 即資料所在的網址 URL ),再使用 XMLHttpRequest 建構式來建立一個 request 物件。
    範例:
var url = "資料所在網址";
var requestObj = new XMLHttpRequest();
  • 利用 request 物件的 open 方法,設置擷取 HTTP 資料的方式及資料位置,待資料回傳後,呼叫 callback 處理程序。
    範例:
requestObj.open = ( "GET" , url )  
requestObj.onload = function () { 
    if ( requestObj.status === 200 ) {  
    console.log( requestObj.responseText ); 
    } 
}
request.send(); 

\\ GET 是擷取資料的標準方式
\\ 設置資料回傳完後(onload)的處理程序
\\ 200是伺服器回傳的代碼,代表接受請求,回傳入status特性
\\ 擷取的回傳資料為字串形式,被儲存在 responseText 裡
  • 利用此方式能在不重新載入整個頁面的情況下,更新網頁上部分資料。
  • 可以截取各種不同的資料格式,如 JSON 、 XML等。
  • JSON ( JavaScript Object Notation ) 的資料格式有易讀、體積小、源於 Javascript 等特性,逐漸取代 XML 成為主流,能用於在網路上交換 Javascript 資料配合 Web Storage API 儲存本地端資料等多種廣泛的用途。
  • 採用 XMLHttpRequest 方式只能處理同網域的資料,瀏覽器的安全政策禁止我們從不同於網頁所在地的網域擷取資料

上一篇
HTML 5---[ API:地理位置 Geolacation ]---無用小觀念
下一篇
HTML 5---[ API:( 第三方網域 ) Web 資料請求 ]---無用小觀念
系列文
你看微客=[ 前端領域 - 超入門 ]30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言