GetUserInfoSample
IDtail.com API
[편집] JSON
[편집] 동기적 사용 방법
동기적 사용방법이란, html이 완성이 되면서 script 태그에 넣어 바로 실행이 되면서 렌더링이 되는 방법을 말합니다. 즉, 다음 예제의 goigoi, peaunet, alice의 공개정보를 가져오도록 사용된 방법을 보면, body내의 script가 모두 실행이 될때까지 그 이하는 진행하지 않는 상황에서 사용하는 방법입니다. 이 방법의 단점은 한 페이지가 렌더링이 될 때, api.idtail.com 사이트의 결과에 렌더링이 의존적이 된다는데 있습니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script>
function drawUserInfo( user )
{
if( user['owner'] == undefined ) return;
var u = user['owner']['fields'];
html =
"<div style=\"position:relative;width:500px; height:110px\">"+
"<img style=\"float:right\" src=\""+ u['img'] + "\" />" +
"Profile of " + u['name'] + "<hr />" +
"Nickname: " + u['nick'] + "<br />" +
( u['homepage'] == undefined ?
'' :
"HomePage: <a href=\""+u['homepage']+"\">" + u['homepage'] + "</a><br />"
) +
"</div>";
document.write(html);
}
</script>
<script src="http://api.idtail.com/get_user_info/goigoi.json?callback=drawUserInfo"></script>
<script src="http://api.idtail.com/get_user_info/peaunet.json?callback=drawUserInfo"></script>
<script src="http://api.idtail.com/get_user_info/alice.json?callback=drawUserInfo"></script>
</body>
</html>
[편집] 비동기적 사용방법
문서는 모두 렌더링이 되었으며, 그 이후 다른 동작에 의해 json 형식의 데이터를 사용하는 방법입니다. 아래의 예에서는 버튼을 누르는 순간 script 태그가 만들어지고, 그 태그가 body에 연결이 되는 순간 원하는 데이터가 전달되며, 전송이 끝나는 순간 callback으로 지정한 원하는 함수가 불리어지므로 데이터 전달을 따로 확인할 필요없이 전달과 동시에 원하는 동작이 일어납니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script>
function showUserInfo( user )
{
if( user['owner'] == undefined ) return;
var u = user['owner']['fields'];
html =
"<div style=\"position:relative;width:500px; height:110px\">"+
"<img style=\"float:right\" src=\""+ u['img'] + "\" />" +
"Profile of " + u['name'] + "<hr />" +
"Nickname: " + u['nick'] + "<br />" +
( u['homepage'] == undefined ?
'' :
"HomePage: <a href=\""+u['homepage']+"\">" + u['homepage'] + "</a><br />"
) +
"</div>";
var p = document.getElementById( "profile" );
p.innerHTML = html;
}
function fetch()
{
var u = document.getElementById( "username" );
var s = document.createElement( "script" );
s.src = "http://api.idtail.com/get_user_info/"+u.value+".json?callback=showUserInfo";
document.body.appendChild( s );
}
</script>
Username: <input id="username" /> <input type="button" value="Show!" onclick="fetch();" />
<hr />
<div id="profile" />
</body>
</html>