Follow Fang!: YQL

顯示具有 YQL 標籤的文章。顯示所有文章

2014/02/27

YQL(Yahoo Query Language)

YQL全名為『Yahoo Query Language』，可以幫助Web開發者在Cross domain的處理

YQL有提供一個Console可以用，YQL使用方法很像在搜尋資料庫的語法：

SELECT * FROM type WHERE url="http://test.com"

YQL回傳的資料為XML或JSON，本文就採用JSON當回傳格式，像JSON還可以設定Callback Function

第一個例子以『高雄市公共腳踏車即時租賃站資訊』為例，上面僅提供XML格式，

透過YQL取得高雄復健醫療院所並繪製到Google Map

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <title>OpenData Demo1 by C.Y. Fang</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  function initialize() {
   var temp;
   var mapOptions = {
     zoom: 12,
     center: new google.maps.LatLng(22.631386, 120.301951),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
   var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   var url = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url%3D%22http%3A%2F%2Fdata.kaohsiung.gov.tw%2FOpendata%2FDownLoad.aspx%3FType%3D2%26CaseNo1%3DAE%26CaseNo2%3D6%26FileType%3D1%26Lang%3DC%22&format=json&diagnostics=true&callback=?";
 
   $.getJSON(url, function(data){
    temp = JSON.parse(data.query.results.body.p);

    if(temp){
     var m_length = temp.length;
     for(var index=0; index<m_length;index++){
 
      var marker = new google.maps.Marker({
       position: new google.maps.LatLng(temp[index].lat, temp[index].lng),
       title:temp[index].org_Text + "\n" 
            + temp[index].informaddress + "\n"
            + temp[index].informtel
      });

      marker.setMap(map);
     }
    }

   });
  }
 </script>
 <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 95% ; width: 100% }
 
    </style>
</head>
<body onload="initialize()">
 <div id="map"></div>
</body>
</html>

參考資料：
http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AE&CaseNo2=6&Lang=C
http://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AE&CaseNo2=6&FileType=1&Lang=C

透過YQL取得高雄市私立課後托育中心並繪製到Google Map

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <title>OpenData Demo1 by C.Y. Fang</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  function initialize() {
   var temp;
   var mapOptions = {
     zoom: 12,
     center: new google.maps.LatLng(22.631386, 120.301951),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
   var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   var url = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url%3D%22http%3A%2F%2Fdata.kaohsiung.gov.tw%2FOpendata%2FDownLoad.aspx%3FType%3D2%26CaseNo1%3DAE%26CaseNo2%3D12%26FileType%3D1%26Lang%3DC%22&format=json&diagnostics=true&callback=?";
 
   $.getJSON(url, function(data){
    temp = JSON.parse(data.query.results.body.p);
    
    if(temp){
     var m_length = temp.length;
     for(var index=0; index<m_length;index++){
 
      var marker = new google.maps.Marker({
       position: new google.maps.LatLng(temp[index].lat, temp[index].lng),
       title:temp[index].org_Text + "\n" 
            + temp[index].informaddress + "\n"
            + temp[index].servTime + "\n"
            + temp[index].informtel
      });

      marker.setMap(map);
     }
    }

   });
  }
 </script>
 <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 95% ; width: 100% }
 
    </style>
</head>
<body onload="initialize()">
 <div id="map"></div>
</body>
</html>

參考資料：
http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AE&CaseNo2=12&Lang=C
http://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AE&CaseNo2=12&FileType=1&Lang=C

2014/02/23

透過YQL取得高雄紅橘線捷運車站並繪製到Google Map

謝謝高雄市政府的開源資料，讓我順便學習YQL XDDDD

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <title>OpenData Demo1 by C.Y. Fang</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  function initialize() {
   var temp;
   var mapOptions = {
     zoom: 12,
     center: new google.maps.LatLng(22.631386, 120.301951),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
   var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdata.kaohsiung.gov.tw%2FOpendata%2FDownLoad.aspx%3FType%3D2%26CaseNo1%3DAU%26CaseNo2%3D1%26FileType%3D2%26Lang%3DC%22&format=json&callback=?";

   $.getJSON(url, function(data){
    temp = JSON.parse(data.query.results.body.p);
    if(temp){
     var m_length = temp.length;
     for(var index=0; index<m_length;index++){

      var marker = new google.maps.Marker({
       position: new google.maps.LatLng(temp[index].車站緯度, temp[index].車站經度),
       title:temp[index].車站中文名稱
      });
      marker.setMap(map);
     }

    }
   });
  }
 </script>
 <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 95% ; width: 100% }

    </style>
</head>
<body onload="initialize()">
 <div id="map"></div>
</body>
</html>

參考資料：
http://api.jquery.com/jquery.getjson/
http://developer.yahoo.com/yql/console/#h=desc+yql.env
http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=AU&CaseNo2=1&Lang=C
http://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AU&CaseNo2=1&FileType=2&Lang=C
https://developers.google.com/maps/documentation/javascript/examples/marker-simple

2013/09/13

最近需要去擷取到別人網頁的內容，並且分析裡面資料
在這邊以『Yahoo！』作為範例，單純擷取不分析

在分析別人網頁時常會遇到『Cross Domain』的問題，用Chrmoe開發者還會遇到『Access-Control-Allow-Origin』的問題

在此已經知道一些解決方式，不過這邊是參考『洪朝貴』老師的部落格『"資訊人權貴" 之家』所寫得『Cross Domain AJAX 抓網頁撈過界以及如何整合兩個部落格的標籤』

提到有一個套件是由James Padolsey本人寫所的『xdomainajax』套件，我那時在找套件的時候發現老師貼的網址都已經失連了

由老師的連結才知道開發者已經將Github名稱從『jamespadolsey』改為『padolsey』，算是一段蠻有趣的事情

對他有興趣的人可以直接到他網站『JAMES PADOLSEY』觀看，他不只xdomainajax一個作品而已，蠻厲害的開發者

有稍微看一下xdomainajax內容，對方用YQL實現跨站擷取的功能

YQL是什麼？YQL是由Yahoo!提供的Yahoo! Query Language，可以用SQL的方式去查詢，也能跨越去查詢其他網頁

訂閱：文章 (Atom)

Follow Fang!