[Jquery] Ajax 사용하기

동기 통신(Synchronous)

 

: 클라이언트가 자료를 요청하면 서버를 거쳐 처리후 응답함으로인해 잠시 페이지가 Server Script 페이지로 갱신되어

새로고침되고 그동안 사용자는 어떠한 작업도 할수없다.

 

 

비동기 통신(Asynchronous)

: Ajax를 사용해 사용자가 서버에 자료를 요청할 경우 ServerScript 페이지를 거치지않아도 자료를 받아올수있다.

즉, 새로고침(페이지전환)없이 서버와 통신할수있는 방식이다.

기존의 동기적 통신방법에서는 Request가 오면, 클라이언트는 이에 대한 Response를 대기하고있다가

응답을 받음으로써 통신이 종료된다.

그러나 비동기적 통신에서는 클라이언트는 Request을 보내더라도, Response를 기다리지않는다.

 

 

Ajax 주요 메소드

 

대부분 $.ajax()를 사용하며, HTTP 메소드인 POST,GET 방식으로 통신하며 

데이터 타입은 주로 XML, JSON 방식으로 주고받는다.

즉, Client와 Server가 HTTP 통신을 통해 XML/JSON 타입의 데이터를 주고받는다.

$.ajax()의 기본형식은 다음과 같다.

 

 

 

Ajax 사용예제

 

Java dynamic Web project에서 JSP를 사용하여 Ajax 처리를 하는 간단한 예제

 

 

JSP view 파일에서  다음과 같이 ajax 함수를 만든다.

요약하면, request_ajax.jsp로 다음의 data를 POST 방식으로 보내는데, 성공하면 서버에서 받아온 data를 Id=text인 <p>에 넣겠다는 것이다.

해당 button을 누르면 ajax 함수가 정의된 sendRequest() 함수가 호출되고, 서버와 비동기 통신을 할 것이다.

 

 

다음은 클라이언트로부터 받은 요청을 서버에서 응답하는 페이지다. 

해당 페이지는 Spring이라면 컨트롤러에서 처리할 것이다.

먼저, 클라이언트로부터 받은 요청을 HttpServletRequest 객체를 통해 받아, 

out.print 메소드로 응답한다. 

통신내용은 단순히 클라이언트로부터 받은 city와 zipcode를 서버가  "도시 : city 우편번호 : zipcode" 보낸다는것이다.

 

 

웹 브라우저에서 해당 버튼을 누르면 새로고침을 하지않았는데, 서버로부터 응답을 받아서 출력하는것을 볼 수있다.

이러한 방식을 통해서 클라이언트로 부터 요청 받은 데이터 값을 가지고 서버에서 DB에 접근을 한다던지, 다양한 처리를 할 수 있을것이다.