[Ajax] GET 방식, POST 방식으로 데이터 보내기

2022.03.16(57일 차_수요일)

★이번에는 Get방식, Post방식으로 데이터를 보내는 방법에 대해 정리하고자 한다.

Get 방식으로 데이터 보내기
- 버튼 클릭 시 Text가 출력된다.

버튼을 클릭하면 Hello Ajax!!! 텍스트가 나오는 예제이다.

helloAjax.jsp - (요청 전송 페이지)

JS를 통한 ajax 구현

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	var XMLHttpRequest; 
	
	function ajaxRequest() {//비동기방식으로 서버와 연결해주는 객체
		
		//IE
		//XMLHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
		
		//크롬
		XMLHttpRequest = new XMLHttpRequest();  //객체 생성
		
		XMLHttpRequest.open("GET","helloAjax_ok.jsp",true);//요청을 초기화하면서 요청 방식, 주소, 동기화 여부 지정
		XMLHttpRequest.onreadystatechange = viewMessage; //콜백함수 이름을 viewMessage로 할 것이다.
		XMLHttpRequest.send(null); //요청을 보낸다 - get방식으로 보내니까 null
		
	}
	
	//돌아올때 콜백함수(viewMessage) 자동실행 - 서버에서 응답이 왔을 때 실행되는 메서드
	function viewMessage() {
		
		//helloAjax_ok.jsp를 갔다가 넘어오는 response는 Text이다.
		var responseText = XMLHttpRequest.responseText;
		 
		var divE = document.getElementById("printDIV");
		 
		divE.innerHTML = responseText;
		
	}

</script>

</head>
<body>

<h1>Hello Ajax</h1>

<input type="button" value="클릭" onclick="ajaxRequest();">

<br/><br/>
<div id="printDIV" style="border: 1px solid red; width: 50%"></div>

</body>
</html>

helloAjax_ok.jsp - (응답 페이지)

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//서버에서 연산 작업이 이루어지는지 확인하고자 콘솔창에 출력함
	for(int i=0; i<300; i++) {
		System.out.print("delay....");
	}
	
%>
Hello Ajax!!!

Get방식, Post 방식으로 데이터 보내기 (비교)

이번에는 Get방식, Post방식으로 데이터를 보내는 방법에 대해 정리하고자 한다. Get전송 버튼을 누르면 Get방식으로

데이터가 전송되고, Post전송 버튼을 누르면 Post방식으로 데이터가 전송된다.

ajaxGetPost.jsp - (요청 전송 페이지)

ajaxGetPost.jsp를 나눠서 설명하고자 한다.

(1) - XMLHttpRequest 객체 생성하기

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	var XMLHttpRequest; //객체를 전역변수로 만듬
	
	function getXMLHttpRequest() {
		//XMLHttpRequest 객체 생성하기
		//브라우저마다 객체 생성이 다르기 때문에 try-catch문으로 작성
		if(window.ActiveXObject) {//IE
			
			try {//IE5.0이후
				XMLHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {//IE5.0이전
				XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
			
		}else {// NON-IE (크롬)
			XMLHttpRequest = new XMLHttpRequest();
		
		}
		
	}

먼저 getXMLHttpRequst() 함수를 만들어준다.

브라우저마다 XMLHttpRequest 객체 생성이 다르기 때문에 if - try - catch - else로 만들어주었다.

window.onload = function () {
		//body가 로딩될 때(창이 열릴때) getXMLHttpRequest() 호출
		getXMLHttpRequest(); 
	}

getXMLHttpRequest() 함수는 웹페이지가 열릴 때 바로 실행되도록 <script> ~ </script> 마지막 쪽에

위의 소스를 작성해주었다.

(2) - Get방식으로 데이터 전송

//Get전송 버튼 클릭 시 실행되는 메서드
	function ajaxRequestGet() {
		
		var data = document.myForm.greeting.value;// Form의 데이터 가져오기
		
		if(data==""){
			alert("데이터 입력해라!");
			document.myForm.greeting.focus();
			return;
		}
		
		//Get방식
		XMLHttpRequest.open("GET","ajaxGetPost_ok.jsp?greeting=" + data, true);
		XMLHttpRequest.onreadystatechange = viewMessage; //viewMessage를 콜백함수로 할 것이다.
		XMLHttpRequest.send(null); //get방식일때는 null
	}

ajaxRequestGet() 함수는 "Get전송"버튼을 클릭하면 실행되는 함수이다.

변수(var) data에 greeting의 value값(form의 데이터)을 넣어주었다.

if문을 사용해서 data값이 null일 경우 "데이터 입력해라!" 창을 띄워주고 return 한다.

data의 값이 있을 경우 if문을 통과하고 하단 소스를 실행한다.

XMLHttpRequest.open에 Get방식으로 넘기고, 주소(url)? 뒤에 greeting = 을 써서 넘어갈 값(data)을 넣어주었다.

마지막에 true를 써서 비동기 방식으로 설정하였다.

onreadystatechange에는 콜백 함수(viewMessage)를 지정하였고,

send는 get방식으로 데이터를 보내니 null로 해주었다.

갔다가 돌아오면 콜백 함수 viewMessage() 함수를 실행한다.

(3) - Post방식으로 데이터 전송

//Post전송 버튼 클릭 시 실행되는 메서드
	function ajaxRequestPost() {
		
		var data = document.myForm.greeting.value;
		
		if(data==""){
			alert("데이터 입력해라!");
			document.myForm.greeting.focus();
			return;
		}
		
		//Post방식
		XMLHttpRequest.open("POST","ajaxGetPost_ok.jsp",true);
		//post방식은 여기에 이 코딩을 써줘야 한다.
		XMLHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		XMLHttpRequest.onreadystatechange = viewMessage;
		XMLHttpRequest.send("greeting=" + data); //get방식은 null이였는데 post방식은 여기에 쓴다.		
	}

ajaxRequestPost() 함수는 "Post전송" 버튼을 클릭하면 실행되는 함수이다.

변수(var) data에 greeting의 value값(form의 데이터)을 넣어주었다.

if문은 위의 get방식이랑 동일하고, 이번엔 Post방식으로 데이터를 넘기기 때문에

XMLHttpRequest.open에 Post를 쓰고, 경로(url)에 데이터를 넘기지 않아서 'ajaxGetPost_ok.jsp'만 써줬다.

true를 써서 비동기 방식으로 설정하였다.

Get방식과 다르게 Post방식으로 데이터를 넘기기 때문에 추가로 XMLHttpRequest.setHeader를 작성하였다.

onreadystatechange에는 콜백 함수(viewMessage)를 지정하였고,

send에서 데이터를 넘겨주기 위해 "greeting" = data를 입력하였다.

갔다가 돌아오면 콜백 함수 viewMessage() 함수를 실행한다.

(4) - Post방식으로 데이터 전송

//돌아올때 콜백함수 자동실행 - 서버에서 응답이 왔을 때 실행되는 메서드
	function viewMessage() {
		
		var divE = document.getElementById("printDIV");
		//1.요청페이지 정보설정, 2.서버에 요청을 보내기 시작, 3.서버에서 요청처리
		if(XMLHttpRequest.readyState==1||
				XMLHttpRequest.readyState==2||
				XMLHttpRequest.readyState==3) {
			
			divE.innerHTML =
				"<img src='./image/processing.gif' width='50' height='50'/>";//이미지태그 출력
				
		}else if(XMLHttpRequest.readyState==4) { // 서버의 처리완료 시 4가 반환
			
			divE.innerHTML = XMLHttpRequest.responseText;//response로 넘어오는 text할당
		}
		
	}
	
	window.onload = function () {
		//body가 로딩될 때(창이 열릴때) getXMLHttpRequest() 호출
		getXMLHttpRequest(); 
	}

viewMessage() 함수는 콜백 함수이다.

콜백 함수는 서버에서 응답이 왔을 때 실행되는 함수인데 _ok.jsp를 갔다 다시 jsp페이지로 올 때 자동 실행되는 함수이다.

먼저 출력할 printDIV의 element를 가져오고, 4가 왔을 때 서버 처리가 완료되는데 처리완료 전에

<img> 태그를 써서 의미 지를 띄우도록 하였다. 그리고 XMLHttpRequest.readyState==4가 됐을 때,

response로 넘어오는 text를 innerHtml에 넣어준다.

마지막에 있는 window.onload는 (1) 번에 있는 getXMLHttpRequest() 함수를 웹 페이지를 로딩하자마자 먼저 실행

하게 해 준다. 자세한 것은 (1) 번 참조

여기까지가 ajaxGetPost.jsp 페이지 소스 코드이다.

ajaxGetPost_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//프로토콜의 버전 확인
	//String protocol = request.getProtocol();
	//System.out.print(protocol);
	
	//클라이언트의 ajax캐쉬를 삭제하는 명령어
	if(request.getProtocol().equals("HTTP/1.1")) {
		response.setHeader("Cache-Control", "no-cache");
	}
	
%>

<%

	//넘어오는 데이터
	String greeting = request.getParameter("greeting");
	
	for(int i=0;i<20000;i++) {
		System.out.print("처리중...");
	}
%>

<%="Server:" + greeting %>

ajaxGetPost.jsp페이지에서 사용자가 입력한 greeting을 받아온다.

for문을 사용하여 실행되기 전까지 로딩 이미지를 띄우면서 딜레이를 시켰다.

"server:" 문자와 함께 greeting 데이터를 다시 ajaxGetPost.jsp로 보낸다.

https://github.com/chaehyuenwoo/jQuery-Ajax/tree/main/ajax2

GitHub - chaehyuenwoo/jQuery-Ajax: jQuery와 Ajax관련 소스

jQuery와 Ajax관련 소스. Contribute to chaehyuenwoo/jQuery-Ajax development by creating an account on GitHub.

github.com

자세한 소스코드는 위의 Github 참고하기~

다음 글에서는 ajax를 활용해서 id 유효성 검사 및 반복해서 사용하는 함수를 따로 만들어서 호출해서 사용하기 위해

javascript 함수를 만드는 방법에 대해 정리할 것이다.

저작자표시 비영리

'Front-End > jQuery(ajax)' 카테고리의 다른 글

[Javascript] JSON을 활용해서 javascript 객체 생성하기 (2)	2022.03.18
[Javascript] DOM(Document Object Model) , XML 데이터 가져오기 (0)	2022.03.17
[Ajax] 유효한 ID체크 , 자주 사용하는 Javascript 함수 만들기 (0)	2022.03.17
[JQuery] 세팅 및 jQuery & Ajax를 이용한 텍스트 데이터 전송 (2)	2022.03.15
[Ajax] 란? - 동기/비동기, XMLHttpRequest (0)	2022.03.15

블로그의 정보

무작정 개발

[Ajax] GET 방식, POST 방식으로 데이터 보내기

'Front-End > jQuery(ajax)' 카테고리의 다른 글

블로그의 정보

활동하기

티스토리툴바

'Front-End > jQuery(ajax)' 카테고리의 다른 글

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바