AJAX (2) javascript 방식

■ JavaScript 방식을 이용한 AJAX 테스트

● jsp 페이지에서 html 코드 생성

<h1>javascript방식을 이용한 AJAX테스트</h1>
	
<h3>1. 버튼 클릭시 get방식으로 서버에 데이터 전송 및 응답받기</h3>
	
<h3>자바스크립트를 이용한 ajax통신</h3>
	
<button onclick="ajaxTest1()">js ajax 테스트 1(get)</button>
	
<h3>2. 버튼 클릭시 post방식으로 서버에 데이터 전송 및 응답받기</h3>
	
<button onclick="ajaxTest2();">js ajax 테스트 2(post)</button>
	
<div id="target"></div>

- js ajax 테스트 1 버튼을 누르면 get방식, js ajax 테스트 2 버튼을 누르면 post방식으로 응답을 받게 해 줄 것이다.

 

html 페이지

 

■ get 방식으로 서버에 데이터 전송 및 응답

● ajaxTest1() script 코드 생성

1. ajax로 서버와 통신하기 위해서 XMLHttpRequest 객체를 생성해준다.

const xhr = new XMLHttpRequest();

 

2. xhr 객채를 설정해 준다.

- 객체 설정 시 open() 함수를 이용해 통신값을 설정한다.

- 통신값 : 전송방식(get/post), 요청을 보내는 주소, 동기식/비동기식(기본값은 비동기식이며 생략이 가능하다.)

xhr.open("get", "<%= request.getContextPath() %>/ajaxTest.do?id=admin")

 

3. 요청에 대한 서버응답을 처리할 함수를 지정해줘야 한다.

- xhr 객체에 onreadystatechange 속성을 함수에 대입시켜 준다.

- xhr 객체의 내부 상태를 관리하는 속성

1) readyState : 전송상태를 관리
2) status : 응답결과 관리

xhr.onreadystatechange = () => {
	if(xhr.readyState == 4){ // 요청완료
		if(xhr.status == 200) { // 응답데이터를 정상적으로 수신
			// 서버가 응답한 내용은 xhr객체의 responseText라는 속성에 자동으로 추가된다.
			console.log(xhr, xhr.responseText);
			document.getElementById("target").innerHTML += "<h3>" + xhr.responseText + "</h3>";
		} else if(xhr.status == 404) {
			alert("찾는 페이지가 존재하지 않습니다.");
		} else{
			alert("에러가 발생했습니다.");
		}
	}
};

 

4. 모든 값 설정 완료 후 서버로 전송 요청을 보낸다.

xhr.send();

 

 

● ajaxTest.do servlet코드 생성

package com.kh.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;

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

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String userId = request.getParameter("id");
		
        request.setCharacterEncoding("UTF-8");
        
		PrintWriter out = response.getWriter();
		out.print("ajax요청에 대한 응답 결과는 : " + userId);
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

● 결과 확인

 

get 방식의 ajax 테스트

- 버튼을 누르면 저렇게 아래에 응답 결과가 출력된다.

 

■ post 방식으로 서버에 데이터 전송 및 응답

● ajaxTest2() script 코드 생성

1. XMLHttpRequest 객체 생성

const xhr = new XMLHttpRequest();

 

2. xhr 객채 설정

xhr.open("post", "<%= request.getContextPath() %>/ajaxTest.do");

 

3. 요청에 대한 서버응답을 처리할 함수를 지정

xhr.onreadystatechange = () => {
	if(xhr.readyState == 4) {
		if(xhr.status == 200) {
			document.getElementById("target").innerHTML += "<h4>" + xhr.responseText + "</h4>";
		}
	}
}

 

4. 파라미터 설정

- post방식으로 데이터를 전송할 시에는 url에 데이터 내용을 작성하지 않고 send함수의 매개변수로 작성하며 전송방식도 수정해줘야 한다.

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("id=admin");

 

● ajaxTest.do servlet코드 생성

package com.kh.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;

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

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String userId = request.getParameter("id");
		
        request.setCharacterEncoding("UTF-8");
        
		PrintWriter out = response.getWriter();
		out.print("ajax요청에 대한 응답 결과는 : " + userId);
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

● 결과 확인

post 방식의 ajax 테스트

- 버튼을 누르면 저렇게 아래에 응답 결과가 출력된다.

 

■ 모든 코드

<h3>1. 버튼 클릭시 get방식으로 서버에 데이터 전송 및 응답받기</h3>
	
<h3>자바스크립트를 이용한 ajax통신</h3>
	
<button onclick="ajaxTest1()">js ajax 테스트 1(get)</button>
	
<h3>2. 버튼 클릭시 post방식으로 서버에 데이터 전송 및 응답받기</h3>
	
<button onclick="ajaxTest2();">js ajax 테스트 2(post)</button>
	
<div id="target"></div>
	
<script>
	const ajaxTest1 = () => {
		// ajax로 서버와 통신하기
		// 1. XMLHttpRequest 객체 생성
		const xhr = new XMLHttpRequest();
			
		// 2. xhr 객체를 설정하기 -> 전송방식(get/post), 요청을 보내는 주소 / [동기식, 비동기식](기본값은 비동기식)
		// 객체 설정시 open()함수를 이용해서 통신값을 설정한다.
		xhr.open("get", "<%= request.getContextPath() %>/ajaxTest.do?id=admin")
			
		// 3. 요청에 대한 서버응답을 처리할 함수를 지정
		// xhr 객체의 onreadystatechange라는 속성에 함수를 대입
		// xhr 객체의 내부 상태를 관리하는 속성
		// 1) readyState : 전송상태를 관리
		// 2) status : 응답결과 관리
		xhr.onreadystatechange = () => {
			if(xhr.readyState == 4){ // 요청완료
				if(xhr.status == 200) { // 응답데이터를 정상적으로 수신
					// 서버가 응답한 내용은 xhr객체의 responseText라는 속성에 자동으로 추가된다.
					console.log(xhr, xhr.responseText);
					document.getElementById("target").innerHTML += "<h3>" + xhr.responseText + "</h3>";
				} else if(xhr.status == 404) {
					alert("찾는 페이지가 존재하지 않습니다.");
				} else{
					alert("에러가 발생했습니다.");
				}
			}
		};
			
		// 모든값 설정 완료 후 서버로 요청을 전송
		xhr.send();
	};
		
	function ajaxTest2() {
		const xhr = new XMLHttpRequest();
			
		xhr.open("post", "<%= request.getContextPath() %>/ajaxTest.do");
			
		xhr.onreadystatechange = () => {
			if(xhr.readyState == 4) {
				if(xhr.status == 200) {
					document.getElementById("target").innerHTML += "<h4>" + xhr.responseText + "</h4>";
				}
			}
		}
			
		// post방식으로 데이터 전송시 파라미터 설정방법
		// url에 데이터 내용을 작성하지 않고 send함수의 매개변수로 작성
		// 전송방식도 수정해줘야 한다.
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send("id=admin");
	}
	</script>