[AJAX] GET/POST 방식 요청

GET/POST 방식 요청 예제 1)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
#display {
	width: 50%;
	padding: 5px;
	margin: 10px;
	font-size: 30px;
	border: 1px solid red;
}
</style>
</head>
<body>
	<h1>AJAX = 값 전달</h1>
	<hr>
	<div id="display">요청 웹프로그램에 대한 응답 결과 출력</div>
	<div>
		이름 : <input type="text" id="name">
		<button type="button" id="getBtn">GET 방식의 요청</button>
		<button type="button" id="postBtn">POST 방식의 요청</button>
	</div>
</body>
</html>

GET 방식 요청

<script>
//[GET 방식의 요청] 태그를 클릭한 경우 호출되는 이벤트 처리 함수
document.getElementById("getBtn").onclick=function() {
	//입력태그의 입력값을 제공받아 저장
	var name=document.getElementById("name").value;
		
	//입력값 검증
	if(name=="") {
		document.getElementById("display").innerHTML="이름을 입력해 주세요.";
		return 
	}
		
	//입력태그 초기화
	document.getElementById("name").value="";
		
	//XMLHttpRequest 객체를 생성하여 저장 - 지역변수
	var xhr=new XMLHttpRequest();
		
	//XMLHttpRequest 객체의 준비상태가 변경될 때마다 호출될 이벤트 처리 함수 등록
	xhr.onreadystatechange=function() {
		if(xhr.readyState==4) {//XMLHttpRequest 객체에 응답결과가 전달된 경우
			if(xhr.status==200) {//XMLHttpRequest 객체의 응답결과에 대한 상태코드가 [200]인 경우 
				//XMLHttpRequest 객체의 응답결과(HTML)를 이용하여 페이지의 태그 변경
				document.getElementById("display").innerHTML=xhr.responseText;
			} else {
				alert("에러코드 = "+xhr.status);
			}
		}
	}
		
	//XMLHttpRequest 객체를 이용하여 웹프로그램을 GET 방식으로 요청
	name=encodeURIComponent(name);
	xhr.open("get", "data_two.jsp?name="+name, true);
	xhr.send(null);
}
</script>

[data_two.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//전달값을 반환받아 저장
	String name=request.getParameter("name");
%>
<%-- XMLHttpRequest 객체의 응답결과(HTML) --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
	<%=name %>님, 안녕하세요.
</body>
</html>

알게된점

XMLHttpRequest 객체를 이용하여 웹프로그램을 GET 방식으로 요청하는 경우, 질의문자열(QueryString)을 사용하여 값을 전달한다.

xhr.open("get", "data_two.jsp?name="+name, true);
xhr.send(null);

하지만 질의문자열로 전달되는 값에 URL 주소로 표현 불가능한 문자가 존재할 경우 400 에러코드가 발생될 수 있다는 문제점이 생긴다. (브라우저의 특성에 따라 다르다)

→ 해결법: 전달값을 부호 처리화해 전달하여 질의문자열로 전달

name=encodeURIComponent(name);//부호처리화 
xhr.open("get", "data_two.jsp?name="+name, true);
xhr.send(null);

전달값이 여러개인 경우 하나씩 모두 부호화 처리해주어야 한다는 번거로움이 있을 수 있다.

POST 방식의 요청

주의사항

리퀘스트 헤더 정보를 바꾸어 리퀘스트 메세지 몸체부의 내용을 [application/x-www-form-urlencoded]로 바꾸기
캐릭터셋을 변경해주기

<script>
//[POST 방식의 요청] 태그를 클릭한 경우 호출되는 이벤트 처리 함수
document.getElementById("postBtn").onclick=function() {
	//입력태그의 입력값을 제공받아 저장
	var name=document.getElementById("name").value;
		
	//입력값 검증
	if(name=="") {
		document.getElementById("display").innerHTML="이름을 입력해 주세요.";
		return 
	}
		
	//입력태그 초기화
	document.getElementById("name").value="";
		
	//XMLHttpRequest 객체를 생성하여 저장 - 지역변수
	var xhr=new XMLHttpRequest();
		
	//XMLHttpRequest 객체의 준비상태가 변경될 때마다 호출될 이벤트 처리 함수 등록
	xhr.onreadystatechange=function() {
		if(xhr.readyState==4) {//XMLHttpRequest 객체에 응답결과가 전달된 경우
			if(xhr.status==200) {//XMLHttpRequest 객체의 응답결과에 대한 상태코드가 [200]인 경우 
				//XMLHttpRequest 객체의 응답결과(HTML)를 이용하여 페이지의 태그 변경
				document.getElementById("display").innerHTML=xhr.responseText;
			} else {
				alert("에러코드 = "+xhr.status);
			}
		}
	}
		
	//XMLHttpRequest 객체를 이용하여 웹프로그램을 POST 방식으로 요청
	// => send() 메소드의 매개변수를 이용하여 요청웹프로그램에 값 전달
	//문제점) send() 메소드를 이용하여 값을 전달할 경우 [multipart/form-data] 형식으로 값이 전달된다.
	// => [multipart/form-data] 형식으로 값이 전달되면 요청 웹프로그램에서 request.getParameter() 메소드로 전달값 반환이 불가능하다.
	//해결법) [application/x-www-form-urlencoded] 형식으로 값이 전달되도록 리퀘스트 메세지의 헤더 정보를 변경
	xhr.open("post","data_two.jsp", true)
	//xhr.open("post","data_two.jsp");//async 매개변수에 true 생략 가능 - 매개변수에 전달값이 생략된 경우 자동으로 [true]로 처리된다.
		
	//XMLHttpRequest.setRequestHeader(header, value) : XMLHttpRequest 객체를 이용하여
	//웹프로그램 요청시 사용되는 리퀘스트 메세지의 헤더 정보를 변경하는 메소드
	// => 리퀘스트 메세지 몸체부에 저장된 값이 문자데이터로 표현되도록 설정
	// => open() 메소드 호출 후 사용 가능
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.send("name="+name);//리퀘스트 메세지 몸체부에 값을 저장하여 전달		
}
</script>

알게된점

send() 메소드를 이용하여 값을 전달할 경우 [multipart/form-data] 형식으로 값이 전달되는데, [multipart/form-data] 형식으로 값이 전달되면 요청 웹프로그램에서 request.getParameter() 메소드로 전달값 반환이 불가능하다는 문제점이 발생한다.

xhr.open("post","data_two.jsp", true)	
xhr.send("name="+name);

→ 해결법 : [application/x-www-form-urlencoded] 형식으로 값이 전달되도록 리퀘스트 메세지의 헤더 정보를 변경

XMLHttpRequest.setRequestHeader(header, value) : XMLHttpRequest 객체를 이용하여 웹프로그램 요청시 사용되는 리퀘스트 메세지의 헤더 정보를 변경하는 메소드
→ 리퀘스트 메세지 몸체부에 저장된 값이 문자데이터로 표현되도록 설정
→ open() 메소드 호출 후 사용 가능

xhr.open("post","data_two.jsp")//async 매개변수에 true 생략 가능 - 매개변수에 전달값이 생략된 경우 자동으로 [true]로 처리된다.
		
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name="+name);//리퀘스트 메세지 몸체부에 값을 저장하여 전달

[data_two.jsp]

POST 방식으로 전달된 값에 대한 캐릭터셋을 변경해주어야 한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//POST 방식으로 전달된 값에 대한 캐릭터셋 변경
	request.setCharacterEncoding("utf-8");
	
	//전달값을 반환받아 저장
	String name=request.getParameter("name");
%>
<%-- XMLHttpRequest 객체의 응답결과(HTML) --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
	<%=name %>님, 안녕하세요.
</body>
</html>

GET/POST 방식 요청 예제 2)

[example_one.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
#display {
	width: 50%;
	padding: 5px;
	margin: 10px;
	font-size: 30px;
	border: 1px solid red;
}
</style>
</head>
<body>
	<h1>AJAX - 값 전달</h1>
	<hr>
	<div id="display">요청 웹프로그램에 대한 응답 결과 출력</div>
	<table>
		<tr>
			<td>아이디</td>
			<td><input type="text" id="id"></td>
		</tr>
		<tr>
			<td>이름</td>
			<td><input type="text" id="name"></td>
		</tr>
		<tr>
			<td colspan="2">
				<button type="button" id="btn">입력완료</button>
			</td>	
		</tr>
	</table>
	
	<script type="text/javascript">
	//[입력완료] 태그를 클릭한 경우 AJAX 기능을 사용하여 [example_two.jsp] 문서를 요청하여
	//응답결과를 제공받아 태그 변경
	// => [example_two.jsp] 문서를 요청할 때 사용자로부터 입력받은 아이디와 이름 전달
	document.getElementById("btn").onclick=function() {
		var id=document.getElementById("id").value;
		if(id=="") {
			document.getElementById("display").innerHTML="아이디를 입력해 주세요.";
			return;
		}
		
		var name=document.getElementById("name").value;
		if(name=="") {
			document.getElementById("display").innerHTML="이름을 입력해 주세요.";
			return;
		}
		
		document.getElementById("id").value="";
		document.getElementById("name").value="";
		
		var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function() {
			if(xhr.readyState==4) {
				if(xhr.status==200) {
					document.getElementById("display").innerHTML=xhr.responseText;
				} else {
					alert("에러코드 = "+xhr.status);
				}
			}
		}
		
		//GET 방식
		/*
		id=encodeURIComponent(id);
		name=encodeURIComponent(name);
		xhr.open("get", "example_two.jsp?id="+id+"&name="+name);
		xhr.send(null);
		*/
		
		//POST 방식
		xhr.open("post", "example_two.jsp");
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xhr.send("id="+id+"&name="+name);
	}
	</script>
</body>
</html>

[example_two.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//POST 방식으로 요청할 경우 캐릭터셋 변경
	request.setCharacterEncoding("utf-8");

	String id=request.getParameter("id");
	String name=request.getParameter("name");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
	<%=name %>[<%=id %>]님, 환영합니다.
</body>
</html>

저작자표시 비영리 변경금지

'학원 > 복기' 카테고리의 다른 글

[AJAX] CSV / XML / JSON (0)	2023.07.04
[AJAX] 브라우저 캐싱(Browser Caching) (0)	2023.07.04
[AJAX] AJAX란? / 예제 (0)	2023.07.03
[JSP] DB 연동 예제 (0)	2023.06.26
[JSP] 자바빈(JavaBean) / useBean 태그 (0)	2023.06.26

개뿌

[AJAX] GET/POST 방식 요청

GET/POST 방식 요청 예제 1)

GET/POST 방식 요청 예제 2)

'학원 > 복기' 카테고리의 다른 글

티스토리툴바

[AJAX] GET/POST 방식 요청

GET/POST 방식 요청 예제 1)

GET/POST 방식 요청 예제 2)

'학원 > 복기' 카테고리의 다른 글

'학원/복기' Related Articles

티스토리툴바