코딩하는 문과생

[Web] 9. MVC 패턴 - AJAX 통신 본문

웹 프로그래밍/Web

[Web] 9. MVC 패턴 - AJAX 통신

코딩하는 문과생 2020. 2. 3. 09:29

[Preview]

[alert를 이용해 서버에서 브라우저로 값을 비동기 통신으로 전송: ajax.jsp생성]

  • Form태그: request와 response를 통한 페이지 리로딩
  • button: 이벤트를 발생시켜 스크립트와 통신하겠다. Or AJAX통신을 하겠다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	AJAX :: <br/>
	<button id="btn">AJAX BTN</button>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			console.log("script ready");
			$("#btn").click(function() {
				alert('event handler~');
				// $.ajax(서버와 통신을 위한 옵션)
				$.ajax({
					url : 'sinc.ajax',
					// / 넣는 경우	('/sinc.ajax'): 	ip:port/sinc.ajax
					// / 없는 경우	('sinc.ajax'): 		ip.port/incWEB/sinc.ajax
					// 				('./sinc.ajax') : 	ip.port/incWEB/sinc.ajax
					
					type : "post",
					//data : {} ,//넘길 데이터가 있는 경우
					datatype : "json", //서버로부터 내려받는 데이터의 타입 
					
					//통신이 정상적으로 작동되었을 때, 
					//서버에서는 성공객체를 obj로 준다.
					
					//스크립트는 request 객체만 존재한다. 이 객체가 요청과 응답 둘 다 담당.
					// 성공하면 해당 함수가 콜백된다.
					success : function(obj) {
						alert(obj);	
					}
					
				});
			}) ;
		}) ;
	</script>
</body>
</html>

[AjaxCtrl생성]

package com.sinc.intern.ajax.ctrl;

import java.io.IOException;
import java.io.PrintWriter;

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

import org.json.JSONObject;

import com.sinc.intern.insa.model.vo.UserVO;


@WebServlet("/sinc.ajax")
public class AjaxCtrl extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
	throws ServletException, IOException {
		System.out.println("AjaxCtrl ~~");
		
		UserVO user = new UserVO("sijune", "sijune", "이시준", 1000, "EMART");
		JSONObject jobj = new JSONObject(user);
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.print(jobj.toString());
		out.close();
	}
}

브라우저에서 버튼 클릭, 서버에서 json형식으로 응답된다.

 

[input태그에 객체값 띄우기 : ajax.jsp 수정]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	AJAX :: <br/>
	<input type="text" name="id" id="id" value="">
	<button id="btn">AJAX BTN</button>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			console.log("script ready");
			$("#btn").click(function() {
				alert('event handler~');
				// $.ajax(서버와 통신을 위한 옵션)
				$.ajax({
					url : 'sinc.ajax',
					// / 넣는 경우	('/sinc.ajax'): 	ip:port/sinc.ajax
					// / 없는 경우	('sinc.ajax'): 		ip.port/incWEB/sinc.ajax
					// 				('./sinc.ajax') : 	ip.port/incWEB/sinc.ajax
					
					type : "post",
					//data : {} ,//넘길 데이터가 있는 경우
					dataType : "json", //서버로부터 내려받는 데이터의 타입 
					
					//통신이 정상적으로 작동되었을 때, 
					//서버에서는 성공객체를 obj로 준다.
					
					//스크립트는 request 객체만 존재한다. 이 객체가 요청과 응답 둘 다 담당.
					// 성공하면 해당 함수가 콜백된다.
					success : function(obj) {
						alert(obj);
						//val(): 인풋에 값을 asign할 때, prop(): 태그에 값과 속성을 부여할 때
						//$('#id').prop("value", obj.id);
						$('#id').val(obj.id);
					}
					
				});
			}) ;
		}) ;
	</script>
</body>
</html>

확인

[AJAX를 이용해 서버로 데이터 전송하기 : ajax.jsp 수정]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	AJAX :: <br/>
	<input type="text" name="id" id="id" value="">
	<button id="btn">AJAX BTN</button>
	<button id="sendbtn">AJAX SEND BTN</button>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			console.log("script ready");
			$("#btn").click(function() {
				alert('event handler~');
				// $.ajax(서버와 통신을 위한 옵션)
				$.ajax({
					url : 'sinc.ajax',
					// / 넣는 경우	('/sinc.ajax'): 	ip:port/sinc.ajax
					// / 없는 경우	('sinc.ajax'): 		ip.port/incWEB/sinc.ajax
					// 				('./sinc.ajax') : 	ip.port/incWEB/sinc.ajax
					
					type : "post",
					//data : {} ,//넘길 데이터가 있는 경우
					dataType : "json", //서버로부터 내려받는 데이터의 타입 
					
					//통신이 정상적으로 작동되었을 때, 
					//서버에서는 성공객체를 obj로 준다.
					
					//스크립트는 request 객체만 존재한다. 이 객체가 요청과 응답 둘 다 담당.
					// 성공하면 해당 함수가 콜백된다.
					success : function(obj) {
						alert(obj);
						//val(): 인풋에 값을 asign할 때, prop(): 태그에 값과 속성을 부여할 때
						//$('#id').prop("value", obj.id);
						$('#id').val(obj.id);
					}
					
				});
			}) ;
			///
			$("#sendbtn").click(function() {
				$.ajax({
					url : 'param_sinc.ajax',
					type : "post",
					data : { id : $("#id").val()},
					dataType : "json", 
					success : function(ary) {
						alert(ary);
					}
					
				});
			});
		}) ;
	</script>
</body>
</html>

[ParamServlet 생성]

package com.sinc.intern.ajax.ctrl;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

import org.json.JSONArray;

import com.sinc.intern.insa.model.vo.UserVO;

@WebServlet("/param_sinc.ajax")
public class ParamServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
	throws ServletException, IOException {
		System.out.println("ParamServlet ~~");
		String id = request.getParameter("id");
		System.out.println("Param id : " + id);
		
		UserVO user = new UserVO("sijune", "sijune", "이시준", 1000, "EMART");
		List<Object> list = new ArrayList<>();
		list.add(user);
		list.add(user);
		list.add(user);
		JSONArray ary = new JSONArray(list);
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.print(ary.toString());
		out.close();
	}

}

[List 데이터 값을 테이블에 출력 : script 수정]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	AJAX :: <br/>
	<input type="text" name="id" id="id" value="">
	<button id="btn">AJAX BTN</button>
	<button id="sendbtn">AJAX SEND BTN</button>
	<p/>
	
	TABLE :: <br/>
	<table>
		<tr>
			<th>ID</th><th>PWD</th>
		</tr>
		<tbody id="tbody">
		
		</tbody>
	</table>
	

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			console.log("script ready");
			$("#btn").click(function() {
				alert('event handler~');
				// $.ajax(서버와 통신을 위한 옵션)
				$.ajax({
					url : 'sinc.ajax',
					// / 넣는 경우	('/sinc.ajax'): 	ip:port/sinc.ajax
					// / 없는 경우	('sinc.ajax'): 		ip.port/incWEB/sinc.ajax
					// 				('./sinc.ajax') : 	ip.port/incWEB/sinc.ajax
					
					type : "post",
					//data : {} ,//넘길 데이터가 있는 경우
					dataType : "json", //서버로부터 내려받는 데이터의 타입 
					
					//통신이 정상적으로 작동되었을 때, 
					//서버에서는 성공객체를 obj로 준다.
					
					//스크립트는 request 객체만 존재한다. 이 객체가 요청과 응답 둘 다 담당.
					// 성공하면 해당 함수가 콜백된다.
					success : function(obj) {
						alert(obj);
						//val(): 인풋에 값을 asign할 때, prop(): 태그에 값과 속성을 부여할 때
						//$('#id').prop("value", obj.id);
						$('#id').val(obj.id);
					}
					
				});
			}) ;
			///
			$("#sendbtn").click(function() {
				alert('event handler2~');
				$.ajax({
					url : 'param_sinc.ajax',
					type : "post",
					data : { id : $("#id").val()},
					dataType : "json", 
					success : function(ary) {
						var txt = "";
						$.each(ary, function(idx, e){
							txt += "<tr>";
							txt += "<td>" + e.id + "</td><td>" + e.pwd + "</td>";
							txt += "</tr>";
						});
						$("#tbody").html(txt);
					}
					
				});
			});
		}) ;
	</script>
</body>
</html>

 

[스크립트로 받아온 데이터를 document에 출력하기]

JSP생성 - JsonCtrl 생성 - Factory 추가 - JsonCtrl 수정

insa폴더 내에 json.jsp파일 생성

package com.sinc.intern.insa.ctrl;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONObject;

import com.sinc.intern.insa.model.vo.UserVO;
import com.sinc.intern.util.Controller;
import com.sinc.intern.view.util.ModelAndView;

public class JsonCtrl implements Controller{
	@Override
	public ModelAndView execute(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
		System.out.println("JsonCtrl execute");
		
		UserVO user = new UserVO("sijune", "sijune", "이시준", 1000, "EMART");
		JSONObject jobj = new JSONObject(user); //json화된 객체를 심기
		
		List<Object> list = new ArrayList<>();
		list.add(user);
		list.add(user);
		list.add(user);
		JSONArray ary = new JSONArray(list);
		
		request.setAttribute("user", jobj);
		request.setAttribute("lists", ary);
		
		return new ModelAndView(true, "insa/json.jsp");
	}
}

 

map.put("/json.inc", new JsonCtrl());

[json.jsp 작성 : el표현식]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			//el표현식을 스크립트에 사용할 수 있다.
			var user = ${user};
			console.log(user);
			var list = ${lists};
			console.log(list)
            
            $('#vo').html(user.id);
			txt="";
			$.each(list, function(idx, e){
				txt+=e.id + "<br/>";
			});
			$("#ary").html(txt);
		});
	</script>

</body>
</html>

콘솔 확인

'웹 프로그래밍 > Web' 카테고리의 다른 글

[Web] 차이냐오 API, 중국 알리바바 I/F 삽질기  (0) 2022.07.07
[Web] 10. MVC 패턴 - AJAX 통신(2)  (0) 2020.02.03
[Web] 8. Json 통신  (0) 2020.01.31
[Web] 7. MVC 패턴(6) - 세션을 이용한 로그아웃 기능  (0) 2020.01.31
[Web] 6. MVC 패턴(5) - 데이터를 심기 위한 session  (0) 2020.01.31
'웹 프로그래밍/Web' Related Articles more