도담도담

ajax (개념) 본문

IT 공부/KH 정보교육원

ajax (개념)

Zinisang 2021. 6. 8. 23:04


ajax 개념: 
서로다른 언어간의 데이터를 주고 받기 위한 연결 역할을 담당하는 긴으으로 만들어진 개념!

jQuery : $.ajax({ });
{ } 내부 : 1.대상 => url: "대상"
  2.방식 => method: "전송방식"
  3.전송데이터 => data: {파라미터:값}
  4.응답 타입 => dataType: "데이터타입"
  
$.ajax({ }) => 응답에 대한 성공여부 확인이 가능
var request = $.ajax({ });

var request = 응답 성공 done()
  응답 실패 fail()
  
request.done(function(data){ });
data 매개변수는 요청한 대상 결과값을 전달 했을 때 해당 결과 값을 전달 받는 매개변수

request.fail(function(jqXHR, textStatus){ });
textStatus 매개변수는 응답 실패에 대한 메시지를 전달받는 매개변수

 


서로다른 언어 간의 데이터를 주고 받는 경우 일반적으로 JSON 형태를 사용..
JSON는 자바스크립트 객체 형태..

JSON형태 데이터의 내부 구조

[
 {
	변수명: 값,
	변수명: 값,
 }
 {
	변수명: 값,
	변수명: 값,
	변수명: 값
 }
];

 


자바 컬렉션 중 JSON 객체 형태의 구조를 가지고 있는 것은 Map계열...
Map<String, Object> map = new HashMap<String, Object>();
map.put("keyName", "Value");
map.put("keyName1", "Value");


자바 Map => JSON 변환 : 구글에서 제공해주는 라이브러리 (gson-2.8.5.jar)


Gson g = new Gson();
g.toJson(map);

 


HTML => jQuery => JSP 요청
HTML <= jQuery <= JSP 응답

HTML: 사용자 입력 및 사용자 행위에 대하여 반응 가능한 UI 작성
jQuery: 사용자 행위가 발생했을 때, 해당 값들을 추출하여 JSP에게 전달후, 응답처리
Jsp: 사용자가 요청한 내용에 대한 처리 및 그 결과를 응답

 


HTML : 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 (HTML 형식일 경우 자바스크립트 파일을 생성 : ~~~.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 memberId = request.getParameter("num1");

4. 요청 내용에 관한 처리 

  • 데이터베이스 접속이 필요한 경우에는 전달된 데이터를 VO 객체에 저장하여 DAO에게 전달할 수 있도록 처리
    model2(MVC)에서는 Controller를 이용(Spring도 마찬가지..)
  • 데이터베이스 접속이 필요없을 경우엔 내부에서 처리


5. 결과값을 Map 계열 클래스를 이용하여 JSON 과 동일한 구조로 저장
Map<String, Object> map = new HashMap<String, Object>();
map.put("result", data);

6. Map 계열 객체를 JSON형식(포맷)으로 변환
Gson gson = new Gson();

7. 변환된 JSON 객체를 응답처리!!
out.println(gson.toJson(map));

'IT 공부 > KH 정보교육원' 카테고리의 다른 글

Spring 라이브러리를 이용한 간단 게시판  (0) 2021.06.10
Query문 정리 #2 (case)  (0) 2021.06.09
jQuery 기본 #5 (Effects)  (0) 2021.06.08
jQuery 기본 #4 (예제 및 결과)  (0) 2021.06.07
jQuery 기본 #3 (예제 및 결과)  (0) 2021.06.07
'IT 공부/KH 정보교육원' Related Articles more
Comments