Yahoo!用戶界面博客（YUIBlog）

問薩蒂揚：使用YQL的和YUI與YQLDataSource

薩蒂揚（又名丹尼爾·巴雷羅）是一個長期的YUI貢獻者和最豐富的，慷慨的專家之一YUI的論壇 。 他也是新書上YUI的2.8.0，2.8.0銳作者：圖書館學習 。 這在“向薩蒂揚”系列文章，建議由麥克·哈特菲爾德 。 薩蒂揚將被作為該系列的一部分YUIBlog回答在未來幾週內的一些其他問題。

前往知道YQL的

Yahoo!查詢語言， YQL的 ，是一個偉大的方式訪問一個巨大的信息通過一個標準的易於使用的界面。 有味道是多麼容易，比較老藝術家服務的文件，這個簡單的YQL的查詢： select * from music.artist.search where keyword='Rihanna'.

YQL的控制台是非常容易使用。 它列出了許多可用的表和對他們的樣本查詢，讓您可以輕鬆探索通過它訪問的信息財富。 YQL的並不存儲數據，相反，它是一個查詢到其他數據庫的接口或API。 從Yahoo!來源YQL的名單是142，但如果你點擊顯示社區Tables鏈接，計數上升到825，包括亞馬遜，Facebook，Netflix公司和紐約時報的公共數據的訪問表的數量。 （這就是你會發現YUI的一些相關的表了。）

有時，這些表需要一個訪問鍵，你必須取得它們的主人，沒有它，你可能要么無法執行查詢，或你會得到一個結果的數量有限。 YQL的服務本身有兩個地址，一個市民和其他需要註冊，並提供更好的性能，當然，你需要從它的一些表來訪問私人數據的驗證。

YQL的默認情況下，將只提供約10條記錄樣本答复。 您可以指定表名後括號中加入請求數量的結果，例如大量的結果：

 選擇*從music.artist.search（22）其中keyword =“麥當娜” 

下一步的數據表在YQL的控制台，1 降序 “按鈕，將顯示表的名稱權，每當你鼠標在一個表的名稱列表中的每個表的名稱。 這將提供一個表中的描述，通常會包括樣本查詢和字段列表。 要注意哪些字段被標記為需要 。 這是你可能會發現某些表所需的訪問鍵。

銳YQL的使用

YQL的是一個靈活的，通用的接口，在網絡上的結構化數據，和銳（ 數據源 ， 自動完成 ， 數據表和圖表 ），善於消費，並提供此數據接口。

牢記，但在開始時，有幾個注意事項。

1怪癖＃：部分查詢和YQL的源數據

一些表格不適合與配對自動完成的 ，因為它們不提供部分搜索鍵的結果。 YQL的雖然允許通配符查詢，如keyword like 'mado%' ，實際提供的數據可能不支持這樣的疑問-讓用戶開始在記憶中鍵入麥當娜的名字，全字匹配的結果僅會出現和麥當娜將不會提供直到全面鍵入名稱。 牢記這一點，你探索的興趣在您的應用程序給你的是YQL的表。

怪癖2：在YQL的排序和分頁

在YQL的排序是一個過濾器應用後的結果集被取出。 如果你使用服務器端排序和分頁源為一個DataTable YQL的，你會遇到麻煩：如果用戶已按某列排序表，並要求兩頁，YQL的將首先選擇未來N個記錄的無序表，然後進行排序時，你通常會想到未來的 N排序表記錄。 例如，假設你有一個單一的數字字段和表的表包含4,3,2,1的順序。 你有兩排，每頁一個DataTable，並通過其單個列排序。 YQL的將返回第一頁和第二1,2，3,4，而不是對1,2和3,4。 這是因為它首先對未排序的數據，然後排序，選擇“頁面”。

怪癖3：YQL響應結構

YQL的反應結構的變化，根據傳回的項目數。 如果我們要轉儲變量指向的結果，我們可以得到所有這些，根據項目計數：

 空 

  [] 

  {someChangingPropertyName：{
			 fieldName1：值1， 
			 fieldName2：value2的， 
			 ...
		 } 

  [
			 {
				 fieldName1：值1， 
				 fieldName2：value2的， 
			 ...
			 }
		 ] 

  {someChangingPropertyName：
		     {
				 fieldName1：value1row1， 
				 fieldName2：value2row1，
				 ...
			 }，
		     {
				 fieldName1：value1row2， 
				 fieldName2：value2row2， 
				 ...
			 }，
		     ...
		 ]} 

  [
		     {
				 fieldName1：value1row1， 
				 fieldName2：value2row1， 
				 ...
			 }，
		     {
				 fieldName1：value1row2， 
				 fieldName2：value2row2， 
				 ...
			 }，
		     ...
		 ] 

最後一列顯示了一個更加一致的替代品，沒有異想天開的屬性的名稱和任何數量的物品查詢可能返回的數組，但總是一個簡單的數組。

YQL的和異步的跨域數據

YQL的也可以提供相同的信息在多種格式， XML ， JSON和JSONP的 ，後來由於我們所處最感興趣的相同來源政策 ，瀏覽器不允許他們的XMLHttpRequest對象來訪問源出一其自己的域名。 YUI的連接管理器和YUI IO ，最初僅限於XMLHttpRequest的，紛紛推出與Flash XDR介面允許跨域請求。

YUI get工具，加上與YQL的JSONP的能力，也解決了這個問題。 讓我們來看看這是如何工作的。 在任何時間，您可以添加<script>標籤和<script>標記可以加載來自任何地方的任何東西，我們這樣做定期當我們加載雅虎的CDN的YUI庫的組件，無論我們的頁面位於其中。 然而，這種方法需要一些幫助，因為從服務器<script>標記<script>預期JavaScript代碼。 如果我們是加載一個文件包含以下內容：

  123 

它不會做任何好處，因為沒有分配給一個變量值。 如果我們要加載此：

 結果= 123; 

然後，這個數字將被存儲到變量的result 。 這樣的變量將在全球範圍內， 這是不是一個好主意 。 更糟的是，雖然值將被檢索，一旦存儲，我們不知道它變為可用時，我們不得不輪詢變量的result ，發現當我們想要得到的數據。 YUI get工具解決了這個問題，通過信號的成功和失敗的交易。

一個更通用的解決方案，依靠從服務器上的一些幫助，是包裝在一個回調函數的值：

  callbackFunction（123）; 

此功能儲存或加工值，它不會被調用，直到滿載內容，所以它也標誌著數據的到來。 大多數的JSONP服務器接受一個URL參數（通常稱為callback ），其中包含的函數的名稱，包裝數據。 如命名空間功能YAHOO.example.SiteExplorer.callback是一個明智的選擇回調函數。

被視為一個重要的問題是：JSONP的絕不是像JSON的安全。 JSON不允許任何可執行代碼中的字段值的排序。 雖然在原則上，任何良好的JSON編碼器應防止被注入到JSON輸出代碼，YUI的JSON工具還檢查沒有收到。 這是沒有任何收到將愉快地執行各種可能產生的副作用，使用JSONP的情況下，沒有問題要問。 在JSONP的，你基本上是要求外國服務器產生一個腳本來加載。 因此，要小心使用JSONP的可信服務器，如果你打算提供的JSONP從您的服務器，使包裝在回調的結果之前，請務必使用一個很好的JSON編碼器，使任何字段可能包含欺詐代碼被轉義，從而瓦解。 正如我們了解到SQL注入和如何預防，記住這樣的一種漏洞 JSONP的股份。

YQL的服務支持JSONP的;在控制台中，會出現一個額外的輸入框右側的JSON複選框，最初包含文字cbfunc 。

這是在查詢字符串轉換成額外的參數。 如果我們選擇的JSON，URL變化：

  http://query.yahooapis.com/v1/public/yql?q=select％20 *％20from％20
	       geo.places％20where％20text％3D％22san％20francisco％2C％20ca％22 

至

  http://query.yahooapis.com/v1/public/yql?q=select％20 *％20from％20
	      geo.places％20where％20text％3D％22san％20francisco％2C％20ca％22＆
	     格式= json的回調= cbfunc 

基本URL需要q參數包含URL編碼的查詢。 為JSON，我們可以指定format=json和使它的JSONP我們提供的callback函數的名稱。 一個可選的diagnostics=true參數可能會增加響應中得到一些額外的診斷信息。

作為YUI的數據源使用YQL的

喬納森·勒布朗也寫了一個方便的工具，做YQL的查詢和格式化基於一個簡單的模板，這是他在提出他們的結果YUI的博客文章 。 你只需要提供YQL的查詢，模板進行格式化的結果和對結果的容器，它需要照顧我們的所有細節。

  yqlWidget.push（
    / /查詢
    '選擇weather.forecast地方位置= 90210 item.description“，  
    / /配置選項
    {}，
    / /模板與大括號內的字段名稱的佔位符
    “<br style="c​​lear:both" /> {item.description}
    / /結果的容器的ID
    widgetContainer“
 ）;
 yqlWidget.render（）; 

任何領域的數量可以在查詢請求;如嵌套領域item.description可以在模板中使用它們括在大括號。

YQLDataSource

YQLDataSource類喬納森的工作一步通過YQL的數據轉化成一個​​正式的DataSource對象，銳可以利用。 一個YQL的查詢結果通常是一些表格信息。 YUI的DataSource組件的目的是獲取這種類型的信息。 其他幾個YUI組件使用數據源獲取數據，包括自動完成 ， 圖表 和 DataTable 。 前一段時間，我公司開發的數據源，子類YQLDataSource的延伸YAHOO.util.ScriptNodeDataSource連接到YQL的Web服務，以從中獲取數據。 我用這個例子 ，其中一個自動完成框和兩個層次嵌套數據表的數據由YQLDataSource（嵌套數據表將進一步文章的主題）。

YQLDataSource是簡單，可仍然是簡單的。 在構造函數中，我們為YQL的Web服務的默認URL，如果沒有明確由開發商：

  YAHOO.util.YQLDataSource =功能（oLiveData，oConfigs）{
	     oLiveData = oLiveData | |'http://query.yahooapis.com/v1/public/yql?format=json&q =';
	     YAHOO.util.YQLDataSource.superclass.constructor.call（這oLiveData，oConfigs）的; 
	 }; 

作為URL的一部分，我們已經建立的答复為JSON格式，並添加q參數來接收YQL的查詢。

正如所有其他數據源的子類做的，我們複製了靜態成員，大多是常數，我們可以使用：

  YAHOO.lang.augmentObject（YAHOO.util.YQLDataSource，YAHOO.util.DataSourceBase）; 

延長的ScriptNodeDataSource時，我們覆蓋的幾個成員，他們首先是因為我們知道的responseType responseType將JSON responseType ：

  YAHOO.lang.extend（YAHOO.util.YQLDataSource，YAHOO.util.ScriptNodeDataSource，{
	     responseType：YAHOO.util.DataSource.TYPE_JSON， 

因為我們將在收到請求YQL的聲明，我們需要它逃脫之前允許它被連接到URL的其餘部分。 我們這樣做，在makeConnection方法，因此我們覆蓋：

  makeConnection：功能（oRequest，oCallback，oCaller）{
	      YAHOO.util.YQLDataSource.superclass.makeConnection.call（這
	           encodeURIComponent方法（oRequest），oCallback，oCaller）;
	 } 

我們呼籲oRequest參數，其中包含正確轉義的YQL的查詢，與原來的版本。

現在我們添加一些魔術。 我們假設，我們已經仔細，並明確列舉檢索領域。 我不喜歡看到Select *報表Select *在生產代碼中，他們探索的罰款，但在最終產品的浪費。 因此，我相信，在任何領域來響應是我們真正想要的。 不幸的是，YQL的不返回一個領域，也不是他們的數據類型的列表，而且，根據查詢，如日期字段可能會出現在非常不同的格式。 由於YQL沒有比中介，它返回的值是從他們提供為準格式，不同的格式，如日期或布爾值佔原始源。

因此，我們將在年底，相信任何結果，但是，如果某些數據是不正確的格式，我們將仍然允許被指定解析器。 例如，排序列包含YUI的DataTable的數字，數字字段必須是實際的JavaScript號碼，不只是字符串包含的數字。 一個特別的專輯曲目YQL的查詢返回作為字符串的數值，所以我們需要解析成數字。 我們可以說：

  VAR tracksDS =新YQLDS（“{
	     responseSchema：{
	        領域：
	             {鍵：“Track.discNumber，解析器：”數“}， 
	             {鍵：“Track.trackNumber，解析器：”數“}，
	             {鍵：“Track.duration，解析器：”數“}，
	             {鍵：“Track.popularity，解析器：”數“}
	         ]
	     }
	 }）; 

查詢還包含一個title字段，這是一個字符串，不需要解析。 還要注意的數據嵌套的水平進一步下降，所以我們使用點符號來獲取。 如果第一行的數據，我們要弄清楚什麼領域是未來，是不是代表的結構響應，第一行中失踪的領域可以被指定為，最後，如果由於某種原因數據並非位於其中YQLDataSource假設，我們也可以指定的resultsList 。

我們不會去到這裡的每一個細節的源代碼包含的意見，將引導您通過步驟。 足以說， parseJSONData方法是重寫的，所以，被稱為原始的方法之前，所有的字段信息是從有關數據被解析並結合已指定任何開發的第一行中提取。 在此方法中，我們還添加responseSchema.metaFields財產，如果不是已經存在，提取元數據信息查詢，返回的記錄數（ count ），當結果集創建（ created ）和始終可用數據語言（ lang ）。

對於簡單的情況下，我建這個例子使用YQLDataSource和能夠填補一個給定的容器，基於模板的查詢結果。 該功能可以被稱為是這樣的：

  YAHOO.example.YQLSubstitute（
	     “清單”，
	     “選擇search.news查詢=”巴塞羅那“的標題，摘要，URL，源'，
	     “<LI> <H2> {標題} <\ / H2> <P> {抽象} <\ / P> <地址> <a href="{url}"> {來源} <\ / A> <\ /地址> <\ /李>“
	 ）; 

我叫功能YQLSubstitute劃歸它的YAHOO.example命名空間。 它採用下列參數：

1. 一個引用或ID <ul id='list'>將包含結果（在這種情況下，一個參考的HTML元素在頁面的其他地方）。
2. YQL的語句執行。
3. 作為佔位符字段名稱的模板

4. 一個可選的配置對象。

查詢YQLDataSource支持，很可能使用點標記嵌套字段中指定的佔位符。 可選的第四個參數，配置選項，通過直通的YQLDataSource所以，如果需要任何解析器，他們可以在這裡設置。 此外， YQLWebService配置選項，讓你覆蓋的YQL的Web服務的URL。

YQL的和YUI 3

對於銳3，仍有不許多其他組件，可以從一個DataSource和DataSchema所以，暫時來說，我用DAV玻璃的消耗的數據YQLQuery畫廊模塊，這將是3.2.0版本的一部分。 在YQLSubstitute銳3例如，我試圖提供相同的接口，也有少數例外，在YUI 2例如。 第一參數是一個CSS3選擇3 YUI的習慣;嵌套領域和解析器是不可用，有沒有額外的配置選項，只是前三強制性參數。 這兩個例子是很好的註釋，只需向下滾動達成的意見後，查詢的輸出。

結論

在這篇文章中，我們有：

• YQL的是什麼，探討了YQL的控制台，它讓我們放在一起YQL的查詢和多種格式的輸出結果
• 解釋了什麼是JSONP是如何使用它與銳獲取實用
• 鏈接到一個使用獲取查詢YQL的表，並提交結果的幾個例子
• 看到YQLDataSource和包括自動完成和DataTable的例子，它是如何工作的，
• 定義的YQLSubstitute功能，使用YQLDataSource
• 定義為YUI3相同的功能，使用的YQLQuery畫廊組件

不要探索沿的文章提供了許多鏈接的例子是現實生活中的查詢，直行YQL的Web服務。 記住過去的樣本輸出滾動閱讀說明和註釋的代碼。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！