jQuery - Ajax (Asyncronous javascript and XML) 연동

songmin jeon·2024년 1월 29일

클라우드기반 인공지능서비스 엔지니어링과정

목록 보기

92/138

1. Ajax가 필요한 이유

동기 통신 방식 : 주소가 바뀌는 것이 동기 통신
비동기 통신 방식 : 주소가 바뀌지 않고 새로고침이 되지 않으면서 변화되는 것.

1.1. Ajax가 쓰이는 경우

또 다른 경우는 패치( *fetch() )가 있음(시간이 남는 경우 실습할 예정..)

1.2. 동기식, 비동기식(Ajax) 흐름비교

동기식 통신 : 통신을 하는 동안에 클라이언트가 요청을 아무것도 할 수 없음.

비동기식 통신 : 통신을 하는 동안 클라이언트가 또 다른 요청을 할 수 있음.

시작을 기다리다가 시작 신호가 주어지면 시작한다.

1.3. Ajax 데이터 전송방식 3가지

1) csv : 컴마, 로 구분되어 있는 데이터 (용량은 적은데 가독성이 떨어짐.)
2) XML : 사용자 설정 태그의 데이터, 테그를 사용해 가독성이 좋지만 데이터의 기본 부피가 크다.
3) JSON : 속성-값 쌍으로 이루어진 데이터를 전달하기 위한 개방형 표준 포멧

2. 실습해보기

비쥬얼 스튜디오 와 이클립스 IDE 혼합사용
혼합 사용시 url이 다름, 이 차이를 이용해봄

비쥬얼 스튜디오

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button>데이터 요청하기</button>

    <script>
        // ajax(Asyncronous javascript and XML)
        // : 비동기 통신 
        // : 화면 새로고침 없이, 클라이언트가 서버로 부터 응답을 받아 올 수 있는 통신 방식.
        //   응답이 되돌아 올때까지, 다른 작업을 진행하면서 응답도 받아 올 수 있다.

        // ajax 문법
        // : jQuery 라이브러리에서 제공해주고 있는 기능
        // *fetch() 라는 라이브러리 없이 사용할 수 있는 함수도 있다!
        $('button').on('click', function(){


            var sendObj = { data : "hello" };

            $.ajax({
                // 1. 어떤 url로 데이터를 전송할지 (요청 url)
                url : "http://localhost:8081/AjaxTest/Ajax" ,
                
                // 2. 어떤 데이터를 보내줄껀지 (선택사항)
                // ** 데이터를 보내줄 때는 항상 key, value 한쌍으로 묶어서 보내줘야 한다.
                // key와 value 한쌍으로 묶어서 표현할 수 있는 자료형 => 객체 !!!
                data : sendObj , 

                // 4. 응답받아 온 데이터의 형식을 지정
                dataType : 'json' ,

                // 3. 성공했을때 실행할 함수
                success : function(res){
                    // 데이터 통신이 성공한다면 자동으로 해당 함수를 실행
                    console.log('요청성공!');
                    console.log('응답 받은 데이터 : ', res)
                    console.log(res['name'])
                    console.log(res.name)
                } ,
                
                // 5. 실패했을때 실행 할 함수 -> 콜백함수
                error : function(e){
                    // e -> error에 대한 정보가 담겨있는 객체
                    console.log('요청실패', e);
                }


            })
        })

    </script>
</body>

이클립스

package Ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.function.Predicate;

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("/Ajax")
public class Ex01Ajax extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// CORS(동일 출러 정책) : 웹페이지 사이에서 데이터를 주고 받을때 지켜야할 정책
		// 5500 포트 -> 8081 포트 데이터 요청 / 허용 안함

		System.out.println("요청이 들어오고 있음!");

		response.addHeader("Access-Control-Allow-Origin", "*");

		// 요청받은 데이터 꺼내오기
		String data = request.getParameter("data");
		System.out.println("요청 받은 데이터 " + data);

		// ajax 통신에서 응답을 되돌려주기!
		// -> 화면에 되돌려줄 데이터 출력해주기
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();

		// JSON 형식으로 데이터 돌려주기
		out.print("{\"name\":\"임경남\"}");
	}
}