온 코딩

[jQuery - Ajax] 기본 사용법 본문

복습 ARCHIVE/java script

[jQuery - Ajax] 기본 사용법

SummerON 2021. 6. 8. 09:04

Ajax

비동기식 자바스크립트 XML(Asynchronous Javascript And XML)의 약자. 하이퍼텍스트 표기언어(HTML)만으로 어려운 다양한 작업을 웹페이지에서 구현해 이용자가 웹페이지와 자유롭게 상호 작용할 수 있도록 하는 기술. 별도 프로그램을 설치하거나 웹페이지를 다시 로딩하지 않고도 메뉴 등 화면상의 객체를 자유롭게 움직이고 다룰 수 있다. 비슷한 기능의 액티브X나 플래시 등에 비해 가볍고 속도가 빨라 차세대 웹 기술로 각광받고 있다.

[네이버 지식백과] 에이잭스 [AJAX] (한경 경제용어사전)

 

jQuery : $.ajax({ 

   1. 대상 => url:"대상",

   2. 방식 => method:"전송방식",

   3. 전송데이터 => data:{파라미터:값},

   4. 응답 타입 => dataType:"데이터타입"

 });

 

- 응답에 대한 성공여부 확인 가능 

var request = $.ajax({  });

request.done(function(data){     }) - 응답 성공

   : data 매개 변수는 요청한 대상이 전달한 결과값을 받음

request.fail(function(jsXHR, textStatus){      }) - 응답 실패

   :  textStatus 매개변수는 응답 실패에 대한 메세지를 전달 받음

 

+서로 다른 언어 간의 데이터를 주고 받는 경우 일반적으로 JSON 형태를 사용 

   - JSON : 자바스크립트의 객체 형태

[   {

    변수명 : 값,

    변수명 : 값

    },

   {

    변수명 : 값,

    변수명 : 값

    }

]; 

 ==>Map 계열과 비슷한 형태를 가짐 (키-값)

 

+ 자바Map ->JSON 변환 

  - 구글 제공 라이브러리 (gson-2.8.5.jar) 

Gson g = new Gson();

g.toJson(map);

html / js / jsp 연결하여 ajax 실행하기

HTML => jQuery => JSP 요청

HTML <= jQuery <= JSP 응답

HTML  :  사용자 입력 및 사용자 행위에 대하여 반응 가능한 UI작성

jQuery  : 사용자 행위가 발생했을 때, 해당 값들을 추출하여 JSP에게 전달(요청) 후 응답결과처리

JSP : 사용자가 요청한 내용에 대한 처리 및 그 결과를 응답

     - contentType="application/json;으로 설정 

     - gson-2.8.5.jar 를 이용할 경우 import 필요 ( com.google.gson.Gson)

     - Map계열 클래스 import 필요 (java.util.Map / java.util.HashMap)

     - 요청시 전달되는 응답 데이터 타입 설정

     - 요청시 전달 된 전송방식에 대한 설정

     - 요청시 전달 된 데이터가 있을 경우 request.getParameter()를 이용하여 데이터를 추출

     - 요청 내용에 관한 처리 

        : 데이터 베이스 접속이 필요한 경우에는 전달 된 데이터를 VO 객체에 저장하여 DAO에게 전달 할 수 있도록 처리

        : model2(MVC)에서는  Controller를 이용(Spring도 마찬가지)

       : 데이터 베이스 접속이 필요 없을 경우에는 내부에서 처리

     - 결과 값을  Map 계열 클래스를 이용하여 JSON과 동일한 구조로 저장

     - Map 계열 객체를 JSON형식으로 변환

     - 변환된  JSON 객체를 응답처리

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ajaxTest.html</title>
	
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="./js/ajax_id.js"></script>
</head>

	<!--
		문제1. 회원아이디 체크 폼과 확인 버튼을 만들고 확인을 눌렀을 경우 ajax를 통하여
		아이디 중복 확인을 할 수 있는 기능(ajaxCallTest.jsp)을 만들어주세요.
		단, 아이디는 임의의 값과 비교...(DB를 통해 조회한다고 가정~~)
	 -->
<body>
	<input type="text" id="memberId">
	<button type="button" id="idCheckBtn">중복확인</button>
</body>
</html>
/**
 * ajax_id.js
 */

$(document).ready(function() {
	/*
		jQuery 가 JSP 에게 데이터를 직접 전달.. ajax()
		ajax() : JSP 응답 성공 => done()
		ajax() : JSP 응답 실패 => fail()
	*/
	$('#idCheckBtn').click(function(){
		var input = $('#memberId');
		
		var request = $.ajax({
			url: "./ajaxCallTest.jsp",		// 호출(요청) 대상
			method: "POST",					// 전송방식
			data:{
				memberId : input.val()		// jsp가 읽어낼 파라미터명:전송값
			},
			dataType : "json"				// 응답받을 타입
		}); 	// ajax() END
		
		request.done(function(data){  
			//JSP 응답 성공 후 데이터 받아오는 것 
			console.log(data);
			var result = data.result;
			
			if(result == "0"){
				alert("사용가능한 아이디 입니다.");
			}else{
				alert("중복된 아이디 입니다.");
			}
		}); 	// done() END
		
		request.fail(function(jqXHR, textStatus){
			alert("Request failed : " + textStatus);
		});    // fail() END
		
	});   // click() END
});	
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson" %>  <%-- gson-2.8.5.jar --%>
<%@ page import="java.util.*" %>
<% 	// ajaxCallTest.jsp

	//응답 요청 타입 설정
	response.setContentType("application/json");

	//반응 타입(브라우저 : inline or 팝업 : attachment)
	response.setHeader("Content-Disposiont", "attachment");
	
	//memberId를 ajaxTest.html에서 받는다.
	String memberId = request.getParameter("memberId");
	
	//Map타입으로 응답 데이터 저장
	Map<String, Object> map = new HashMap<String, Object>();

	//Gson을 할용하여 json 포맷방식으로 반환
	Gson gson = new Gson();

	//db에서 조회했다는 가정하에 조건 처리
	if(memberId.equals("id002") || memberId.equals("id005")){
		map.put("result", "1");
	}else{
		map.put("result", "0");
	}
	
	// 반환
	out.println(gson.toJson(map));
%>

html /  jsp 연결하여 ajax 실행하기

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>두가지 값을 전달(ajaxCallTest2.jsp)하여 곱한 결과를 반환  ajaxTest2.html</title>
	
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$('#call').click(function(){
				var input1 = $('#num1');
				var input2 = $('#num2');
				
				var request = $.ajax({
					url:"ajaxCallTest2.jsp",
					method:"POST",
					data:{
						num1:input1.val(),
						num2:input2.val()
					},
					dataType:"json"
				});//ajax end
				
				request.done(function(data){
					console.log(data);
					alert(data.result);
				});//done end
				
				request.fail(function(jqXHR,textStatus){
					alert("Request failed  : "+textStatus );
				}); //fail end
				
			});//click end

		});	
	</script>
</head>

<body>
<!--
		문제2. #call 버튼 클릭시 #num1 과 #num2의 id 값을 가지고
		ajaxCallTest2.jsp 페이지를 요청. 
		
		ajaxCallTest2.jsp의 응답은
		#num1과 #num2 곱하기 연산 후에 그 값을 반환.
		경고창으로 출력
-->
	<input type="text" id="num1" /><br />
	<input type="text" id="num2" /><br />
	<button type="button" id="call">계산</button>
	
</body>
</html>
<%@ page language="java"  contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
    
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.*" %>

<% 	
	//응답 요청 타입 설정
	response.setContentType("application/json");

	//반응 타입(브라우저 or 팝업)
	response.setHeader("Content-Disposiont", "attachment");

	
	// Sting 타입의 num1 을 int로 형변환
	String num1 = request.getParameter("num1");
	String num2 = request.getParameter("num2");

	int n1 = (int) Integer.parseInt(num1);
	int n2 = (int) Integer.parseInt(num2);
	int num = n1*n2;
	
	//Map타입으로 응답 데이터 저장
	Map<String, Object> map = new HashMap<String, Object>();

	
	//Gson을 할용하여 json 포맷방식으로 반환
	Gson gson = new Gson();
	
	map.put("result", num);
	out.print(gson.toJson(map));

%>

 

 

ajax에서다루는 mimetype 종류

application/json : json

text/plain : text

text/html : html

text/xml : xml

(타입명(확장자) : mimetype (응답페이지에 서술))

 

+ 서로 다른 언어 간의 데이터를 주고 받는 경우 일반적으로 JSON 형태를 사용..

JSON는 자바스크립트 객체 형태..

+

HTML5 : jQuery의 ajax() 함수를 사용하면 굳이 <form></form> 이 없어도 요청 및 응답 처리가 가능!!

<head>

   <script src="jquery.js"></script>

   <script src="~~~.js"></script>

</head>

<body>

  <input type="text" id="num" />  

  <input type="button" id="btn" /> 

<body>

-----------------------------------------------

jQuery (HTML5 형식일 경우 자바스크립트 파일을 생성 : ~~~.js)

$(document).ready(function(){

      $('#btn').click(function(){

             var inputNum=$('#num');

 

             var request = $.ajax({     // 요청

                    url: "test.jsp",

                    method:"POST",

                    data:{ num1: inputNum.val() },

                    dataType:"json"

             });

 

             request.done(function(data){      // 요청 결과 처리 : 성공시

     // 만약 test.jsp 가 응답 하는 데이터 형식(형태/포맷)이 json 형태일 경우

                   // 자바스크립트는 객체.속성 형태로 값을 추출 가능..

             });

 

             request.fail(function(jqXHR, textStatus){      // 요청 결과 처리 : 실패시

     // 경고창을 이용하여 사용자에게 실패 메시지를 출력...

                   // 예) alert("응답 실패(요청에 실패) 원인 : " + textStatus );

             });

      });

});

---------------------------------------------------------------------------------------

JSP : 

일반적인 JSP의 1번 라인 : 

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>

 

jQuery의 ajax()를 통해 요청 받는 JSP의 1번 라인 : 

<%@ page language="java"  contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>

 

jQuery의 ajax()를 통해 요청 받는 JSP의 기본 요소

gson-2.8.5.jar 를 사용할 경우 해당 클래스 import 가 필요... (단, 이 외의 다른 변환 라이브러리도 존재!) 

<%@ page import="com.google.gson.Gson" %>

 

JSON 형태의 자료구조를 만들기 위한 Map계열 클래스관련  import 가 필요

<%@ page import="java.util.Map" %>

<%@ page import="java.util.HashMap" %>

 

요청 받은 JSP 에서 해야할 일

1. 요청시 전달되는 응답 데이터 타입 설정

    response.setContentType("application/json");

 

2. 요청시 전달된 전송방식에 대한 설정

   response.setHeader("Content-Disposiont", "inline");

   response.setHeader("Content-Disposiont", "attachment");

 

3. 요청시 전달된 데이터가 있을 경우, request.getParameter() 를 이용하여 데이터 추출

   String num = request.getParameter("num1");

 

4. 요청 내용에 관한 처리 

   4-1. 데이터베이스접속이 필요한 경우에는 전달된 데이터를 VO 객체에 저장하여 DAO에게 전달할 수 있도록 처리

         model2(MVC)에서는 Controller 를 이용 (Spring도 마찬가지...)

   4-2. 데이터베이스접속이 필요없을 경우엔 내부에서 처리  

 

5. 결과 값을 Map 계열 클래스를 이용하여 JSON 과 동일한 구조로 저장

    Map<String, Object> map = new HashMap<String, Object>();

    map.put("result", data);

 

6. Map 계열 객체를 JSON형식(포맷)으로 변환

   Gson g=new Gson();   

   

7. 변환된 JSON 객체를 응답 처리!!!

   out.println(g.toJson(map));

 

 

저작자표시 비영리 변경금지 (새창열림)

'복습 ARCHIVE > java script' 카테고리의 다른 글

[jQuery - Ajax] Gson을 통해 전달되는 값의 형태 확인하기 / 파일첨부  (0) 2021.06.08
[jQuery - Ajax] 형 변환하여 사용, 배열 값 전달  (0) 2021.06.08
[jQuery] .trigger() , .unbind(), .show(), .hide(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .animate(), .stop(), .width(), .height  (0) 2021.06.08
[jQuery] .eq(), .children(), .is(), .not(), .end()  (0) 2021.06.08
[jQuery] .append(), .empty(), .wrap(), insertAfter(), .before(), .colon(), .replaceWith(), .remove() , .css()  (0) 2021.06.08
'복습 ARCHIVE/java script' Related Articles more
Comments