이전 포스팅에서 JSP Ajax 이론에 대해 알아봤다.
이번에는 GET 방식과 POST 방식에 대해 알아보자.
Ajax GET 방식
- ajax_get.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax GET 방식의 요청</title>
</head>
<body>
<h1>Ajax GET 방식의 요청</h1>
<button onclick="sendRequest()">GET 방식으로 요청 보내기!</button>
<p id="text"></p>
</body>
<script>
function sendRequest(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "request_ajax.jsp?city=Seoul&zipcode=45645", true);
xhr.send();
/* readyState 프로퍼티 변경될때마다 실행 됨. */
xhr.onreadystatechange = function(){
/* 응답 완료 및 성공 */
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
/* 응답받은 값을 설정하기 */
document.getElementById("text").innerHTML = xhr.responseText;
}
}
}
</script>
</html>
- request_ajax.jsp
<%
out.print(request.getParameter("city"));
out.print(request.getParameter("zipcode"));
%>
- 실행결과
Ajax GET 방식 요청 후 페이지를 보면 뒤로 가기 버튼이 활성화되지 않은걸 볼 수 있다.
이를 통해 페이지 이동 없이 서버에 요청한 응답을 받아 처리한 걸 알 수 있다.
Ajax POST 방식
- ajax_post.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax POST 방식의 요청</title>
</head>
<body>
<h1>Ajax POST 방식의 요청</h1>
<button onclick="sendRequest()">POST 방식으로 요청 보내기!</button>
<p id="text"></p>
</body>
<script>
function sendRequest(){
var xhr = new XMLHttpRequest();
xhr.open("POST", "request_ajax.jsp", true);
/* POST 방식으로 전달할 데이터의 방식(타입) 설정 */
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("city=Seoul&zipcode=54645");
xhr.onreadystatechange = function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
document.getElementById("text").innerHTML = xhr.responseText;
}
}
}
</script>
</html>
- request_ajax.jsp
<%
out.print(request.getParameter("city"));
out.print(request.getParameter("zipcode"));
%>
- 실행결과
Ajax POST 방식은 GET 방식과 다르게 전달할 데이터의 방식(타입)을 설정해줘야 한다.
setRequestHeader 메서드를 이용하여 설정할 수 있다.
오늘 배운 Ajax는 회원가입 시 아이디가 이미 존재하는지 체크 같은 경우에 자주 사용된다.
페이지를 이동하지 않고 비동기적으로 서버에 요청할 수 있다는걸 꼭 기억해 두자!!
'웹 > JSP' 카테고리의 다른 글
| JSP 세션(Session)이란? (0) | 2023.07.25 |
|---|---|
| JSP 쿠키(Cookie) 생성, 수정, 삭제 방법 (0) | 2023.06.27 |
| JSP Ajax(Asynchronus Javascript and XML)란? (0) | 2023.06.08 |
| JSP GET 방식과 POST 방식 차이 (0) | 2023.06.07 |
| JSP 내장 객체 (0) | 2023.06.06 |