JSON & AJAX 간단히 알아보기

JSON(JavaScript Object Notation)이란?

JSON은 자바스크립트의 객체 표현식과 유사한 방식으로 데이터를 주고 받는 방법입니다.

자바스크립트 객체와 거의 유사하지만 몇가지 차이점이 존재합니다.

 

JSON은 객체를 정의하지는 않습니다. 즉, 자바스크립트 객체가 아니라 객체 표현식으로 데이터를 표현합니다.

따라서 다른 도메인에서도 요청을 보낼 수 있습니다.

var test = {
    "name" : "coco",
    "age" : 26,
    "address : "서울시"
}

위와 같은 객체 형식의 표현식으로 쓸 수 있습니다. test라는 객체는 key : value 형식의 표현식입니다.

key = "name " : value = "coco" 으로 데이터가 들어갑니다.

이런 JSON 형식으로 데이터를 전송하면 Bean에서 key의 명칭과 같은 Bean안에 있는 변수를 자동으로 매핑 합니다.

 

JSON 데이터 처리 - 직렬화, 역직렬화

JSON 데이터는 자바스크립트를 이용하여

JSON 데이터 -> 자바스크립트 객체,  자바스크립트 객체 -> JSON 데이터로 쉽게 변환할 수 있습니다.

 

자바스크립트 객체에 저장된 데이터를 서버로 전송하기 위해서는 객체를 JSON 형식의 문자열로 변경 해야 합니다.

이 과정을 객체의 직렬화 (serializing)라고 합니다.

직렬화는 stringify( ) 메서드를 이용하게 됩니다.

 

서버로부터 JSON 데이터가 전송되면 이 데이터는 문자열입니다.

이 문자열을 자바스크립트 객체로 변환해야 하는데 이를 객체의 역직렬화(deserializing)라고 합니다.

역직렬화는 다른 말로 "문자열을 파싱한다"라고도 합니다.

역직렬화는 JSON 내장 객체의 parse( ) 메서드를 이용하며 객체의 데이터에 접근해 페이지에서 사용할 HTML을 생성할 수 있습니다.

 

• JSON.stringify( )  :  JavaScript Object ㅡ> JSON 데이터
• JSON.parse( )  :  JSON 데이터 ㅡ> JavaScript Object

  ---

AJAX(Async JavaScript And XML)란?

Ajax는 웹 페이지에서 새로운 데이터를 보여주려고 할 때 웹페이지 전체를 새로고침 하지 않고,

보여주고자 하는 데이터가 포함된 페이지의 일부분 만을 로드하기 위한 기법입니다.

 

Ajax는 비동기 처리 모델(non-blocking)을 사용하여 데이터를 처리합니다.

 

Ajax 동작방식

 

1. 요청(request) - 브라우저가 서버에 정보를 요청한다.

2. 서버의 동작 - 서버는 JSON, XML 등의 형식으로 데이터를 전달한다.

3. 응답(response) - 브라우저에서 이벤트가 발생하여 콘텐츠를 처리한다.

 

데이터 타입

Ajax는 Async Javascript And XML의 약어로, 이름에 나와있는 것처럼 XML 형식으로 데이터를 주고 받을 수 있습니다. 하지만 최근에는 많은 경우를 JSON 형식으로 데이터를 주고 받습니다.

 

JSON을 사용한 AJAX 간단예제

var test = {
    "name" : "coco",
    "age" : 99,
    "address" : "서울시"
}

$.ajax ( {
    type : "POST"
    url : "test/home",
    dataType : 'json',
    contentType : 'application/json',
    data : JSON.stringify(test),
    beforeSend : function() {
        alert("ajax 호출시 실행");
    },
    success : function(res) {
    	alert("success");    
    },
    error : function(xhr) {
    	alert(xhr.responseText);
    },
    complete : function() {
        alert("ajax 호출 완료시 실행");
    });

type : 서버 전송 통신 방식 지정 ( GET, POST, PUT, DELETE )

 

url : 데이터를 전송할 URL

 

dataType : data type을 "json"형식으로 전송

dataType : "json" - JSON 형식의 데이터로 배열, 객체를 포함하는 문자열 (권장)
dataType : "text" - 일반적인 문자열
dataType : "html" - HTML을 포함한 문자열
dataType : "script" - 새로운 스크립트
dataType : "jsonp" - 다른 도메인으로부터 전송되는 JSON 데이터
dataType : "xml" - XML 형식의 데이터
dataType 생략 : 요청에 맞게 자동으로 형식 설정
기본 값 : MIME 유형

ContentType : 서버에 데이터를 보낼 때 JSON 데이터 형식 지정

 

data : 서버로 보낼 데이터

// 일반
data : { 
    type1 : type1, 
    type2 : type2 
}

// JSON 데이터로 보내기
data : JSON.stringify ({ 
    type1 : type1, 
    type2 : type2 
})

Option

beforeSend : function() {} - HTTP 요청 전에 호출되는 함수 (return false일 경우 요청 중단)

success : function() {} - HTTP 요청 성공시 호출되는 함수

error : function() {} - HTTP 요청 실패시 호출되는 함수

complete : function() {} - HTTP 요청 완료시 호출되는 함수 (요청 성공,실패 여부와 관계없이 실행)