GET/POST 방식 요청 예제 1)
<html 태그>
<%@ 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 태그>
<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 태그>
<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 |