[ajax] 비동기 요청 & 응답 기본 형식 정리

jQuery를 활용한 비동기 통신은 기본적으로 다음의 구조로 이뤄진다.

 

1. jQuery 내부에서 요청할 데이터를 생성하고 전송

//특정 이벤트, 트리거의 내부에 request 객체 선언

var request = $.ajax({
  url: "전송할 주소", // 호출(요청) 대상
  method: "POST", // 전송 방식
  data: { // jsp가  읽어낼 파라미터명: 전송값 
  //데이터 맵핑
  },
	dataType: "json"  // 응답받을 타입
});

// 응답에 성공했을 경우
request.done(function(data) { 
console.log(data);

alert(data.result);

}); 

// 응답에 실패했을 경우
request.fail(function(jqXHR, textStatus) {
alert("request failed: " + textStatus);;

2. 요청을 받은 jsp 내부에서 처리 후, map을 생성하여 결과를 저장

 * 이때, JSON 객체를 생성하기 위한 map 관련 클래스가 반드시 import 되어 있어야 한다.

<%@ page language="java"  contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
    
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.*" %>

<% 	
	//응답 요청 타입 설정
	response.setContentType("application/json");

  	//반응 타입(브라우저 : inline or 팝업: attachment)	
	response.setHeader("Content-Disposiont", "attachment");
	
	// 데이터 처리
	

	//Map타입으로 응답 데이터 저장
	Map<String, Object> map = new HashMap<String, Object>();
	map.put("result", 결과값);
    
	//Gson을 할용하여 json 포맷방식으로 반환
	Gson gson = new Gson();
	
	
	out.print(gson.toJson(map));

3. 생성한 map을 Gson 라이브러리를 활용하여 json으로 변환 후 출력

	//Gson을 할용하여 json 포맷방식으로 반환
	
	Gson gson = new Gson();

	out.print(gson.toJson(map));
%>

json에 대하여도 따로 포스팅하겠지만, JSON은 자바스크립트의 객체 형태로 다음과 같은 형식을 가지고 있는 데이터의 map이라고 생각하면 편하다.

[
  {
    변수명 : 값,
    변수명 : 값
  },
  {
    변수명 : 값,
    변수명 : 값
  }
];

이런 형식으로 다른 언어 간의 데이터를 주고 받기 쉽게 하기 위하여 사용하는 스크립트 객체이다.

---