지난 포스트에 이어 이제는 에드센스 같은 서비스 프로그램을 만드는 방법을 이야기 해 보겠습니다.

가장 핵심은 url를 호출했을대 리턴받은 내용이 일반적인 데이터가 아니라 JavavScript 함수라는 것입니다. 가령 우리가

http://geminidream.net/sample/ajax/extern_json/makeJson/result.php?text=ajax&display=5&start=1&function_name=here
로 호출했을때 돌아오는 정보가 일반적인 json형태가 아니라 JavaScript함수입니다.

이런 형태죠
here( "root:[ {total:10, display:10 ... } ]" )
이렇게 된다면 javascript는 당연히 here라는 이름을 가진 function를 찾게 됩니다.

이 function은 이미 만들어 놓은 것입니다. 이렇게 말이죠
function here (myObject) {
 var div = document.getElementById (this.div_name);
 var item_total = myObject.root[0].total;
 var item_display = myObject.root[0].display;
 if(item_total > 0) {
  // 화면에 보여줄 무언가를 하고
 }
 
 // 화면에 innerHtml로 보여주고
}

저는 샘플코드를 만들면서 geminidream.net에서 뭔가 해줄수 없는 서비스가 없기 때문에 naver openapi를 이용하여 blog결과를 가져오는 일을 했지만 만약 여러분의 사이트가 무언가를 서비스하고 있다면 그 결과를 사용하실 수 있습니다. 가령 검색엔진을 가지고 계신다면 광고에 관련된 정보를 검색하여 관련 광고를 노출시켜주실 수 도 있습니다. js를 이용해서 무언가를 하는 서비스가 있다면 대부분은 이러한 식으로 서비스를 진행하고 있을 거라 생각합니다.

또 하나 소스를 보시면서 눈여겨 보셔야 할 부분은

var head = document.getElementsByTagName("head").item(0);
var script = document.createElement ("script");
script.src = this.url;
입니다. 사용자에게 하나의 js만 포함하면 되도록 하기 위해서 호출되는 js쪽에서 ajax를 구현해야 합니다.
그때 위의 방법처럼 script object를 사용하여 동적으로 script를 만들어 내시면 됩니다.


이 샘플소스는 js이기 때문에 주소창에
http://geminidream.net/gemini/sample/ajax/extern_json/makeJson/geminidream.js
를 입력하시면 바로 확인 하실 수 있습니다.


Posted by 달빛변신
,