[스터디] Ajax 마스터하기, Part 9: Google Ajax Search API 사용하기

출처 : http://www.ibm.com/developerworks/kr/series/web/index.html
아래 내용은 위 출처의 기사의 일부를 복사 후 편집/수정한 것입니다.
단순히 개인적으로 알고자하는 내용만을 남긴 것이니, 자세한 정보는 위의 출처를 참조하세요.

Google Ajax Search API 설정하기
Google에서 개발자 키 얻기
Google에서 받은 여러분의 개발자 키로 대체하는 것을 잊지 말라.

JavaScript 분해

새로운 GSearchControl 생성하기
먼저, 새로운 GSearchControl이 만들어진다. 이것은 모든 검색을 수행할 수 있도록 해주는 구조이다.

function OnLoad() {   // Create the Google search control   var searchControl = new GSearchControl();   ... }

그런 다음 이 코드는 GlocalSearch를 사용하여 새로운 로컬 검색을 설정한다. 이것은 특정 위치에 기반한 검색을 수행하는 특별한 Google 구조이다.

새로운 로컬 검색 설정하기
새로운 로컬 검색자를 만든 다음, 검색의 중심 포인트를 설정한다.

function OnLoad() {   // Create the Google search control   var searchControl = new GSearchControl();   // These allow you to customize what appears in the search results   var localSearch = new GlocalSearch();   ...                               // Tell Google your location to base searches around   localSearch.setCenterPoint("Dallas, TX");   ... }

검색 유형
검색 컨트롤에게 어떤 유형의 검색을 수행해야 하는지를 지시하고 있다.

function OnLoad() {   // Create the Google search control   var searchControl = new GSearchControl();   // These allow you to customize what appears in the search results   var localSearch = new GlocalSearch();   searchControl.addSearcher(localSearch);   searchControl.addSearcher(new GwebSearch());   searchControl.addSearcher(new GvideoSearch());   searchControl.addSearcher(new GblogSearch());   // Tell Google your location to base searches around   localSearch.setCenterPoint("Dallas, TX");   ... }

여러 가지 검색 유형들을 요약하면 다음과 같다.

    * GwebSearch: 웹 검색용 객체이고, Google은 이것으로 유명해졌다.
    * GvideoSearch: 검색어와 관련된 비디오를 찾는다.
    * GblogSearch: 이 객체는 블로그를 통한 검색에 특별한 초점을 맞추고 있는데, 다른 웹 콘텐트 유형과는 약간 다르게 구성되고, 다른 태그가 붙는다.

draw() 메소드 호출
이 호출을 HTML에 있는 DOM 엘리먼트에 준다.

검색 컨트롤 가져오기

function OnLoad() {   // Create the Google search control   var searchControl = new GSearchControl();   // These allow you to customize what appears in the search results   var localSearch = new GlocalSearch();   searchControl.addSearcher(localSearch);   searchControl.addSearcher(new GwebSearch());   searchControl.addSearcher(new GvideoSearch());   searchControl.addSearcher(new GblogSearch());   // Tell Google your location to base searches around   localSearch.setCenterPoint("Dallas, TX");   // "Draw" the control on the HTML form   searchControl.draw(document.getElementById("searchcontrol"));   searchControl.execute("Christmas Eve"); }

Ajax는 어디에 있는가?
검색어를 입력하고 Search 버튼을 클릭하면, 매우 Ajax 다운 응답을 보게 된다. 검색 결과는 페이지를 재 로딩하지 않아도 나타난다. 바로 이것이 대부분의 Ajax 애플리케이션의 특징이다. 페이지를 다시 로딩하지 않고 시각적인 콘텐트 변화가 이루어 진다.

가장 중요한 JavaScript 파일

<script     src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=[YOUR GOOGLE KEY]"     type="text/javascript"> </script>

신택스는 특별한 것은 없지만, 중요한 것은 Google이 uds.js라는 파일을 호스팅하는데, 이 안에 검색 박스가 작동하는데 필요한 모든 JavaScript가 들어있다는 점이다. 엄밀히 말하면 다른 사람들의 코드를 사용하고 있는 것이다. 여러분은 서드 파티가 여러분의 애플리케이션이 사용하는 코드를 호스팅 하도록 할 수 있다. Google은 보존과 관리까지 다루기 때문에 이것은 매우 중요하고, 기업이 JavaScript 파일을 업그레이드 할 때 자동적으로 혜택이 미친다. Google은 여러분 모르게 API를 변경하지 않기 때문에 여러분의 코드는 JavaScript 파일이 수정되더라도 계속 실행된다.

GSearchControl 객체
여기에서 숨겨진 한 가지는 GSearchControl 객체용 코드로서 onLoad() JavaScript 함수에서 생성된다.

GSearchControl 객체 생성하기

// Create the Google search control var searchControl = new GSearchControl();

검색 컨트롤을 만드는데 필요한 모든 HTML

<div id="searchcontrol" />

위의 검색 컨트롤용 HTML에 실제로 그려넣기

// "Draw" the control on the HTML form searchControl.draw(document.getElementById("searchcontrol"));

Google에서 API Key를 얻을 때, 어느 사이트에서 사용할 것인가를 등록하지 않으면 안되므로, localhost에서는 테스트 불가

http://lonelycat.hosting.paran.com/test/04_ajax_test.html