[ AJAX ]JSON과 AJAX란?(예제 포함)

JSON 객체를 이용하여  Ajax요청 예제

1. JSON(JavaScript Object Notation)이란?

   1) JSON는 javascript 객체를 만드는 표현식입니다.

  2) key : value 형식의 데이터 저장 방식입니다.

  3) 경량의 DATA를 교환하는 방식입니다.

2. JSON 예제

var test = {
        "name" : "홍길동",
        "age"    : 27,
        "address" : "서울시"
}

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

key == "name" : value == "홍길동" 이런 형식으로 데이터가 들어가는데요. 이런 JSON형식으로 데이터를 전송하면 Bean에서 key의 명칭과 같은 Bean안에 있는 변수를 자동으로 매핑 합니다. 뒤에서 좀더 상세하게 설명하겠습니다.

3. AJAX(Asynchronous JavaScript and XML)란?

  1) AJAX는 비동기 형식의 통신이다.

  2) 전체 페이지를 로드하는 동기식 통신이 아닌 일부분의 데이터만 변하기를 원할 경우 특정 부분만 로드하여 준다.

4. JSON을 사용한 AJAX 예제

var test = {
        "name" : "홍길동",
        "age"    : 27,
        "address: "서울시"
}

$.ajax({
		type : "POST",                               //1
		url : "/test/home",                          //2
		dataType : 'json',                           //3
		contentType : 'application/json',            //4
		data : JSON.stringify(test),                 //5
		success : successCall,                       //6
		error   : errorCall                          //7
	
});

function successCall(){
    alert("전송성공");
}

function errorCall(){
    alert("전송실패");
}

1. type : "POST" POST 형식의 type으로 전송.

2. url   : Back End에서 받을 요청 url.

3. dataType : data type을 'json'형식으로 전송

4. contentType : 컨텐트 타입을 'application/json'으로 전송

5. data : test라는 json객채를 JSON.stringify형식으로 전송

6. success : 정상적으로 성공할 경우 scccessCall함수 호출(함수명은 개인 입맛대로 사용하면 됩니다.)

7. error : 에러 발생 시 errorCall함수 호출(함수명은 개인 입맛대로 사용하면 됩니다.)

유익하셨다면 댓글도 하나 달아주시면 감사하겠습니다.