서버06_ajax

charl hi·2021년 12월 14일
0

서버

목록 보기
6/15

ajax

  • 새로고침 없이 처리!!!
  • 전체 페이지가 아니라 원하는 일부분만 갱신(서버와 통신)해줌!!

폴더 및 파일 만들기

경로확인

바로 servlet 파일 만들기

jQeuery 넣기

<%@ 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>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<h1>index page</h1>
	
	<button onclick="ajaxTest();">ajax test</button>
	
	<script>
		$(function(){
			console.log(123);
		})
	</script>
</body>
</html>
  • ✨✨✨127.0.0.1:8888/ajax


jQuery로 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>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<h1>index page</h1>
	
	<button onclick="ajaxTest();">ajax test</button>
	
	<script>
		function ajaxTest(){
			//ajax는 JS, jQuery 둘다 사용가능
			
			/* 클라이언트->서버 요청 보내고 받는 거 
			*/
			//ajax 호출 : $.ajax({});
			$.ajax({
				// /myServlet 에게 요청
				url : "/ajax/myServlet",
				//ajax로 데이터를 담아서 요청 보내기
				data : {
					name : "sim",
					age : 20,
					addr : "korea"
				},
				// 요청이 정상적으로 처리가 됐을 때
				success : function(result){alert("success!!");},
				// 실패했을 때
				error : function(result){alert("error~!~");},
				// success, error 에서의 콜백함수가 수행된 후에 실행
				complete : function(result){alert("complete..!!");}
			});
		}
	</script>
</body>
</html>


ajax에서 보낸 데이터(가 담긴 요청을) 받아서 처리

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 MyServlet
 */
@WebServlet("/myServlet")
public class MyServlet extends HttpServlet {

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("myServlet service called ...");
		
		//ajax로 보내서 전달받은 데이터를 처리할 수 있다.
		//1. 사용자로부터 전달받은 데이터 꺼내기
		String name = req.getParameter("name");
		String age = req.getParameter("age");
		String addr = req.getParameter("addr");
		//2. 꺼낸 데이터 출력하기
		System.out.println("name : "+name);
		System.out.println("age : "+age);
		System.out.println("addr : "+addr);
		//3.응답을 보내줄 수 있음
	}
}


응답을 보내줄 수 있다.

<%@ 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>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<h1>index page</h1>
	
	<button onclick="ajaxTest();">ajax test</button>
	
	<script>
		function ajaxTest(){
			//ajax는 JS, jQuery 둘다 사용가능
			
			/* 클라이언트->서버 요청 보내고 받는 거 
			*/
			//ajax 호출 : $.ajax({});
			$.ajax({
				// /myServlet 에게 요청
				url : "/ajax/myServlet",
				//ajax로 데이터 보내기
				data : {
					name : "sim",
					age : 20,
					addr : "korea"
				},
				// 요청이 정상적으로 처리가 됐을 때
				success : function(result){console.log("success : "+result);},
				// 실패했을 때
				error : function(result){console.log("error : "+result);},
				// success, error 에서의 콜백함수가 수행된 후에 실행, finally
				complete : function(result){console.log("complete : "+result);}
			});
		}
	</script>
</body>
</html>
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 MyServlet
 */
@WebServlet("/myServlet")
public class MyServlet extends HttpServlet {

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("myServlet service called ...");
		
		//ajax에서 전달받은 데이터를 처리할 수 있다.
		//1. 사용자로부터 전달받은 데이터 꺼내기
		String name = req.getParameter("name");
		String age = req.getParameter("age");
		String addr = req.getParameter("addr");
		//2. 꺼낸 데이터 출력하기
		System.out.println("name : "+name);
		System.out.println("age : "+age);
		System.out.println("addr : "+addr);
		
		//응답을 보내줄 수 있음
		resp.setContentType("text/html; charset=UTF-8");
		resp.getWriter().print("data from server");
	}
}

  • ✨success : result객체의 responseText 속성이
  • ✨error, complete : result 객체가 그대로 나오게 된다???

사용자 입력값으로....

<%@ 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>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<h1>index page</h1>
	
	age : <input type="text" id="age">
	<br>
	<span id="isAdult"></span>
	<br>
	<button onclick="ajaxTest();">ajax test</button>
	
	<script>
		function ajaxTest(){
			//ajax는 JS, jQuery 둘다 사용가능
			
			/* 클라이언트->서버 요청 보내고 받는 거 
			*/
			//ajax 호출 : $.ajax({});
			$.ajax({
				// /myServlet 에게 요청
				url : "/ajax/myServlet",
				method : "GET",
				//ajax로 데이터 보내기
				data : {
					name : "sim",
					age : $('#age').val(),
					addr : "korea"
				},
				// 요청이 정상적으로 처리가 됐을 때
				success : function(result){
					console.log("success : "+result);
					$("#isAdult").text(result);
				},
				// 실패했을 때
				error : function(result){
					console.log(result);
				},
				// success, error 에서의 콜백함수가 수행된 후에 실행, finally
				complete : function(result){
					console.log(result);
				}
			});
		}
	</script>
</body>
</html>
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 MyServlet
 */
@WebServlet("/myServlet")
public class MyServlet extends HttpServlet {

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("myServlet service called ...");
		
		//ajax에서 전달받은 데이터를 처리할 수 있다.
		//1. 사용자로부터 전달받은 데이터 꺼내기
		String name = req.getParameter("name");
		String age = req.getParameter("age");
		String addr = req.getParameter("addr");
		//2. 꺼낸 데이터 출력하기
		System.out.println("name : "+name);
		System.out.println("age : "+age);
		System.out.println("addr : "+addr);
		
		//응답을 보내줄 수 있음
		resp.setContentType("text/html; charset=UTF-8");
//		resp.getWriter().print("data from server");
		
		if(Integer.parseInt(age) >= 20) {
			resp.getWriter().print("adult");
		} else {
			resp.getWriter().print("KID");
			
		}
	}
}

profile
charl hi
.
이전 포스트

서버05_메소드생성, 예외처리

다음 포스트

서버07_ MVC 1

0개의 댓글