Ajax란?

Ajax

- Asynchronous JavaScript and XML 의 약자

- javaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는 (통신)방식

- 데이터 형식은 Text, HTML, JSON 등 사용 가능하다.

 

비동기식 데이터 통신
: 클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고,
다른 작업 수행 가능 추후 요청이 오면 응답에 관련된 작업을 진행한다.

 

1. Ajax 장점

1) 상단의 url 변경되지 않는다.

2) 페이지 전체를 갱신하지 않고 필요한 부분만 업데이트 가능하다.

필요한 부분만 쿼리스트링으로 클라이언트가 요청한다.

3) AxtveX나 플러그인 프로그램 설치없이 이용가능

4) Javascript, jQuery 방식

 

2. Ajax 단점

1) Javascript로 구현이 되면 브라우저에 따른 크로스브라우저 처리가 필요함

2) 연속적인 데이터 요청시 서버 부하 증가하여 페이지 느려짐

3) 페이지 복잡도가 증가하여 에러 발생시 디버깅이 어려움

 

 

실습(post와 get방식)

JQuery를 이용한 Ajax테스트에서 get방식과 post방식으로 데이터를 처리하면

개발자 도구 창에서 확인할 수 있는 것처럼 페이지 전체가 새로고침되는 것이 아니라 필요한 요청만 추가가 되는 것을 볼 수 있다. 그리고 url 변동도 없다!

 

get방식은 쿼리스트링으로 넘어가고 post는 그렇지 않음도 확인할 수 있다.

웹 브라우저

 

1. index.jsp 에서 여러개 데이터 전송

$.ajax({})에서 data속성에 서버로 보낼 값을 여러 개 적어준다. 현재는 name, age 이름으로 input창 값을 받아서 보낸다.

<h3>3. 버튼 클릭시 post방식으로 서버에 여러개의 데이터 전송 및 응답</h3>
	
	이름 : <input type="text" id="input3_1">
	나이 : <input type="text" id="input3_2">
	<button id="btn3">전송</button>
	
	응답 :
	<input type="text" id="output3" style="width:300px" readonly>
	
	<script>
		$(function(){
			$("#btn3").click(function(){
				var input3_1 = $("#input3_1").val();
				var input3_2 = $("#input3_2").val();
				
				$.ajax({
					url: "jqTest3.do",
					data:{
						name : input3_1,
						age : input3_2
					},
					type: "post",
					success: function(result){
						$("#output3").val(result);
					},
					error: function(){
						$("#output3").val("ajax 통신실패")
					}
					
				})
			})
		})
	</script>

2. servlet

getParameter()로 index.jsp에서 보낸 데이터의 값을 받는다.

response.getWriter().print("이름" + name + ",나이 : " + age); 를 통해 스트림에 기록한다.

@WebServlet("/jqTest3.do")
public class jqAjaxServlet3 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public jqAjaxServlet3() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		
		String name = request.getParameter("name");
		int age = Integer.parseInt(request.getParameter("age"));
		
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print("이름" + name + ",나이 : " + age);
	}

 

다음에는 서버에서 리스트를 반환할 때 Gson을 사용하는 것과 사용하지 않을 때 코드를 Gson과 같이 공부해서 블로그에 올려야지

 

 

출처 및 참고

1. kh정보교육원 교육자료