AJAX (3) JQuery 방식

■ JQuery 방식을 이용한 AJAX 테스트

[표현법]
$.ajax({
    속성명 : 속성값,
    속성명 : 속성값,
    ...
});

 

● 주요 속성

• url : 요청할 url(필수)
• type[method] : 요청시 전송방식(get/post, 생략시 기본값 get)
• data  : 요청시 전달할 값
• success : ajax통신 성공시 실행할 함수를 정의(status == 200일때)
• error : ajax통신 실패시 실행할 함수를 정의(status != 200일때)
• complete : ajax통신에 실패했든 성공했든 무조건 실행할 함수를 정의

● 부수적인 속성

• async : 서버와의 비동기 처리방식 설정 여부(기본값 true)
• contentType : request의 데이터 인코딩 방식 정의(보내는 측의 데이터 인코딩)
• accept : 파라미터의 타입 설정(사용자 특화된 파라미터 타입 설정 가능)
• beforeSend : ajax요청을 하기 전 실행되는 이벤트함수를 정의(데이터 가공, header관련 설정을 한다.)
• cache : 요청 및 결과값을 scope에서 갖고 있지 않도록 하는 것(기본값 true)
• contents : JQuery에서 response의 데이터를 파싱하는 방식 정의
• crossDomain : 타 도메인 호출 가능 여부 설정(기본값 false)
• dataFilter : response데이터를 받았을 때 정상적인 값을 return할 수 있도록 데이터와 데이터 타입 설정
• global : 기본 이벤트 사용 여부(ajaxStart, ajaxStop) => 선처리 작업시 사용
• password : 서버에 접속권한이 필요한 경우 설정
• processData : 서버로 보내는 값에 대한 형태 설정 여부(기본 데이터를 원하는 경우 false 설정)
• timeout : 서버 요청 시 응답 대기 시간 설정
• dataType : 서버에서 response로 넘어오는 데이터의 데이터 자료형 설정, 값이 없다면 알아서 판단한다.

dataType 종류
xml    : 트리형태의 구조
json   : 맵형태의 구조(일반적인 데이터 구조)
script : javascript 및 일반 String형태의 데이터
html   : html태그 자체를 return하는 방식
 text   : String 데이터

 

■ get 방식으로 서버에 데이터 전송 및 응답

● jsp 페이지에서 html 코드 생성

<h3>1. 버튼 클릭시 get방식으로 서버에 데이터 전송 및 응답</h3>
	
입력 : <input type="text" id="input1">
<button id="btn1">전송</button>
<br>
	
응답 : <label id="output1">응답 대기중..</label>

html 페이지

 

● script 코드 생성

$(function(){
	$("#btn1").click(function() {
		$.ajax({
			url  	: "jqAjax1.do",
			data 	: {input : $("#input1").val()},
			type 	: "get",
			success : function(result){ // 요청 성공시 실행할 콜백함수 정의
				// result : 서블릿으로부터 전달받은 값(xhr.responseText와 동일)
				$("#output1").text(result);							
			},
			error   : function(){
				console.log("ajax통신 실패");
			},
			complete : function(){
				console.log("ajax 통신 성공 여부와 상관없이 항상 실행될 것이다.");
			}
		});
	});
});

 

● jqAjax1.do servlet코드 생성

package com.kh.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class JqAjaxController1
 */
@WebServlet("/jqAjax1.do")
public class JqAjaxController1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public JqAjaxController1() {
        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 input = request.getParameter("input");
		
		// 응답할 데이터 설정
		String responseData = "입력된 값 : " + input + ", 길이 : " + input.length();
		
		// jsp와 연결통로를 열어주기
		response.getWriter().print(responseData);
	
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

● 결과 확인

get 방식의 ajax테스트

- 값을 입력하고 전송버튼을 누르면 다음과 같은 결과가 출력된다.

 

■ post 방식으로 서버에 데이터 전송 및 응답

● jsp 페이지에서 html 코드 생성

<h3>2. 버튼 클릭시 post방식으로 서버에 데이터 전송 및 응답받기</h3>
	
이름 : <input type="text" id="input2_1"><br>
나이 : <input type="text" id="input2_2"><br>
<button onclick="test2();">전송</button>
<br>
	
응답 : <label id="output2">현재 응답 없음...</label>

html 페이지

 

● script 코드 생성

<script>
	// 버전1) 문자열 데이터 응답방식
	function test2() {
		$.ajax({
			url  	: "jqAjax2.do",
			data 	: {
				name : $("#input2_1").val(),
				age : $("#input2_2").val()
			},
			type 	: "post",
			success : function(result){
				$("#output2").text(result);
			}
		});
	};
</script>

 

● jqAjax2.do servlet코드 생성

package com.kh.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setCharacterEncoding("UTF-8");
		
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		
		// ajax는 결과값을 딱 한개만 응답해줄 수 있다.
		// 이름따로, 나이따로 이렇게 보낼 수 없다.
		// 요청처리를 다했다는 가정하에 하나의 문자열로 이어서 응답데이터를 꾸며줄 예정이다.
		
		String responseData = "이름 : " + name + ", 나이 : " + age;
		
		response.getWriter().print(responseData);
	
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

● 결과 확인

post 방식의 ajax테스트

- 값을 입력하고 전송버튼을 누르면 다음과 같은 결과가 출력된다.

 

■ 모든 코드

<h3>1. 버튼 클릭시 get방식으로 서버에 데이터 전송 및 응답</h3>
	
입력 : <input type="text" id="input1">
<button id="btn1">전송</button>
<br>
	
응답 : <label id="output1">응답 대기중..</label>
	
<script>
	$(function(){
		$("#btn1").click(function() {
			$.ajax({
				url  	: "jqAjax1.do",
				data 	: {input : $("#input1").val()},
				type 	: "get",
				success : function(result){ // 요청 성공시 실행할 콜백함수 정의
					// result : 서블릿으로부터 전달받은 값(xhr.responseText와 동일)
					$("#output1").text(result);							
				},
				error   : function(){
					console.log("ajax통신 실패");
				},
				complete : function(){
					console.log("ajax 통신 성공 여부와 상관없이 항상 실행될 것이다.");
				}
			});
		});
	});
</script>
	
<hr>
<br>
	
<h3>2. 버튼 클릭시 post방식으로 서버에 데이터 전송 및 응답받기</h3>
	
이름 : <input type="text" id="input2_1"><br>
나이 : <input type="text" id="input2_2"><br>
<button onclick="test2();">전송</button>
<br>
	
응답 : <label id="output2">현재 응답 없음...</label>
	
<script>
	// 버전1) 문자열 데이터 응답방식
	function test2() {
		$.ajax({
			url  	: "jqAjax2.do",
			data 	: {
				name : $("#input2_1").val(),
				age : $("#input2_2").val()
			},
			type 	: "post",
			success : function(result){
				$("#output2").text(result);
			}
		});
	};
</script>