야후 사용자 인터페이스 블로그 (YUIBlog)

Satyam에 물어보세요 : YQLDataSource와 YQL와 YUI를 사용하여

Satyam (일명 다니엘 페레로는) 오랜 YUI의 기고자와에서 가장 다작의, 풍부한 전문가 중 하나입니다 YUI 포럼 . 그는 또한 라이브러리 학습 : YUI 2.8.0, YUI 2.8.0에 대한 새로운 책의 저자 . "질문 Satyam"시리즈의이 문서는 마이클 하트 필드에 의해 제안되었다 . Satyam는 시​​리즈의 일부로 YUIBlog에 여기에 앞으로 몇 주 안에 몇 가지 추가 질문에 대답합니다.

YQL 알아가는

야후 쿼리 언어, YQL은 , 표준 사용하기 쉬운 인터페이스를 통해 정보의 엄청난 금액을 액세스하는 좋은 방법입니다. 얼마나 쉬운의 맛을하려면, 이전과 비교 아티스트 서비스 설명서를 이 간단한 YQL 쿼리 : select * from music.artist.search where keyword='Rihanna'.

YQL 콘솔은 사용하기가 매우 쉽습니다. 그것은 가능한 테이블과 그들에 대한 샘플 검색어의 여러가 나열됩니다 그래서 당신은 쉽게를 통해 액세스할 수있는 정보의 부를 탐험해볼 수 있습니다. YQL은 데이터를 저장하지 않으며, 오히려 그것은 다른 데이터베이스 또는 API로 쿼리 인터페이스입니다. 야후 출처에서 YQL 목록은 142입니다하지만 클릭하면되는 테이블의 숫자 표시 커뮤니티 테이블 링크, 카운트가 825로 상승 아마존, 페이 스북, 넷플 릭스 또는 뉴욕 타임즈에있는 공용 데이터에 대한 액세스가 포함됩니다. (당신이 몇 YUI 관련 테이블을 찾을 그건 어디도입니다.)

때로는 이러한 테이블은 주인으로부터 취득해야 액세스 키가 필요합니다, 그것없이는 여러분은 쿼리를 수행하거나 결과의 제한된 수의를받을 것입니다 못할 수 있습니다. YQL 서비스 자체가 두 주소 등록이 필요하며 더 나은 성능을 제공 하나 공개하고 다른과, 물론있다, 당신은 테이블의 일부로부터 개인 데이터에 액세스하는 데 인증이 필요합니다.

기본적으로 YQL은 약 10 기록과 함께 샘플 답변을 제공할 것입니다. 예를 들어, 테이블 이름 뒤에 괄호 안에 결과의 요청된 개수를 추가하여 결과의​​ 큰 숫자를 지정할 수 있습니다 :

  키워드 = "마돈나"music.artist.search (22)에서 *를 선택하십시오 

YQL 콘솔 때마다 마우스 테이블 이름 위에 묘사 버튼 테이블 이름의 오른쪽에 표시됩니다에있는 데이터 테이블 목록에서 각 테이블 이름 옆에있는. 그것은 테이블의 설명을 제공할 것이며, 일반적으로 샘플 쿼리 및 필드의 목록을 포함합니다. 필요에 따라 필드가 표시되는까지 세심. 이렇게하면 특정 테이블에 필요한 액세스 키를 찾을 수있는 위치입니다.

YUI와 YQL을 사용하여

YQL은 웹에서 구조화된 데이터에 대한 유연한 일반적인 인터페이스이며, 유이 (함께 데이터 원본 , 자동 완성 , DataTable의 및 차트 )이 데이터에 대한 인터페이스를 소모 및 공급에 좋습니다.

그러나, 다시 원점으로 염두에 두어야 할 몇 가지주의 사항이 있습니다.

# 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 응답 구조는 반환된 항목의 수에 따라 변경합니다. 우리가 결과를 가리키는 변수를 덤프있다면, 우리는 항목 개수에 따라 다음 중 하나를 얻을 수 있습니다 :

  null로 

  [] 

  {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 가져오기 유틸리티 YQL의 결합 JSONP의 기능도이 문제를 해결합니다. 가 어떻게 돌아가 보자. 당신은 추가할 수 있습니다 <script> 언제든지 태그를하며 <script> 태그는 어디서나 뭐든지 로드할 수 있으며, 우리와 상관없이 우리의 페이지가있는 위치의 야후의 CDN에서 YUI 라이브러리 구성 요소를 로드할 때 우리는 정기적으로 이것을 수행합니다. 때문에, 이러한 방식은 서버에서 도움을 필요로 <script> 태그는 자바 스크립트 코드를 기대합니다. 우리는 다음을 포함하는 파일을 로드할 수있다면 :

  123 

값을 변수에 할당되지 않기 때문에 그것은 우리에게 도움이 안돼요. 우리는 이것을 로드할 수있다면 :

  VAR 결과 = 123; 

다음 번호는 변수에 저장됩니다 result . 이러한 변수는 전역 범위에있을 것입니다 좋은 생각이 아닙니다 . 값이 한 번 복구할 저장될 비록 그것이 출시되면 더 악화, 우리는 잘 몰라요, 우리는 폴링겠군요 result 우리가 데이터를 해를 당했을 때 발견 변수를. YUI 가져오기 유틸리티는 성공과 실패 모두 거래를 신호 전달하여이 문제를 해결합니다.

서버의 도움에 의존하는보다 일반적인 솔루션은, 콜백 함수에 값을 래핑하는 것입니다 :

  callbackFunction (123); 

이 함수는 값을 저장하거나 처리 담당과 내용이 완전히 로드될 때까지 그 이름을되지 않을 것이다, 그래서 그것은 또한 데이터의 도착 신호 수 있습니다. 대부분의 JSONP 서버는 URL을 인수 (보통이라고 받아 callback 으로 데이터를 래핑하는 함수의 이름이 포함되어 있습니다.) 같은 Namespaced 기능 YAHOO.example.SiteExplorer.callback 콜백 함수를위한 현명한 선택입니다.

중요한 문제는 고려되어야하는 것입니다 : JSONP 안된 방법으로 JSON만큼 안전합니다. JSON은 필드 값에있는 실행 코드의 어떤 종류를 허용하지 않습니다. 하지만 원칙적으로, 모든 좋은 JSON 인코더는 JSON 출력에 주입되는 코드를 방지해야 YUI의 JSON 유틸리티는 또한 누구가 접수되지 않습니다 확인합니다. 이것은받은 것도이 행복하게 가능한 부작용은 모든 종류의와 함께 실행됩니다 JSONP와 케이스 아니라, 아무 질문도없고. JSONP에서는 기본적으로로드하는 스크립트를 만들어 외국 서버를 요구하고있다. 따라서 신뢰할 수있는 서버와 JSONP를 사용하여 조심, 귀하의 서버에서 JSONP를 제공하려는 경우, 사기 코드가 포함될 수있는 필드가 탈출 받게 있도록 콜백에 결과를 배치하기 전에 좋은 JSON 인코더를 사용해야하기 때문에 무력화. 우리에 대해 배운 것처럼 SQL 주입 하는 방법과 그것을 막기 위해, JSONP 공유에게 이런 종류의 기억 취약점을 .

YQL 서비스 JSONP를 지원 콘솔에 별도의 입력 상자가 처음 텍스트가 포함된 JSON 확인란의 오른쪽에 나타납니다 cbfunc .

이것은 querystring에서 추가 매개 변수로 변환됩니다. : 우리는 JSON에서 URL 변경을 선택하면

  http://query.yahooapis.com/v1/public/yql?q=select % 20 * %의 20from % 20
	       geo.places의 %의 20where의 %의 20text의 %를 3 차원 % 22san % 20francisco의 %​​ 2C %의 20ca % 22 

에

  http://query.yahooapis.com/v1/public/yql?q=select % 20 * %의 20from % 20
	      geo.places의 %의 20where의 %의 20text의 %를 3 차원 % 22san % 20francisco의 %​​ 2C %의 20ca % 22 &
	      형식 = JSON & 콜백 = cbfunc 

기본 URL이 소요 q 의 URL 인코딩된 쿼리를 포함하는 인자. JSON 위해 ​​우리는 지정할 수 있습니다 format=json 하고 우리의 이름을 제공 JSONP 수 있도록 callback 함수를. 선택적 diagnostics=true 인자는 응답의 일부 여분의 진단 정보를 얻을 수 추가될 수 있습니다.

YUI의 데이터 소스로 YQL을 사용하여

조나단 르블랑은 또한 편리한 작성했습니다 유틸리티를 YQL 쿼리를 수행하고 그 안에 제시된 간단한 템플릿을 기반으로 결과를 포맷 YUI 블로그 기사를 . 당신은 방금 YQL 쿼리 결과와 결과에 대한 컨테이​​너를 포맷하고 우리의 모든 사소한 점을 담당하는 템플릿을 제공해야합니다.

  yqlWidget.push (
    / / 쿼리
    '위치 = 90210 weather.forecast에서 item.description 선택'을  
    / / 구성 옵션
    {}
    중괄호 안에 필드 이름 자리 표시 자와 / / 템플릿
    '<br style="c​​lear:both" /> {item.description}'
    결과에 대한 컨테이​​너의 / / ID
    'widgetContainer'
 );
 yqlWidget.render (); 

필드의 모든 숫자는 쿼리에 요청할 수 있으며, 등 심지어는 중첩된 필드 item.description 중괄호에 그들을 둘러싸고하여 템플릿에서 사용할 수 있습니다.

YQLDataSource

YUI는 사용을 할 수있는 데이터 원본 공식적인 개체로 YQL 데이터를 변환하여 클래스가 한 걸음 더 나아가 조나단의 작업 소요 YQLDataSource. YQL 쿼리의 결과는 일반적으로 몇 가지 표 형식 정보입니다. YUI의 데이터 원본 구성 요소는 이러한 유형의 정보를 검색할 수 있도록 설계되었습니다. 여러 YUI 구성 요소를 포함하여 자신의 데이터를 가져오는 데이터 원본을 사용하여 자동 완성 , 차트 및 DataTable을 . 얼마전 나는 데이터 원본의 하위 클래스 개발 YQLDataSource 확장 YAHOO.util.ScriptNodeDataSource 그것에서 데이터를 가져오는 YQL 웹 서비스에 연결합니다. 나는에 사용되는 이 예제 자동 완성 상자와 중첩된 DataTables 두 가지 수준의 데이터 (중첩된 DataTables가 더 기사의 제목이됩니다) YQLDataSource에서 제공하는 위치.

YQLDataSource은 간단하면서 간단하게 될 수 있습니다. 아무도 명시적으로 개발자에 의해 주어진하지 않을 경우 생성자에서 우리는, YQL 웹 서비스의 기본 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 될 사항

  YAHOO.lang.extend ({, YAHOO.util.ScriptNodeDataSource, YAHOO.util.YQLDataSource
	     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 * 의 생산 코드의 명령문을, 그들은 탐험을위한 괜찮지만, 최종 제품에서 낭비. 따라서, 나는 필드가 응답 들어가도 무엇이든 우리가 정말 원하는 것들임을 믿어야합니다. 불행히도, YQL이 분야이나 자신의 데이터 형식의 목록을 반환하지 않으며, 또한, 쿼리에 따라 같은 날짜 등의 필드는 전혀 다른 형식으로 나타날 수 있습니다. YQL은 중간보다 더 이상 없으므로, 그 반환 값은들이 같은 날짜 또는 논리값 같은 값의 다른 포맷를 차지하고있는 제공하는 중 형식으로 원본 소스에서 나온 있습니다.

그래서, 결국, 우리는 결과에 와서 무엇이든 신뢰되지만, 데이터의 일부 조각이 올바른 형식이 아닌 경우, 우리는 여전히 파서를 지정할 수 있습니다. 예를 들어, YUI DataTable의 숫자를 포함하는 열을 정렬하려면 숫자 필드는 문자열이 숫자를 포함하지, 실제 자바 스크립트 숫자가 있어야합니다. 특정 앨범의 트랙에 대한 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> <address>의 <a href="{url}"> {소스} <\ /> <\ / 주소> <\ / 리> '
	 ); 

저는 함수라고 YQLSubstitute 하고 밑에 배치 YAHOO.example 네임 스페이스. 그것은 다음과 같은 인수를 :

1. 에 대한 참조 또는 (이 경우에 대한 참조 결과를 포함하는 HTML의 ID <ul id='list'> 다른 페이지 요소).
2. 실행할 YQL 성명.
3. 자리 표시 자와 같은 필드 이름이있는 템플릿

4. 선택적 구성 개체입니다.

쿼리 YQLDataSource에 의해 지원되기 때문에, 그것은 자리 표시 자에 중첩된 필드를 지정하려면 도트 표기법을 사용할 수 있습니다. 옵션 번째 인수, 구성 옵션은, 바로 어떤 파서가 필요한 경우, 그래서 그들은 여기서 설정할 수 YQLDataSource까지 전달됩니다. 또한 YQLWebService 구성 옵션을 사용하면 YQL 웹 서비스의 URL을 재정 의할 수 있습니다.

YQL 및 YUI 3

YUI 3에 대한, 당분간, 나는 DAV 유리 '를 사용하므로 데이터 원본 및 DataSchema의 데이터를 소비하는 수 많은없는 다른 구성 요소가 아직 없습니다 YQLQuery의 3.2.0 릴리스의 일부가 될 것이다 갤러리 모듈은. 에서 YQLSubstitute의 YUI 3에 대한 예를 몇 가지 예외 YUI 두 예제와 같이 동일한 인터페이스를 제공 했어. YUI 3 관례대로 첫 번째 인수는 CSS3의 선택이다; 중첩된 필드와 파서를 사용할 수 없습니다되며 추가 구성 옵션, 그냥 처음 세 개의 필수 인수가 없습니다. 두 예제가 잘 주석이며, 단지 쿼리 출력 후에 의견에 도달할 때까지 아래로 스크롤하십시오.

결론

이 문서에서는이 :

• YQL이 무슨 날인지 본 우리의 YQL 쿼리를 함께 넣고 여러 가지 형식으로 제공되는 결과 출력을 볼 수 있습니다 YQL 콘솔을 탐험
• 무엇 JSONP는 무엇이며 어떻게 YUI는 유틸리티를 가져오기와 함께 사용하는 방법을 설명
• YQL 테이블을 쿼리하고 결과를 제시 해 사용하는 몇 가지 예입니다 연결된
• 자동 완성 및 DataTable의과 예제를 포함하여, 그것이 어떻게 작동하는지 YQLDataSource 및 본
• YQLDataSource를 사용하여 정의된 YQLSubstitute 기능
• YQLQuery 갤러리 구성 요소를 사용 YUI3에 대해 동일한 기능을 정의

기사 함께 제공되는 여러 링크를 탐험 마십시오 예입니다 YQL 웹 서비스로 바로 갈 실제 검색어입니다. 설명과 주석 코드를 읽어 출력 예제지나 아래로 스크롤 것을 잊지 마십시오.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!