JQuery - [ XML / JSON + AJAX ]

* HTML

- 웹 페이지를 구현하는 언어

> 장점 : 작업/요청을 처리하고 표시하기 쉽다.

           서버에서 처리된 결과를 화면에 별도 처리 없이 추가 가능  

> 단점 : html 형태의 데이터를 리턴해야만 올바른 값을 보여줌

           요청이 반드시 동일한 도메인에서 처리해야 함.

           a.html -> a.html 페이지처리

 

 

* XML (확장 가능한 마크업 언어 )

- HTML 형태와 유사하게 생김. 태그의 형태로 정보 저장

> 장점 : 복잡한 구조의 데이터를 저장 가능.

           이기종 및 응용 프로그램 사이의 데이터 교환이 좋음.

           HTML 기본 메서드 활용 가능(기능 제한)             

> 단점 : 데이터보다 많은 태그의 양(데이터 리소스가 많음, 처리속도 느림)

           요청이 반드시 동일한 도메인에서 처리해야 함.

           a.html -> a.html 페이지처리

 

 

* JSON (JavaScript Object Notation)

- 자바스크립트로 만들어진 객체

- 단순 텍스트 형태의 표기법

- 속성:값 형태의 쌍으로 이루어진 데이터 (데이터리소스 크기가 적다)

- 플랫폼에 독립적이다. (규칙에 예민)

- 대부분의 언어에서 json 파서 / api를 제공

> 장점 : 다른 도메인 주소에서 호출 가능,

           데이터가 매우 간결 ( 키 : 값 ),

           웹 환경개발에서의 주력 데이터 폼    

> 단점 : 자바스크립트 문법을 준수. (문법에 예민)

            자바스크립트로 구성되어있기 때문에 악의적인 목적으로 사용 가능

  

  

 

---

1. XML

- 아래와 같이 태그의 형태로 정보를 저장해 놓았다.

< testXML.xml >

 

그러면 html 파일에서 JQuery-Ajax를 사용하여 아래처럼 데이터를 받아올 수 있다!

$.ajax({
        url : "testXML.xml",
        success : function(data) {
                $(data).find('person').each(function(){
                        // xml 파일에 있는 정보(이름, 성별, 전화번호) 화면에 출력
                        var name = $(this).find('name').text();
                        var gender = $(this).find('gender').text();
                        var tel = $(this).find('tel').text();

                        $('body').append("이름 : "+ name+", 성별 : "+gender+", 전화번호 : "+tel+"<br>");
                });
        }
});

* find(태그명) - 전달받아온 데이터(xml)에서 특정 태그를 찾는 메서드

 

 

파일을 실행시켜보면 데이터를 잘 받아온걸 확인할 수 있음!!!

 

 

---

2. JSON

- 자바스크립트로 만들어진 객체로, 속성:값 형태의 쌍으로 이루어진 데이터

 

 

< JSON 문법 >

  - JSON 데이터 : "속성(key)" : 값(value), "속성(key)" : 값(value)

  - JSON 객체 : { }

  - JSON 배열 : [ ]

        

 

< 사용 가능한 데이터 >

  - 정수(2진수, 8진수, 16진수 사용 못 함)

  - 실수(고정 소수점 / 부동 소수점)

        1.123, -55.234 / 1e4, 6.4E-5

  - Boolean

        true / false

  - Null 값

        null

  - 문자열 ("", 0개 이상의 유니코드 문자 / 이스케이프 문자 지원)

  - 배열 ( [ ], 데이터 타입 상관없이 저장 가능 )

  - 날짜 데이터 사용 못 함 (json에서 지원 X) => 문자로 표기하면 됨

          

 

---

그러면 JSON 파일을 생성해보자.

이클립스에서 JSON으로 생성해도 되지만,  jsp 파일 생성 후 아래 내용(html 코드)은 지우고, contentType을 application/json 으로 변경해도 된다.

 

그리고 아래에 데이터값들을 넣어준다.

 

test1.jsp 파일 내용

 

 

 

그러면 html 파일에서 Ajax를 이용해 JSON 데이터들을 가져와보자.

$.ajax({
        url: "test1.jsp",
        success: function(data) {
                console.log(data); 
        }                
});

 

콘솔창에서 확인해보면 객체로 받아오고 있는걸 알 수 있다!

 

 

---

기존에는( $.ajax )  값만 가져왔는데 getJSON( )을 사용하면 키도 가져올 수 있다.

< 기존 >

$.ajax({
        url: "test1.jsp",
        success: function(data) {
                $('body').append(data.name +"/" +data.gender+"/"+data.tel+"<br>");
        }
});

출력 결과

 

< getJSON >

$.getJSON({
        url:"test1.jsp",
        success:function(data){
                $.each(data,function(k,v){
                        $('body').append(k + " : " + v + "<br>");
                });       
        }
});

 

// 혹은 이렇게도 사용 가능
$.getJSON("test1.jsp",function(data){
                $.each(data,function(k,v){
                        $('body').append(k + " : " + v + "<br>");
                });       
});

출력 결과

 

 

 

---

배열에 담은 객체를 가져와보자.

아래와 같이 JSON 데이터가 있다.

 

아래와 같이 코드를 작성하면 가져올 수 있다!

$.getJSON({
        url: "test2.jsp",
        success: function(data){
                $.each(data, function(index, item){
                        $('body').append("<hr>");
                        $('body').append(item.name +"/" +item.gender+ "/" +item.tel +"<br>");
                });
        }
});

출력 결과

---