비트컴퓨터 jQuery ajax json

JSON이란 무엇일까?

 

JSON은 JavaScript Object Notation으로 데이터 교환포맷의 일종이다.

XML에 비해 경량화된 데이터 교환포맷으로 기존 XML이 상당히 무거운데 그 점을 보완할 수 있는 것이 JSON이다.

Ajax로 서버와 통신하며 데이터를 주고 받을 때 데이터 교환을 쉽게 하기 위해 JSON을 사용한다.

 

주고 받을 수 있는 자료형은 숫자, 문자열, boolean, 배열, 객체이며

기본 데이터 배열은 KEY와 VALUE로 구성되어 있으며 중괄호로 감싼다.

KEY값은 문자열이기 때문에 반드시 "KEYNAME" 이렇게 쌍따옴표를 붙여줘야 하고

VALUE에는 기본 자료형이나 배열, 객체를 넣으면 된다.

 

JSON의 기본표현 형태

{

    "age": 29,

    "name": "HIKI",

    "family": {"father": "홍길동", "mother": "심청이"}

}

1. AJAX(Asynchronous Javascript and XML)란 무엇인가?

 

Ajax의 예를들면,

네이버나 다음같은 포털사이트에 가보면,

메인페이지에서 뉴스 등 밑에 < , > 요런 버튼을 눌렀을 때 페이지가 Reloading 되지 않고 뜨는걸 볼 수있다.

 

보통 웹의 흐름에서는 새로운 URL로 호출 되면서 페이지가 새로 뿌려지지만,

AJAX를 사용하면 일부만을 로드해올 수 있는 것이다.

이름처럼 비동기 통신을 통해서.

 

2. 어떤 원리이고 흐름인가?

 

보통 웹사이트 들어갈 때 어떻게 들어가는가?

브라우저 위에 주소창에 URL을 쓰고 들어간다. 그러면 브라우저가 그 URL(서버)로 연결시켜준다.

서버에서 받아온 데이터들을 브라우저가 받아서 파싱해서 뿌려준다.

 

이게 보통 웹의 흐름이라면,

 

AJAX는 AJAX 자체가 브라우저라고 생각하면 된다.

URL을 받고, AJAX 내부에서 XMLHttpRequest 통신을 해서 URL(서버)로 연결시켜준다.

서버에서 받아온 데이터들을 AJAX가 받는다.  (어떻게 뿌릴지는 여기서 직접 알아서 한다 ㅋㅋ)

 

3. 예제

 

jQuery 같은 프레임워크를 안쓰고 AJAX 통신 하는 예제는

http://mainia.tistory.com/314  <- 이 블로그 참조

 

jQuery를 이용하면 간단 명료하게 작성 가능하다.

 

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>;;

<script>

$(document).ready(function() {

     jQuery.ajax({

           type:"GET",

           url:"/test",

           dataType:"JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨

           success : function(data) {

                 // 통신이 성공적으로 이루어졌을 때 이 함수를 타게 된다.

                 // TODO

           },

           complete : function(data) {

                 // 통신이 실패했어도 완료가 되었을 때 이 함수를 타게 된다.

                 // TODO

           },

           error : function(xhr, status, error) {

                 alert("에러발생");

           }

     });

});

</script>

 

* <script  src="http://code.jquery.com/jquery-latest.min.js"></script>;;

이렇게 쓰면 jQuery의 항상 최신 버전을 쓸 수 있다.

 

 

보통 complete을 쓸 지, success를 쓸 지는 상황에 따라 다르다.

둘 중 하나만 써야함. 그냥 설명하기 위해 2개 쓴 것임.

(반드시 둘 중 하나만 써야하는건 아니고, 둘다 쓰면 두 번 호출되기 때문에)

 

 

 

 

 

4. 값 받아오기

 

success를 통해 받아온 값을 alert 으로 띄운다거나,

HTML 코드에 추가해서 나타내거나 여러가지 방법으로 보여지도록 할 수 있다.

 

JSON으로 받는 법을 정리하겠다

 

 

JSON 객체는 요렇게 생긴 객체임.

 

{"name": "lioncat", "age": 14, "nickname": "qwerty"}

 

 

서버 단에서는,

객체에 있는 값을 JSON 형태로 만들어주는 라이브러리들이 있으니

서버는 그 것을 사용해서 JSON으로 리턴 하면된다.

 

클라이언트에서도 JSON으로 받아야 하는데,

3번 예제처럼 dataType:"JSON" 부분을 써주면 JSON으로 받아진다.

 

 

 

success에서 받아온 객체인 data를 alert으로 띄워보면

[Object object] 라고 나올 것이다.

 

저것을 어떻게 보느냐???

-> each 함수를 사용해야 된다.    (자세한 each 사용법은 검색 ㄱㄱ)

 

// success나 complete 안에서 사용

$.each(data, function() {

     alert(this["name"]);

     alert(this.age);

});

 

또는

$.each(data, function(index, entry) {

     alert(entry["name"]);

     alert(entry.age);

});

 

* 참고로 jQuery를 사용하지 않은 순수 AJAX를 통해 데이터를 받아왔을 때는 eval 함수를 써야한다.

jQuery의 AJAX에서는 자체적으로 JSON Object로 변환 시켜준 것이기 때문에 each로 쓸 수 있지만,

순수 AJAX에서는 JSON 객체로 변환되지 않았기 때문이다.