[javascript/ajax] ajax의 구성 및 기능

ajax는 비동기 JavaScript and XML의 약어라는데 

간단히 말하자면 페이지가 빨리 로딩되는 함수?기능?이다. 

 

ajax는 아래처럼 생겼다. 

$.ajax({
            method: "GET",
            dataType: "json",
            data: { "test": test,
                    "test2": test2
            },
            url: "/sample",
            success: function(data) {
            },error:function(error){
            }
        });

 

속성이 여러개 있지만 이정도만 사용하면 왠만한건 다 구현할 수 있었다. 

method

get타입으로 보낼건지, post방식으로 보낼건지 정하는 옵션이다. 

get은 보안이 좀 약하고 post는 보안이 좀 가미된 느낌

ajax에서 보낸 데이터를 spring에서 controller단에서 받을때 method를 한정지어 get일때만 받거나 post일때만 받을 수 있게 설정할 수 있다. 

@ResponseBody
@RequestMapping(value="/sobang/ajax/pointExp.do", method= RequestMethod.GET)

dataType

spring으로 보낼 데이터 타입을 정할 수 있다. 

주로 json으로 해놓다보니 건들지 않는 속성중 하나이다. 

data 

spring(또는 서버)으로 보낼때 같이 보내지는 데이터이다. 

키와 값 쌍으로 구성되어 있는데 당연히 키는 중복되면 안되고 값은 실제 문자열("example")을 넣어도 되고 변수로 넣어도 된다. { 키:값, 키:값, ... } 형식으로 구성된게 json 타입의 데이터이다.

 

url

spring과 매핑되는 주소이다.

 

spring코드↓ 

@ResponseBody
@RequestMapping(value="/sample", method= RequestMethod.GET)

sucess:function(data){

}

만약 spring에서 데이터를 성공적으로 보내고 반환값을 받았다면 반환값은 data에 보내진다.

data를 가지고 표현하면 된다.

 

error:function(error){

}

sucess와 반대로 실패했을 때 들어오는 곳! error메세지를 콘솔에 출력해보면 그다지 친절하지 않아 위치찾는 용도로만 쓰고 있다.(ajax위치찾기용으로) 

 

---

주로 사용하는 ajax 속성을 살펴보았다. 

더 자세한 내용은 ajax에 더 익숙해지고 딥한 공부를 하고 난 후에 작성하겠다. 

 

다음포스팅은 ajax를 spring프로젝트에서 사용할때 controller에서 어떻게 받고 사용하는지에 대해 작성하겠다.