[Ajax] - jQuery방식을 이용한 AJAX 활용예시(jQuery 방식에서의 AJAX통신 - 주요속성과 부수적인 속성, get방식과 post방식)

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

< 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의 데이터인코딩 방식 정의(보내는 측의 데이터 인코딩)
- dataType : 서버에서 response로 넘어오는 데이터의 데이터 자료형설정. 값이 없다면 알아서 판단함. ★
 xml : 트리형태의 구조
 json : 맵형태의 구조(일반적인 데이터 구조)
 script : javascript 및 일반 STRING형태의 데이터
 html : html태그 그 자체를 return하는 방식
 text : String 데이터
  (알아서 처리되서 거의 안씀)  
- accept : 파라미터의 타입 설정(사용자 특화된 파라미터 타입 설정 가능)
☆- beforeSend : ajax요청을 하기 전 실행되는 이벤트 함수를 정의(데이터 가공, header관련 설정을함)
- cache : 요청 및 결과값을 scope에서 갖고있지 않도록 하는것(기본값 true)
- contents : jQuery에서 response의 데이터를 파싱하는 방식 정의
- crossDomain : 타 도메인 호출 가능 여부 설정(기본값 false)  (;사용하려면 true로 변경해야함)
- dataFilter : response 데이터를 받았을때 정상적인 값을 return할 수 있도록 데이터와 데이터 타입 설정  
- global : 기본 이벤트 사용 여부(ajaxStart, ajaxStop) => 선처리 작업시 사용
- password : 서버에 접속권한이 필요한 경우 설정
   ☆- processData : 서버로 보내는 값에 대한 형태 설정 여부(기본데이터를 원하는 경우 false 설정)
- timeout : 서버 요청시 응답 대기 시간 설정 (;기본값 설정되어 있음)  

 

< Jquery방식을 이용한 ajax테스트 >

1. 버튼 클릭시 get방식으로 서버에 데이터 전송 및 응답

<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()},  //; key=value 형식임
					type : "get",
					success : function(result){ // 요청 성공시 실행할 콜백함수 정의
						// result : 서블릿으로부터 전달받은 값(xhr.responseText와 동일)
						$("#output1").text(result);
					},
					error : function(){
						console.log("ajax통신 실패");
					},
					complete : function(){
						console.log("ajax 통신 성공 여부와 상관없이 항상 실행될것");
					}
				});
			});
		});
	</script>

 

2. 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 {
		
		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);
	}

}

=> 출력값은 " 입력된 값 :  000, 길이 : 000 " 으로 화면에 출력된다.

 

 

3. 2. 버튼클릭시 post방식으로 서버에 데이터 전송 및 응답받기

<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);
				}
			})
		} */
		
		// 버전 2) JSON데이터 응답방식
		function test2(){
			
			$.ajax({
				url: "jqAjax2.do",
				data :{
					name : $("#input2_1").val(),
					age : $("#input2_2").val() 
				},
				type : "post",
				//dataType : "text",
				//dataType : "json", 있는게 맞는데 생략가능
				success : function(result){
					console.log(result);
					
					//$("#output2").text("이름 : "+result[0]+", 나이 : "+result[1]);
					$("#output2").text("이름 : "+result.name+", 나이 : "+result["age"]); //; 접근방법1: .key값 , 접근방법2: ["내용"]
				}
			});
		}
	</script>

 

4. Servlet

/**
 * 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 {
		
		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 {

		// 원래는 포스트방식으로 보냈으면 포스트에 작성해야하지만 포스트에서 doGet실행하면 실행이됨
		doGet(request, response);
	}

}

=> 출력값은 " 이름 : 000 , 나이 : 000 " 으로 화면에 출력된다.