AJAX 정리

AJAX란? asynchronous Javascript and XML

• 자바스크립트를 이용하여 비동기식으로 서버와 통신을 한다.
• 비동기 통신이기 때문에 서버에 요청이 가더라도 화면이 이동된다는 느낌을 주지 않고 자연스럽고 빠르게 클라이언트의 화면을 변화시켜준다.
• 최근에는 XML이 아닌 JSON 형식을 많이 사용

장점

• 웹페이지 속도 향상
• 서버에서 처리가 완료될 때 까지 기다리지 않고 다른 프로세스를 진행할 수 있다.
• 비동기 방식이기 때문에 동기 방식과 다르게 UI를 변경할 수 있다.

단점

• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
• 히스토리 관리가 안되므로 보안에 취약하다.
• HTTP 클라이언트의 기능이 한정되어 있다.

VO 생성 -> Controller 생성 후 Ajax에서 호출할 메서드 생성 - > 서버에 전송할 데이터를 json타입으로 포맷팅 후 Ajax 통신 실행

Jackson 라이브러리

Jaskson? Java Object를 JSON으로 변환하거나 JSON을 Java Object로 변환하는데 사용할 수 있는 라이브러리(pom.xml)

• 다양한 형식의 데이터를 지원
• 스트림 방식으로 속도가 빠르며 유연하고, annotation 방식으로 메타 데이터를 기술할 수 있음
• ObjectMapper API를 사용하여 객체에 데이터 세팅을 함
• Spring 3.0 이후부터 스프링에서 Jackson 관련 API를 제공하여 자동화 처리가 가능하게 됨 
• jackson-databind 는 jackson-core, jackson-annotation에 의존성이 있으므로 pom 파일에는 databind 모듈만 기술해도 됨
• jackson-databind : 스트리밍 패키지에 대한 데이터 바인딩 지원 구현. 스트리밍 및 annotation 패키지에 의존
• jackson-core : low-level 스트리밍 API 정의 및 JSON별 구현
• jackson-annotations : 표준 Jackson annotation 포함

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.8</version>
</dependency>

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.9.8</version>
</dependency>

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-annotations</artifactId>
    <version>2.9.8</version>
</dependency>

 

​

​

​

Ajax 기본 형태

$.ajax({
    type: "get",                                 //http 타입
    url: "/ajaxTest",                            //호출URL
    async: true,                                 //동기, 비동기 지정
    data: "",                                    //URL호출시 보낼 파라미터 데이터
    dataType: "json",                            //http 통신 후 응답 데이터 타입
    success: function(res){                      //ajax 통신 성공 후 실행 함수
        console.log("success :: " +res);         //서버에서 res값을 받아서 화면에 처리
    },
    error: function(request, status, error){     //ajax 통신 실패 시 실행 함수
        console.log(error)
    }
})

 

type : http 통신 타입 (GET, POST, PUT, DELETE)

url : http 통신으로 요청할 URL

async : 동기, 비동기 지정(boolean)

data : http 통신 시 같이 보낼 파라미터값 정보

dataType : http 통신 후 서버에서 받은 데이터의 타입값

success : ajax 요청 성공 시 실행할 이벤트 지정(function, array)

error : ajax 요청 실패 시 실행할 이벤트 지정(function)