AJAX (자바스크립트로 통신 구현)

AJAX

• JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는(통신) 방식
• 데이터 형식은 XML 뿐만 아닌 Text, HTML, JSON, CSV 등 다양한 형식 사용 가능

AJAX 장점

• 전체 페이지를 갱신하지 않고 일부분만 업데이트가 가능
• 사용자에게 즉각적인 반응과 풍부한 UI경험 제공 가능
• ActiveX나 플러그인 프로그램 설치 없이 이용 가능
• Javascript방식, jQuery방식으로 구현 가능 (총 2가지)

AJAX 단점

• Ajax는 JavaScript이므로 브라우저에 따른 크로스 브라우저 처리 필요 (JQuery 방식에서 많이 해결함)
• 오픈 소스로 차별화가 어려움
• 연속적인 데이터 요청 시 서버 부하 증가하여 페이지가 느려짐
• 페이지 내 복잡도가 증가하여 에러 발생 시 디버깅이 어려움

✅ 동기식 데이터 통신 VS 비동기식 데이터 통신

동기식 데이터 통신 : 클라이언트가 서버로 데이터를 요청하면 응답이 올 때까지 다른 작업은 대기
-> 즉 응답이 없을 때 까지는 해당 화면에서 다른 작업을 진행할 수 없다!
-> 일반적으로 프로그램은 동기식임

비동기식 데이터 통신 : 클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고 다른 작업 수행 가능, 추후 응답이 오면 응답에 관련된 작업 진행
-> EX) 싸이월드에서 옆에 방명록 버튼 누르면 전체화면은 그대로지만, 안의 내용들은 변경됨
-> 하나의 페이지안에서 어떤부분만 따로 변경되게하는 기술

✅ javascript로 ajax 통신 구현

• js가 제공하는 XMLHttpRequest 객체를 이용

• (1) : XMLHttpRequest객체를 생성

• (2) : 필요한 속성에 대한 설정
  - 요청할 서버의 주소, 요청방식 등
  - 요청이 끝나고 실행할 함수를 설정 (callback 함수)
  

• (3) : 요청보내기함수 실행 -> send()

여기서 중요한점 !

request.open() 함수로 서블릿으로 요청을 보낸것이 아니라, 요청방식과 요청할 주소 속성을 설정한것이다!

1. send()메소드로 설정한 주소에 설정한 메소드로 요청을 보냄
2. 응답이 오면 onreadystatechange에 설정한 함수가 자동으로 실행됨

• jsp파일

	<input id="data" type="text">
	<button id="jsSendBtn">js로 ajax통신</button>
	<button id="postBtn">js로 post방식 보내기</button>
	<div id="result"></div>

	<script>
		/* post 방식 */
		const postBtn = document.getElementById("postBtn");
		postBtn.addEventListener("click",e=>{
			const request=new XMLHttpRequest();
      
      		// 2. 필수 속성에 대한 설정
      		// open("요청할 방식(method) ","요청할 주소"); 호출
			request.open("post","<%=request.getContextPath()%>/js/ajax.do")
			request.onreadystatechange=()=>{
				if(request.readyState==4){
					if(request.status==200){
						document.getElementById("result").innerHTML=request.responseText;
					}
				}
			}
			// post 방식으로 요청을 보낼때는 헤더설정을 추가로 해줘야한다.
			// content-type 속성값을 설정
			request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			
			// post방식으로 데이터를 전송할때는 send함수의 매개변수로 데이터를 전송을 함.
			const val=document.getElementById("data").value;
			request.send("param="+val+"&data=asdf");
			document.getElementById("result").innerHTML='<div class="spinner-border text-danger"></div>'
		});
	
	
		
		/* get 방식 */
		const sendBtn=document.getElementById("jsSendBtn");
		sendBtn.addEventListener("click",e=>{
			const paramData=document.getElementById("data").value;
			
			// 서버에 요청을 보내기!
			const request=new XMLHttpRequest(); // 1. XMLHttpRequest객체를 생성
			
			//2. 필수속성에 대해 설정하자
			//open("요청할 방식(method)","요청할 주소"); 호출
			request.open("get","<%=request.getContextPath()%>/js/ajax.do?param="+paramData); 
			// 서블릿으로 넘기면서 데이터(paramData)까지 같이 전송
			
			// 요청이 끝나고 응답이 왔을때 실행할 함수를 지정!
			// onreadystatechange 속성에 이벤트 함수를 등록
			// ajax통신에 대한 상태관리를 하게되는데 요청상태가 변경될때마다 실행되는 함수를 등록
			// 변경상태는 readyState속성에 저장 -> 0~4의 값을 가짐
			// *4 : 응답이 완료된 상태
			// 응답코드저장속성은 status임 -> 404(서비스 주소를 찾을수 없을때),500(서버측 에러),200(정상적인 통신 완료)
			
			request.onreadystatechange=()=>{
				console.log(request.readyState); // 응답완료 상태
				console.log(request.status); // 응답코드 
				
				if(request.readyState==4){ // 응답이 완료됬으면
					let msg="";
					switch(request.status){
						case 200 : msg="정상적으로 통신을 완료함"; break;
						case 404 : msg="요청한 서비스가 없습니다."; break;
					}
					
					//서버가 보낸 데이터를 가져오기
					//서버가 응답한 데이터는 문자열로 가져옴
					//responseText 속성을 이용해서 데이터를 가져옴
					console.log(request.responseText);  // responseText 속성 
					
					document.getElementById("result").innerHTML=msg;
					document.getElementById("result").innerHTML+=request.responseText;
				}
			}
			// 요청보내기
			request.send();
		});
	</script>

• 서블릿 파일

package com.ajax.controller;

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("/js/ajax.do")
public class JavascriptAjaxBasicServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

    public JavascriptAjaxBasicServlet() {
        super();
        // TODO Auto-generated constructor stub
    }


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("ajax서비스 실행!");
		
		// ajax로 클라이언트가 보낸 데이터 가져오기
		String param = request.getParameter("param");
		System.out.println(param);
		
		response.setContentType("text/csv;charset=utf-8");
		PrintWriter out=response.getWriter(); // 응답처리
		out.print("데이터 요청처리!"); // jsp 파일에 responseText에 저장됨
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
//		doGet(request, response);
		request.setCharacterEncoding("UTF-8");
		
		System.out.println("post방식요청응답");
		
		String paramData=request.getParameter("param");
		System.out.println(paramData);
		
		new Thread(()->{  // 트래픽을 강제적으로 부여 (딜레이 발생시키기)
			
			try {
				Thread.sleep(4000); // 4초지연
			}catch(InterruptedException e) {
				e.printStackTrace();
			}
		}).run();
		
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.print("<h2>요청에 대한 응답</h2>"); // jsp 파일에 responseText에 저장됨
	}

}