AJAX, XML, JSON by fso56144

VIEWS: 535 PAGES: 24

									AJAX, XML, JSON




                  KIM SEUNG-KWON
AJAX와 XML
• Ajax 애플리케이션에 XML이 실제로 필요한가?
  – Ajax 애플리케이션에서 항상 XML이 필요한 것은 아니지만(하나의 데이터를 주고
    받을 때 XML은 오히려 부담이 되지요), 대부분의 실무 웹 애플리케이션들은 사용
    자 이름, 암호, 주소 , 도시 이름 등 다중의 데이터를 다룹니다.


• XML을 사용할 때의 장점
  – XML은 그 자체가 문서의 기능을 하므로 어느 값이 어디에 있는지 바로 알 수 있씁
    니다.
  – XML 파서(parser)가 대부분의 브라우저에 내장되어 있어 파싱을 위해 필요한 모
    든 기능이 갖춰져 있기 때문에 내장된 파서를 이용하기만 하면 됩니다




                                             KIM SEUNG-KWON
예제를 통한 이해
• 문자 디코더
  – 이 예제에서는 서버가 5개의 데이터를 반환합니다. 이를 통해 여러 데이터를 다루
    게 될 때 어떤 일이 일어나는지를 보게 될 것이며, 대부분의 Ajax 애플리케이션이
    서버로부터 클라이언트로 데이터를 전송하는 데 왜 XML이나 그 외의 특정한 방법
    을 사용하는 지를 알게 해 줄 것입니다




                                            KIM SEUNG-KWON
• 간단한 XML 문서 설정
  – 이 예제에서는 XML을 사용하여 데이터를 반환할 것입니다. 따라서, 다음과 같은
    형태로 XML문서를 생성하려고 합니다
    (데이터를 만드는 방법은 여러가지가 있으나, 우선 간단히 하기 위해 여기서는
    XML태그로 데이터를 감싸는 데 StringBuffer를 사용할 것입니다)

  – 브라우저는 이러한 형식의 XML을 DOM(Document Object Model) 파서를 사용하
    여 파싱하고 데이터를 추출할 수 있습니다




                                                  KIM SEUNG-KWON
• 서블릿을 사용하여 XML 문서 만들기(1) - AjaxResponseServlet




                                             KIM SEUNG-KWON
• 서블릿을 사용하여 XML 문서 만들기(2)




                            KIM SEUNG-KWON
• AjaxResponseServlet
   – ReturnXML 이라는 StringBuffer를 설정하고, 넘겨받은 값을 10진수, 16진수 등으
     로 변환하면서 이를 적절한 XML 태그로 감싸 버퍼에 추가합니다
   – 5가지 변환을 모두 끝내고 나면 이들을 닫는 태그 </converted-values>를 추가하
     고, res.getWriter()  write()를 사용하여 Ajax 클라이언트에 응답을 전송하게 됩니
     다
   – 클라이언트로부터 받은 key의 값이 null이면 XML을 사용하지 않고 물음표를 전송
     합니다




                                                       KIM SEUNG-KWON
• XML에서 데이터 얻기
  – JavaScript로 XML 파싱하기
      • 우선 모든 작업이 callback()에서 시작하므로 여기에서 시작하겠습니다




                                              KIM SEUNG-KWON
• callback()
   – 먼저 브라우저의 종류를 살펴야 합니다
      • IE7부터는 window.XMLHttpRequest 가 지원됩니다. 그러므로, IE7을 고려한
        다면 앞에서 본 코드처럼 확인하거나(document.all을 확인해서 IE7과 다른
        nonMS 브라우저를 확인하거나) ,
        window.ActiveXObject가 있는지를 먼저 비교하고 그 다음 else if 로
        window.XMLHttpRequest가 있는지를 비교하여야 IE7에서도 잘 동작합니다

   – 브라우저가 IE면 msPopulate()를 사용하여 XML에서 데이터를 추출하고 그렇지
     않은 경우엔 nonMSPopulate()를 사용하게 됩니다
      • 두 함수의 차이점은 XML파서와 파서가 제공하는 API입니다. 파이어폭스, 모
        질라, sarari 등은 모두 XML을 파싱할 수 있는 내장된 파서를 얻기 위해 new
        DOMParser()를 사용하고, 반면에 IE에서는 new
        ActiveXObject(“Microsoft.XMLDOM”)을 사용합니다




                                                     KIM SEUNG-KWON
• IE에서 폼 요소에 데이터 넣기 - msPopulate()


                                     Microsoft.XMLDOM이라 불
                                     ActiveXObject를 얻습니다


                    서블릿에서 온 응답 데이터를 XML문서에 적재합




  특정 엘리먼트에 속하는 자식 노드줄 중에 주어진 태그 이름에 해당하는
  자식 노드들의 배열을 반환합니다. 이후 firstChile를 호출함으로써 자식 노
  여기서 다시 data 필드를 참조하여 값을 얻습니다         KIM SEUNG-KWON
같은 이름의 태그를 여러 개 포함하고 있다면, 배열의 첨자를 통해 어떤 값이
위 예제의 XML문서 내에 또 하나의 <decimal>태그가 있다면 이 태그의 값
dec[1].firstChile.data로 얻을 수 있습니다
                                    KIM SEUNG-KWON
• IE이외의 브라우저에서 폼 요소에 데이터 넣기 - nonMSPopulate()

                                  DOMParser를 생성한 후
                                  DOM을 만듭니다




                                         KIM SEUNG-KWON
KIM SEUNG-KWON
KIM SEUNG-KWON
JSON(JavaScript Object Notataion)
• JSON을 사용한 데이터 전달
   – XML을 사용하는 데 따르는 문제점
      • 속도 : XML은 데이터마다 열고 닫는 두 개의 태그가 필요하며, 그 외에 부모
        노드 같은 여분의 태그들이 필요합니다. 이러한 여분의 데이터들은 클라이언
        트와 서버 사이에 데이터를 교환하는 데 속도를 저하시키는 요인이 될 수 있
        으며, 간단한 몇 바이트의 데이터를 위해 상대적으로 긴 문서가 만들어지게
        되고, XML 문서를 만드는 데 서버의 메모리도 많이 사용됩니다
   – 대안 : JSON
      • 데이터를 좀 더 쉽게 파싱할 수 있고, 좀 더 간결한 형태로 클라이언트로 보낼
        수 있는 방법을 제공합니다
      • JSON객체는 일반적으로 같은 데이터를 갖는 XML 문서보다 작고, 작업하는
        데 메모리도 덜 사용합니다
      • JavaScript의 eval() 함수를 사용하여 파싱할 수 있어서 JSON을 위한 라이브
        러리도 필요없고, 이를 사용하기 위한 크로스 브라우저 호환성 문제도 신경
        쓸 필요가 없습니다




                                                   KIM SEUNG-KWON
• JSON으로 표현된 데이터 객체

   { “conversion”: {
   “decimal” : “120”,
   “hexadecimal”: “78”,
   “octal”: “170”,
   “hyper”: “&amp;Ox78”,
   “binay”: “1111000B”}
   }




                           KIM SEUNG-KWON
• http://www.json.org 에서 json_simple.jar 를 다운로드
  WEB_INF/lib 에 복사한다.




                                                  KIM SEUNG-KWON
• JSON으로 표현된 데이터 객체




                      KIM SEUNG-KWON
• JSON으로 표현된 데이터 객체




                      KIM SEUNG-KWON
KIM SEUNG-KWON
KIM SEUNG-KWON
• JSON을 위한 JavaScript변경
  – 전에 작성했던 ajax.js 파일에서 msPopulate()와 nonMSPopulate()를 없애고 다음
    의 populateJSON()을 작성합니다




                                                       KIM SEUNG-KWON
KIM SEUNG-KWON
• Employees 테이블에서 first_name으로 검색한 후, 해당 이름의 정보
  가 있을 경우 검색창 아래에 검색되어진 사람의 정보를 테이블 형태
  로 출력하도록 하세요




                                          KIM SEUNG-KWON

								
To top