Ajax

엄ㅁト 저는 커nㅓ 코딩왕○l 될㉣łı요

 

ajax는 Asynchronous Javascript And Xml 의 준말로, 비동기로 통신하는 Javascript(JSON)와 xml 이라는 뜻이다.

여기서 동기화와 비동기화는 아래와 같은 차이가 있다.

✔ 동기화 : 요청한 일이 끝날때까지 다른 일을 하지 못한다. 값을 입력했을때 값이 사라진다.

✔ 비동기화 : 요청해놓고 다른 일을 자유롭게 할 수 있다. 값을 입력하면 값이 사라지지 않는다.

                     ID 중복체크와 같은 기능 구현시 사용한다.

 

 

위와 같은 간단한 로그인양식을 만들었을때, 이를 비동기방식으로 처리해볼 것이다.

cotroller에 로그인을 처리할 코드를 입력해야 하는데, 동기화와 달리 비동기화는 controller도 비동기에 맞게 변경해야한다.

1) response 객체를 이용해 응답해야하고,

2) javascript 가 알 수 있는 형태로 응답해줘야한다.(array, object)

위의 내용을 쉽게 할 수 있도록 라이브러리를 가져온다.

 

https://mvnrepository.com/ 에서 jackson을 검색한 뒤 Jackson Databind 와 Jackson Core를 복사해온다.

그 뒤 pom.xml 에서 라이브러리를 추가할 부분인 AspectJ 위에 붙여넣기를 해준다.

 

		<!-- ajax 통신을 위한 라이브러리 -->
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-databind</artifactId>
		    <version>2.11.0</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-core</artifactId>
		    <version>2.11.0</version>
		</dependency>

 

ajax는 javascript를 필수적으로 사용하기 때문에, jsp 문서 하단 스크립트 영역에 ajax 관련 내용을 작성해주어야한다.

아래의 양식을 지켜서 작성해야하는데, 쉼표를 빼먹지말고 잘 써줘야한다.

$.ajax({
	type: ,
    url: ,
    data: ,
    dataType: ,
    success:function(){},
    error:function(){}
});

 

로그인 버튼을 누르면 맨처음 "ajax 전송"이라는 문구가 콘솔에 뜨도록 해주고,

ajax를 통해 요청시 추가할 파라미터인 id와 pw를 넣고 성공/실패시 실행할 함수까지 입력해주었다.

<script>
function send() {
	console.log("ajax 전송");
	
	$.ajax({
		type:"get", //method 와 같다.
		url:"login.ajax", //action 과 같다.
		data:{
			id: $("#id").val(),
			pw: $("#pw").val()
		}, //parameter
		dataType:"json", //어떤 형태로 데이터를 주고받나?
		success:function(data){
			console.log(data);
		}, //성공했다면?
		error:function(e){
			console.log(e);
		} //실패했다면?
	});
	
}
</script>

 

 

이제 컨트롤러에 로그인을 처리할 코드를 입력해준다.

	@RequestMapping(value = "/login.ajax")
	@ResponseBody //response 를 이용해서 값을 전달할 수 있다.
	public HashMap<String, Object> ajaxLogin(@RequestParam String id, @RequestParam String pw) {
		logger.info("비동기 방식 : {}/{}",id,pw);
		
		//{"msg":"로그인에 성공했습니다."} <- js object / HashMap
		HashMap<String, Object> map = new HashMap<String, Object>();
		map.put("map", "로그인에 성공했습니다.");
		map.put("success", true);
		map.put("code", 200);
		
		return map;

@ResponseBody 를 이용해 response 객체를 불러와주고,

key 와 value 값을 짝을 이루어 넣을 것이기 때문에 HashMap 을 객체화한다.

 

 

서버 가동시 콘솔창에 위와 같은 문구를 확인할 수 있다.