본문
AJAX와 JSON
프로그래밍/HTML&JavaScript 2015. 11. 25. 02:01
반응형
# AJAX (Asynchronous JavaScript and XML)
자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. (XML 또는 JSON을 사용)
# 비동기
여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미
# XML과 JSON 비교
XML | JSON |
|
용도 |
데이터를 구조화하기 위한 형식 |
|
장점 |
- 작성하기 편리 (TAG구조) - TAG 구조로 되어있어 해석하기 쉽다 |
- 내용이 함축적이며 최소한의 정보만을 담고있다 - markup overhead가 없다 |
단점 | - 문서의 양이 필요 이상으로 많다 | - 함축적이기 때문에 의미파악이 어려울 수 있다
|
# DB대신 JSON이나 XML을 사용하는 이유 (출처 : http://blog.naver.com/nil27/220225711693)
- 어떤 경우는 JSON이나 XML을 쓸까?
데이터 접근이 거의 없고, 사용자가아닌 관리자에 의해서만 수정되는 값이면서, 보안도 필요없는 데이터라면?
굳이 여러가지 기능이 다 되는 DB를 사용할 이유가 없다. (필요한 기능외에 다른 기능을 갖고 있을 필요가 없다)
단순한 파일 입출력(JSON이나 XML을 이용하여)으로 구현하는 것이 속도도 빠르고 가볍다
- 어떤 경우 DB를 사용할까?
데이터를 삽입/수정/삭제/검색(CRUD)라면 계속해서 데이터에 접근하기 때문에 이에 최적화 되어있는 DB를 써야 한다.
(DB에는 검색방법이나 저장방법등 CRUD에 최적화 되어 있다고 할 수 있다.)
# JSON
JSON은 자바스크립트 객체를 문자열로 변환하거나 반대로 변환하는 작업을 진행하는데 매우 경량화된 방법이다.
데이터 객체를 직렬화해 클라이언트에서 서버로 전달하거나 프로세스에서 프로세스 전달, 스트림에서 스트림으로 전달,
데이터베이스에 저장 시에도 잘 동작한다.
자바스크립트객체를 직렬화하는 일에 XML이 아닌 JSON을 이용하는 이유는 다음과 같다.
- JSON이 훨씬 효율적이고 필요한 문자 수도 더 작다.
- JSON을 직렬화하거나 역질렬화하는 편이 XML을 직렬화/역직렬화를 하는 편보다 빠르다.
- JSON은 자바스크립트의 문법과 유사하기 때문에 개발자의 관점에서 가독성이 좋다.
# JSON Parsing (ex. JAVA - JSON을 Class로 변환)
JSON으로 작성되어있는 문자열을 각 언어에 해당되는 형태로 변환하는 것
Source)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> </head> <script type="text/javascript"> var orderJSON = '{ "name" : "홍길동", "address" : "서울특별시 관악구 낙성대동", "orderItems" : [ {"item" : "멈추면, 비로소 보이는 것들", "price" : 15000, "qty" : 1 },{"item" : "어떻게 원하는 것을 얻는가?", "price" : 18000, "qty" : 1 } ], "baroOn" : true }'; // JSON 문자열을 파싱하여 자바스크립트 객체로 변환 // JSON 문자열 파싱을 함으로 비로소 자바스크립트에서 사용할 수 있게 된다 var order = JSON.parse(orderJSON); document.writeln('order.name: ' + order.name + '<br/>'); document.writeln('order.address: ' + order.address + '<br/>'); document.writeln('<br/>'); for (var i = 0; i < order.orderItems.length; i++) { for ( var prop in order.orderItems[i]) { document.writeln(prop + ' : ' + order.orderItems[i][prop] + '<br/>'); } document.writeln('<br/>'); } document.writeln('order.baroOn: ' + order.baroOn + '<br/>'); document.writeln('<br/>'); </script> | cs |
반응형
댓글