JSON(JavaScript Object Notation)의 약자
사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이.
DATA 교환언어.
참고 JSON 개요 : http://www.json.org/json-ko.html
XML도 많이 사용하지만 요즘엔 JSON도 많이 지원을 해준다.(왠만한 api 및 데이터교환은 XML or json 방식으로 해주는듯하다. )
openAPI를 사용하는 도중에 xml방식보다는 JSON방식으로 사용하는편이 너무 쉬워서 예제를 올려본다.
www.followkr.com 에서 지원해 주는 API로 만들었습니다.
아래의 예제는 http://www.followkr.com/common/html/api.html 에 있는 sample code를 변형하여 작성하였습니다.
<script type="text/javascript">
var jsonimage = "http://www.followkr.com/rank/image.php?callback=?";
var params = {
from: 1,
to: 10
};
$.getJSON(jsonurl, params, function(data, status) {
if(data.rankedTwitList){
// success
}
});
</script>
jQuery 에서는 getJSON()함수를 통하여 json방식을 손쉽게 가져올수 있습니다.
ex) http://api.jquery.com/jQuery.getJSON/
위의 코드를 보시면 getJSON()의 파라미터값만 잘보시면 됩니다.
jsonurl 은 가져올 json 페이지.
params 는 url 뒤에 붙을 get방식의 파라미터 들을 뜻합니다.
만일 파라미터가 없다면 '' ( $.getJSON(jsonurl, '', function(data, status) ) 이렇게 하시면 됩니다.
마지막 파라미터는 json의 연결이 성공했을때 받아오는 데이터 값입니다.
성공적으로 연결이 되었다면 모든 값들은 data 변수에 들어가게 됩니다.
이제 우리가 할일은 주석처리된 success 부분에 data를 가져와서 뿌려주기만 하면됩니다.
먼저 data에 어떤 형식으로 값이 들어왔는지 알아봐야 합니다.
http://www.followkr.com/rank/realtime.php 로 들어가보면 배열 형식으로 데이터가 쭈욱~ 나열된것을 볼수 있습니다. (아래 그림과 같이 데이터가 data로 들어가게 되는것입니다.)
여기서 알아두셔야 될것은 []은 배열. {}은 key, value로 이루어진 데이터 형식이라는것입니다.
(자세한 형식은 http://www.json.org/json-ko.html 를 읽어 보시기 바랍니다.)
그러므로 [0], [1], [2] .. 형식으로 데이터들이 묶여 있으며, [0].id, [0].body, [0].wener 등으로 데이터에 접근이 가능합니다. 또한 [0].links[0].url , [0].links[0].type 같이 value값이 배열형식으로 되어 있을수 있습니다.
이 형식을 익숙한 XML형태로 나타내면 다음과 같습니다.
rankedTwitlist[0],rankedTwitlist[1],rankedTwitlist[2].... 쭈욱~ 데이터가 있는것이다.
단지 그것들을 한줄에 써서 보내주는것이 json 방식인것.
데이터 접근 방식만 알았다면 간단하게 데이터를 뿌려줄수 있다.
해당 소스는 아래와 같다.
jquery 의 after()를 통하여 가져온 이미지를 페이지에 붙여주는 방식으로 처리해보았다.
필요한 데이터는
이미지 경로(data.rankedTwitList[i].links.image[0].thumbnailUrl)
원본 url (data.rankedTwitList[i].links.image[0].url) 로 접근하였다.
- 여기에서 i는 for 문으로 돌리기 위하여 선언된 변수이다.
해당 화면의 소스 결과는 다음과 같다.
해당사진 10개를 불어들여와서 이미지를 뿌려주고, 이미지를 클릭하면 원본 페이지로 <a>태그로 생성하였다.
JSON은 그렇게 어렵지가 않다. 원리만 안다면 상당히 유용하게 쓰일 형식!!
이로써 간단하게 json jquery 예제를 살펴 보았습니다~
관련글
1. JSON은 무엇일까? (JSON + jquery 예제)
2. JSON을 응용해보자. (JSON + jquery 예제2)
- 덧1 : naver openAPI는 JSON방식을 지원해 주지 않습니다.(이걸 몰라서 하루를 날렸습니다.)
- 덧2 : 처음에 다음 API를 사용하려 했으나 apikey값을 받기 위해선 도메인이 필요하더라..그래서 포기.
- 덧3 : 개인적으로 XML보다 파싱이 훨씬 쉬워서 좋다.
'web > HTML' 카테고리의 다른 글
| 구글에서 tilt를 검색하면?! 어떻게 표현한걸까? (0) | 2012.11.30 |
|---|---|
| JSON을 응용해보자.(JSON + jquery 예제 2) (0) | 2012.06.15 |
| HTML5 webDB 예제 (2) | 2012.06.11 |
| HTML5 LocalStorage 웹클라이언트에서 데이터 저장은 LocalStorage사용! (0) | 2012.06.05 |
| 동적 테이블 td 색상 칠하기(배경색) (0) | 2011.08.30 |
