비동기(asynchronous) 처리 , ajax, jquery

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

재밌고 어려운 IT를 이해해보자~!

비동기(asynchronous) 처리 , ajax, jquery 본문

코리아IT핀테크과정

비동기(asynchronous) 처리 , ajax, jquery

언제나즐거운IT 2024. 1. 15. 10:04

비동기 처리란?

Ajax란?

Ajax란 Asynchronous JavaScript and XML의 약자이다.
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나.
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 가능

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있다.

Jquery란?

jQuery는 자바 스크립트의 라이브러리로, html 요소를 간단하고 편리하게 사용하는 기능이 내재되어 있습니다. 학생 시절 발표를 위한 PPT를 만들 때, 움직이는 애니메이션 효과를 사용해서 몰입도를 높였던 경험 있으시죠? 이와 같은 역할을 하는 언어가 바로 ‘jQuery’이다.

자바 스크립트는 동적인 기능 구현을 할 수 있지만 코드가 너무 길어지고 복잡해지는 단점이 있다. 하지만 jQuery를 사용하면 같은 기능도 간략하고 단순한 코드로 구현할 수 있죠. 쉬운 예시로 친구들끼리 대화를 할 때 줄임말을 써서 상대가 쉽게 알아듣게 만드는 것과 같다고 보면된다.

간략한 단어로도 빠르게 뜻을 전달가능!

그래서 jQuery에는 자바 스크립트의 코드를 단순하게 변경하고, html 요소를 간단하게 구현하여 개발자들의 편의를 고려한 기능이 내재되었다.

Json 파일 이란?

JSON (JavaScript Object Notation)

JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식
Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.
JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.

Json 특징

서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다.
자바스크립트 객체 표기법과 아주 유사하다.
자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있는 이점이 있다.
JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다.
자바스크립트의 문법과 굉장히 유사하지만 텍스트 형식일 뿐이다.
다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있다.
특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.

JSON 문법

{
  "employees": [
    {
      "name": "Surim",
      "lastName": "Son"
    },
    {
      "name": "Someone",
      "lastName": "Huh"
    },
    {
      "name": "Someone else",
      "lastName": "Kim"
    } 
  ]
}

JSON 형식은 자바스크립트 객체와 마찬가지로 key / value가 존재할 수 있으며 key값이나 문자열은 항상 쌍따옴표를 이용하여 표기해야한다.
객체, 배열 등의 표기를 사용할 수 있다.
일반 자바스크립트의 객체처럼 원하는 만큼 중첩시켜서 사용할 수도 있다.
JSON형식에서는 null, number, string, array, object, boolean을 사용할 수 있다

JSON 형식

1. name-value형식의 쌍

여러가지 언어들에서 object등으로 실현되었다.
{ String key : String value }

{
  "firstName": "Kwon",
  "lastName": "YoungJae",
  "email": "kyoje11@gmail.com"
}

2. 값들의 순서화된 리스트 형식

여러가지 언어들에서 배열(Array) 등으로 실현되었다.
[value1, value2, ...]

{
  "firstName": "Kwon",
  "lastName": "YoungJae",
  "email": "kyoje11@gmail.com",
  "hobby": ["puzzles","swimming"]
}

JSP, Sevlet 데이터전달

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html> <!-- HTML 시작~ -->
<html>
<head>
<meta charset="UTF-8">
<title>제목적는곳</title>
</head>
<body>
<!-- jquery라는걸 쓰려면 이거 무조건 써줘야 된다고 함  -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
   <br><br>
<!--    <img> 태그의 alt 속성 -> 이미지를 보여줄수 없을경우에 해당 이미지를 대체할 텍스트를 명시한다. 이미지를 볼 수 있을땐 src에담긴 파일을 불러옴 -->
   <img alt="더미 이미지 데이터 01" src="images/test01.jpg"> <br><br>
   <img alt="더미 이미지 데이터 02" src="images/test02.jpg"> <br><br>
   <!-- 진짜 그냥 버튼~ 근데 이거 누르면 아래에 있는 $("#btn").on("click",function(){ 이랑 연결되어서 아래있는거 수행함 -->
   <button id="btn">버튼</button>
   <!-- 스크립트 시작~ -->
<script type="text/javascript">
        
        
/*         이건 화면이 모두 켜지고 나서 함수가 실행되도록 명시하는것. 화면이 다 켜지지 않은상태로 함수가 먼저 동작해버리면 오류가 날 수있다. */
   $(document).ready(function(){
      /* 위에 버튼 클릭하면 실행되는 함수 시작 */
      $("#btn").on("click",function(){
         
         
      /*    ajax 시작! 화면을 새로고침 하지 않아도 데이터가 로드될수 있는 방법이다! */
         $.ajax({
            /* 화면을 새로고침 하지 않고 데이터를 로드하려면 POST방식 (데이터를 전달하는 방식 (지금은 서블릿한테)) 으로 보낸다.    */
            type : "POST",
            /* (서블릿에 가보면 @/apple.do 가 되어있는데 즉 url 을 apple.do로 설정해서 서블릿한테 보내주는거임!) */
            url : "apple.do",
            /* data에 key value값으로 데이터를 담은것인데 banana 가 변수이고 바나나가 변수에 담는 값 
            즉 현재 banana 에는 바나나가 담겨있고 , kiwi 에는 123이 담겨있다.
            System.out.println(kiwi) 를 하면 바나나가 출력되는 느낌. */
            data를 servlet이름이 apple.do인곳으로 보내줄것이다!
            data : { 'banana' : '바나나' , 'kiwi' : 123 },
            /* data에담긴 정보들이 모두 text이기 때문에 텍스트로 지정 아마 대부분 text일듯..?잘모르겠다 */
            dataType : 'text',
            
            /* 다시처음으로 돌아가서 만약에 버튼을 눌러서 데이터를 서블릿에게 보내는것이 성공했다면 ?! success아래 코드 실행 
                  서블릿에게 데이터 전송 실패라면 제일아래에 error진행 */
                  
      
            success : function(data){
         /*       =====================여기까지 읽고 이제 서블릿으로 넘어가보자======================
               왜냐하면 success 라면 서블릿에서 어떤 기능을 수행 한 후에 다시 지금있는 jsp파일로 정보를 전달하기 때문 !
                =========================================================================== */
         /*        짜잔~ success했기 때문에 서블릿으로가서 data에 "사과"가 덮어씌워졌고 
                현재 data는 "사과"이다. */

         /*       얘는 그냥 로그찍는용~ 사과가 출력된다. */
               console.log(data); // 사과 가 출력됨
               
               //만약 데이터가 사과라면 ? 현재 사과가 맞기대문에 True
               if(data=='사과'){
               
      /*          HTML의 body에 해당하는 부분에 어떤걸 붙일건데(append) 뭘붙이냐면 images폴더에test03.jpg를 붙일거다! 만약 없으면 "더미 이미지 데이터"텍스트 출력
               아까 위에서 비슷한거 하나했음 참조하면됩니다. */
                  $("body").append("<img alt='더미 이미지 데이터' src='images/test03.jpg'>");
                  
                  콘솔에 사과출력~
                  console.log(data)
               }
               
               /* 이것도 ID중복체크를 위한 예제 무시 ㄱㄱ */
               // "사과"라면 다시 입력하게하고,
               // "바나나"라면 통과!
            },
            error : function(error){
               console.log('에러발생!');
               console.log('에러의 종류 : '+error);
            }
         });
         
      }
   }
</script>
</body>
</html>

Sevlet.java

package test;

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;

@WebServlet("/apple.do")
public class TestServlet extends HttpServlet {
   private static final long serialVersionUID = 1L;
  
    public TestServlet() {
        super();
    }

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      response.getWriter().append("Served at: ").append(request.getContextPath());
   }
   우리는 포스트 방식으로 보냈기 때문에 doPost 아래를 확인하면 된다.
   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

      콘솔에 JAVA 로그가 찍힌다.
      System.out.println("JAVA 로그");
      
      아까 jsp파일에서 banana와 kiwi를 담은 data를 보내서 success되었기 때문에 
      banana와 kiwi의 값을 확인할 수 있고 
      banana를 출력하면 바나나 가나오고
      kiwi를 출력하면 123이 나온다.
      System.out.println(request.getParameter("banana"));
      System.out.println(request.getParameter("kiwi"));
      
      이거는 한글 깨질까봐 해주는거
      response.setCharacterEncoding("UTF-8");

      ★★★★★★★★★★이게좀 헷갈리는데 ★★★★★★★
      PrintWirter 클래스를 사용해 out 객체를 만들어서 다시 jsp파일쪽으로 응답을 해주는 것이다.
먼저 위의 response는 서버가 클라이언트에게 '응답'한다는 의미를 가진 객체.
서버가 클라이언트에게 '응답'하려면 무조건 response라는 객체를 통해 작업을 해야함.
여기서 getWriter()는 '쓰기'를 통해 응답하겠다는 메서드. 데이터타입은 PrintWriter.
      PrintWriter out=response.getWriter();

따라서 out.print("사과")는 사과라는걸 써서 응답을 해준것이다! 
jsp에 있는 data에 "사과"가 들어간다! (바나나랑 키위는 사라짐 ㅡㅡ)

      out.print("사과"); // != out.println("사과");
      


      이건그냥 ID중복확인할때 예제를든건데 
                          중복이면 data에 사과를 쓰고 
                        아니면 data에 바나나를 써라~ 이런느낌으로 예시를 든것
      우리는 중복이면 data에 false 쓰고
      아니면 data에 true 쓰는게 맞겠죵 

      // ID가 중복이라면? "사과"
      // 중복아니라면? "바나나"

      자이제 다시 jsp파일로 넘어가보자
   }

}

사용한 Json 파일

[  
    {"item": "HTML", "imgfile": "1.jpg", "link": "#"}, 
    {"item": "CSS", "imgfile": "2.jpg", "link": "#"}, 
    {"item": "Javascript", "imgfile": "3.jpg", "link": "#"}, 
    {"item": "jQuery", "imgfile": "4.jpg", "link": "#"}
]

JSP 파일~로 상위 Json파일을 불러와 사용한다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비동기 처리 풀이</title>
</head>
<body>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
	$.ajax({
		type : "GET",
		url : "json/data2.json",
		dataType : "json",
		success : function(data){
			var elem = "";
			
			$.each(data, function(index, data){
				elem += "<a href='"+data.link+"'><img src='";
				elem += "images/test0"+data.imgfile;				
				elem += "' alt='";
				elem += data.item+"' /></a><br>";
			});
			
			$("body").append(elem);
		},
		error : function(){
			console.log("에러발생!");
		}
	});
</script>
	
</body>
</html>

강사님코드 ..

<%@ 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://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
   <br><br>
   <img alt="더미 이미지 데이터 01" src="images/test01.jpg"> <br><br>
   <img alt="더미 이미지 데이터 02" src="images/test02.jpg"> <br><br>
   <button id="btn">버튼</button>
<script type="text/javascript">
   $(document).ready(function(){
      $("#btn").on("click",function(){
      
         $.ajax({
            type : "POST",
            url : "apple.do",
            data : { 'banana' : '바나나' , 'kiwi' : 123 },
            dataType : 'text',
            success : function(data){
               console.log(data); // 사과 가 출력됨
               
               if(data=='사과'){
                  $("body").append("<img alt='더미 이미지 데이터' src='images/test03.jpg'>");
               }
            },
            error : function(error){
               console.log('에러발생!');
               console.log('에러의 종류 : '+error);
            }
         });
         
      });
   });
</script>
</body>
</html>

=======================Servlet===========================
package test;

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;

/**
 * Servlet implementation class TestServlet
 */
@WebServlet("/apple.do")
public class TestServlet extends HttpServlet {
   private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public TestServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

   /**
    * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    */
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      // TODO Auto-generated method stub
      response.getWriter().append("Served at: ").append(request.getContextPath());
   }

   /**
    * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    */
   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      System.out.println("JAVA 로그");
      
      System.out.println(request.getParameter("banana"));
      System.out.println(request.getParameter("kiwi"));
      
      response.setCharacterEncoding("UTF-8");
      PrintWriter out=response.getWriter();
      out.print("사과"); // != out.println("사과");
   }

}

JS "비동기 처리" -> 프론트엔드
: '데이터'를 다룰 수 있는 기능
: 데이터는 DB에 존재 -> M 파트 => C 에 접근 할 수 있는 기능
: C 파트 -> 서버 요청이 가능한 기능
: 프레임워크 -> Node Vue "React" ...

비동기 처리 == 화면 이동 xxx => FC 를 사용 xxxxx
FrontController 를 사용하면 ? 화면 이동 필수
비동기 처리만을 위한 서블릿 클래스 파일을 별도로 생성 O

*참조

https://inpa.tistory.com/entry/%F0%9F%8C%90-js-async

https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

'코리아IT핀테크과정' 카테고리의 다른 글

JSTL, Custom tag (0)	2024.01.17
Jquery practice (0)	2024.01.16
API 조사 [TEAM PROJECT] (2)	2024.01.14
Image Upload [TEAM PROJECT] (0)	2024.01.13
MVC pattern2에서 alert 구현하기 (1)	2024.01.11