▶ 사용자에게 보여 줄 jsp 페이지 구현
<body>
<form action = "${pageContext.request.contextPath}/ajaxtest/gettest" name ="f" method = "get">
name :
</input type = "text" name = "name">
</input type = "button" value = "ajax get 방식 요청" onclick = "a()">
<input type = "button" value = "ajax post 방식 요청" onclick = "b()">
< input type = "submit" value = "이건 동기 요청" >
동기요청 버튼을 누르면 form 의 action 주소의 get 방식으로 이동하여 페이지 변환의 작업을 수행 하게 된다.
페이지의 이동이 있는 것이 동기 요청이고 나머지 방법은 비동기식으로 페이지의 이동 없이 바로 전환 되게 된다.
● GET 방식 비동기 요청 함수 구현
function a () {
1. 비동기 요청 객체를 생성한다.
const xhttp = new XMLHttpRequest();
5. 비동기 요청 응답이 왔을 때 실행 될 핸들러 함수를 등록한다.
xhttp.onload = function(){
6. 비동기 요청을 받으면 해당 응답을 프린트 해줄 공간을 getElementById 찾아서 let 변수 res에 담아 준다.
let res = document.getElementById("res");
7. innerHTML에 서버로 부터 텍스트 형태로 받은 응답 값을 넣어 view 페이지에 보이게 해준다.
res.innerHTML = xhttp.responseText; }
responseText = 서버로부터 텍스트 형태로 받은 응답 값
만약에 xml로 받으면 responseXML 이 될 것이고 JSON을 통해 받는다면 서버 페이지에서 해당 JSON 을 text 화하여 값을 가지고 있을 것이기 때문에 JSON도 responseText를 쓴다.
2. 전송할 파라미터는 url 뒤에 ? 하고 이름을 같이 보낼 거고 name 값을 보낼 것이다.
let param = "?name=" + f.name.value;
3. 전송 방식과 경로를 설정해주고
xhttp.open("GET", "${pageContext.request.contextPath}/ajaxtest/gettest" + param);
4. 비동기 요청을 전송한다.
xhttp.send();
}
● POST 방식 비동기 요청 함수 구현
function b() {
1. 비동기 요청 객체를 생성한다.
const xhttp = new XMLHttpRequest();
6. 서버로 부터 응답이 오면 실행 될 핸들러
xhttp.onload = function(){
7. 비동기 요청을 받으면 해당 응답을 프린트 해줄 공간을 getElementById 찾아서 let 변수 res에 담아 준다.
let res = document.getElementById("res");
8. innerHTML에 서버로 부터 텍스트 형태로 받은 응답 값을 넣어 view 페이지에 보이게 해준다.
res.innerHTML = xhttp.responseText; }
2. 파라미터 값을 지정해준다. 근데 왜 get 과 다르게 ?name= 이라고 해주지 않았을까? 그 이유는 4번. header에 url 을 넣어 (urlencoded) 주소 값이 나타나기 때문이다.
let param = "name=" + f.name.value;
3.전송 방식과 경로를 설정하기
xhttp.open("post", "${pageContext.request.contextPath}/ajaxtest/gettest");
4. header 지정하기 setRequestHeader(header, value) : 요청에 HTTP 헤더를 덧붙임
Post방식은 데이터를 다른사람이 못보게끔 막아놓아서 응답데이터를 보려면 Content-type에 urlencoded가 필요하다.
xhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
5. 2번 param을 인자값으로 넣어 서버에 비동기 요청. 보통 post 로 보낼 때에는 send에 form Parameter를 가져가지만 없다면 사용하지 않아도 된다.
xhttp.send(param); }
▶ jsp 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function a () {
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
let res = document.getElementById("res");
res.innerHTML = xhttp.responseText;
}
let param = "?name=" + f.name.value;
xhttp.open("GET", "${pageContext.request.contextPath}/ajaxtest/gettest" + param);
xhttp.send();
}
function b() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
let res = document.getElementById("res");
res.innerHTML = xhttp.responseText;
}
let param = "name=" + f.name.value;
xhttp.open("post", "${pageContext.request.contextPath}/ajaxtest/gettest");
xhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhttp.send(param);
}
</script>
</head>
<body>
<form action = "${pageContext.request.contextPath}/ajaxtest/gettest" name ="f" method = "get">
name : <input type = "text" name = "name"> <br/>
<input type = "button" value = "ajax get 방식 요청" onclick = "a()">
<input type = "button" value = "ajax post 방식 요청" onclick = "b()">
<input type = "submit" value = "이건 동기요청" >
</form>
<div id = "res"></div>
</body>
</html>
▶ servlet 에 get / post 방식 구현
package ajaxtest;
import java.io.IOException;
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 gettest
*/
@WebServlet("/ajaxtest/gettest")
public class gettest extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public gettest() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("euc-kr");
response.setCharacterEncoding("euc-kr");
response.setContentType("text/html; charset = EUC-KR");
String name = request.getParameter("name");
response.getWriter().append("get 방식 : hello " + name + "!!" );
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("euc-kr");
response.setCharacterEncoding("euc-kr");
response.setContentType("text/html; charset = EUC-KR");
String name = request.getParameter("name");
response.getWriter().append("post 방식 : hello " + name + "!!" );
}
}● response.getWriter().append("get 방식 : hello " + name + "!!" );
getWriter() 응답페이지에 출력 스트림을 생성하는 것. 서브렛은 주로 응답을 주지만 getWriter() 출력도 할 수 있다.
현재는 프린트 되는 내용이 적기 때문에 그냥 한번에 처리를 하고 응답페이지를 만들어서 출력을 하려고 한다. 따라서 출력 할 스트림이 필요하고 응답 페이지에서 출력 스트림을 주는 게 바로 getwriter()이다. 응답이 길면 jsp를 따로 뺴서 쓰면 된다.
'비동기 요청 > AJAX' 카테고리의 다른 글
| [AJAX] AJAX 기초 (0) | 2023.04.04 |
|---|
