AJAX
AJAX (2) javascript 방식
동동이임
2023. 7. 6. 21:03
■ JavaScript 방식을 이용한 AJAX 테스트
● jsp 페이지에서 html 코드 생성
<h1>javascript방식을 이용한 AJAX테스트</h1>
<h3>1. 버튼 클릭시 get방식으로 서버에 데이터 전송 및 응답받기</h3>
<h3>자바스크립트를 이용한 ajax통신</h3>
<button onclick="ajaxTest1()">js ajax 테스트 1(get)</button>
<h3>2. 버튼 클릭시 post방식으로 서버에 데이터 전송 및 응답받기</h3>
<button onclick="ajaxTest2();">js ajax 테스트 2(post)</button>
<div id="target"></div>- js ajax 테스트 1 버튼을 누르면 get방식, js ajax 테스트 2 버튼을 누르면 post방식으로 응답을 받게 해 줄 것이다.
■ get 방식으로 서버에 데이터 전송 및 응답
● ajaxTest1() script 코드 생성
1. ajax로 서버와 통신하기 위해서 XMLHttpRequest 객체를 생성해준다.
const xhr = new XMLHttpRequest();
2. xhr 객채를 설정해 준다.
- 객체 설정 시 open() 함수를 이용해 통신값을 설정한다.
- 통신값 : 전송방식(get/post), 요청을 보내는 주소, 동기식/비동기식(기본값은 비동기식이며 생략이 가능하다.)
xhr.open("get", "<%= request.getContextPath() %>/ajaxTest.do?id=admin")
3. 요청에 대한 서버응답을 처리할 함수를 지정해줘야 한다.
- xhr 객체에 onreadystatechange 속성을 함수에 대입시켜 준다.
- xhr 객체의 내부 상태를 관리하는 속성
1) readyState : 전송상태를 관리
2) status : 응답결과 관리
xhr.onreadystatechange = () => {
if(xhr.readyState == 4){ // 요청완료
if(xhr.status == 200) { // 응답데이터를 정상적으로 수신
// 서버가 응답한 내용은 xhr객체의 responseText라는 속성에 자동으로 추가된다.
console.log(xhr, xhr.responseText);
document.getElementById("target").innerHTML += "<h3>" + xhr.responseText + "</h3>";
} else if(xhr.status == 404) {
alert("찾는 페이지가 존재하지 않습니다.");
} else{
alert("에러가 발생했습니다.");
}
}
};
4. 모든 값 설정 완료 후 서버로 전송 요청을 보낸다.
xhr.send();
● ajaxTest.do servlet코드 생성
package com.kh.controller;
import java.io.IOException;
import java.io.PrintWriter;
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 JsAjaxController
*/
@WebServlet("/ajaxTest.do")
public class JsAjaxController extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public JsAjaxController() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userId = request.getParameter("id");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print("ajax요청에 대한 응답 결과는 : " + userId);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
● 결과 확인
- 버튼을 누르면 저렇게 아래에 응답 결과가 출력된다.
■ post 방식으로 서버에 데이터 전송 및 응답
● ajaxTest2() script 코드 생성
1. XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
2. xhr 객채 설정
xhr.open("post", "<%= request.getContextPath() %>/ajaxTest.do");
3. 요청에 대한 서버응답을 처리할 함수를 지정
xhr.onreadystatechange = () => {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
document.getElementById("target").innerHTML += "<h4>" + xhr.responseText + "</h4>";
}
}
}
4. 파라미터 설정
- post방식으로 데이터를 전송할 시에는 url에 데이터 내용을 작성하지 않고 send함수의 매개변수로 작성하며 전송방식도 수정해줘야 한다.
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("id=admin");
● ajaxTest.do servlet코드 생성
package com.kh.controller;
import java.io.IOException;
import java.io.PrintWriter;
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 JsAjaxController
*/
@WebServlet("/ajaxTest.do")
public class JsAjaxController extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public JsAjaxController() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userId = request.getParameter("id");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print("ajax요청에 대한 응답 결과는 : " + userId);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
● 결과 확인
- 버튼을 누르면 저렇게 아래에 응답 결과가 출력된다.
■ 모든 코드
<h3>1. 버튼 클릭시 get방식으로 서버에 데이터 전송 및 응답받기</h3>
<h3>자바스크립트를 이용한 ajax통신</h3>
<button onclick="ajaxTest1()">js ajax 테스트 1(get)</button>
<h3>2. 버튼 클릭시 post방식으로 서버에 데이터 전송 및 응답받기</h3>
<button onclick="ajaxTest2();">js ajax 테스트 2(post)</button>
<div id="target"></div>
<script>
const ajaxTest1 = () => {
// ajax로 서버와 통신하기
// 1. XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
// 2. xhr 객체를 설정하기 -> 전송방식(get/post), 요청을 보내는 주소 / [동기식, 비동기식](기본값은 비동기식)
// 객체 설정시 open()함수를 이용해서 통신값을 설정한다.
xhr.open("get", "<%= request.getContextPath() %>/ajaxTest.do?id=admin")
// 3. 요청에 대한 서버응답을 처리할 함수를 지정
// xhr 객체의 onreadystatechange라는 속성에 함수를 대입
// xhr 객체의 내부 상태를 관리하는 속성
// 1) readyState : 전송상태를 관리
// 2) status : 응답결과 관리
xhr.onreadystatechange = () => {
if(xhr.readyState == 4){ // 요청완료
if(xhr.status == 200) { // 응답데이터를 정상적으로 수신
// 서버가 응답한 내용은 xhr객체의 responseText라는 속성에 자동으로 추가된다.
console.log(xhr, xhr.responseText);
document.getElementById("target").innerHTML += "<h3>" + xhr.responseText + "</h3>";
} else if(xhr.status == 404) {
alert("찾는 페이지가 존재하지 않습니다.");
} else{
alert("에러가 발생했습니다.");
}
}
};
// 모든값 설정 완료 후 서버로 요청을 전송
xhr.send();
};
function ajaxTest2() {
const xhr = new XMLHttpRequest();
xhr.open("post", "<%= request.getContextPath() %>/ajaxTest.do");
xhr.onreadystatechange = () => {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
document.getElementById("target").innerHTML += "<h4>" + xhr.responseText + "</h4>";
}
}
}
// post방식으로 데이터 전송시 파라미터 설정방법
// url에 데이터 내용을 작성하지 않고 send함수의 매개변수로 작성
// 전송방식도 수정해줘야 한다.
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("id=admin");
}
</script>