AJAX
AJAX 장점
AJAX 단점
동기식 데이터 통신
: 클라이언트가 서버로 데이터를 요청하면 응답이 올 때까지 다른 작업은 대기
-> 즉 응답이 없을 때 까지는 해당 화면에서 다른 작업을 진행할 수 없다!
-> 일반적으로 프로그램은 동기식임
비동기식 데이터 통신
: 클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고 다른 작업 수행 가능, 추후 응답이 오면 응답에 관련된 작업 진행
-> EX) 싸이월드에서 옆에 방명록 버튼 누르면 전체화면은 그대로지만, 안의 내용들은 변경됨
-> 하나의 페이지안에서 어떤부분만 따로 변경되게하는 기술
js가 제공하는 XMLHttpRequest
객체를 이용
(1) : XMLHttpRequest객체를 생성
(2) : 필요한 속성에 대한 설정
- 요청할 서버의 주소, 요청방식 등
- 요청이 끝나고 실행할 함수를 설정 (callback 함수)
(3) : 요청보내기함수 실행 -> send()
request.open()
함수로 서블릿으로 요청을 보낸것이 아니라, 요청방식과 요청할 주소 속성을 설정한것이다!
send()
메소드로 설정한 주소에 설정한 메소드로 요청을 보냄onreadystatechange
에 설정한 함수가 자동으로 실행됨 <input id="data" type="text">
<button id="jsSendBtn">js로 ajax통신</button>
<button id="postBtn">js로 post방식 보내기</button>
<div id="result"></div>
<script>
/* post 방식 */
const postBtn = document.getElementById("postBtn");
postBtn.addEventListener("click",e=>{
const request=new XMLHttpRequest();
// 2. 필수 속성에 대한 설정
// open("요청할 방식(method) ","요청할 주소"); 호출
request.open("post","<%=request.getContextPath()%>/js/ajax.do")
request.onreadystatechange=()=>{
if(request.readyState==4){
if(request.status==200){
document.getElementById("result").innerHTML=request.responseText;
}
}
}
// post 방식으로 요청을 보낼때는 헤더설정을 추가로 해줘야한다.
// content-type 속성값을 설정
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// post방식으로 데이터를 전송할때는 send함수의 매개변수로 데이터를 전송을 함.
const val=document.getElementById("data").value;
request.send("param="+val+"&data=asdf");
document.getElementById("result").innerHTML='<div class="spinner-border text-danger"></div>'
});
/* get 방식 */
const sendBtn=document.getElementById("jsSendBtn");
sendBtn.addEventListener("click",e=>{
const paramData=document.getElementById("data").value;
// 서버에 요청을 보내기!
const request=new XMLHttpRequest(); // 1. XMLHttpRequest객체를 생성
//2. 필수속성에 대해 설정하자
//open("요청할 방식(method)","요청할 주소"); 호출
request.open("get","<%=request.getContextPath()%>/js/ajax.do?param="+paramData);
// 서블릿으로 넘기면서 데이터(paramData)까지 같이 전송
// 요청이 끝나고 응답이 왔을때 실행할 함수를 지정!
// onreadystatechange 속성에 이벤트 함수를 등록
// ajax통신에 대한 상태관리를 하게되는데 요청상태가 변경될때마다 실행되는 함수를 등록
// 변경상태는 readyState속성에 저장 -> 0~4의 값을 가짐
// *4 : 응답이 완료된 상태
// 응답코드저장속성은 status임 -> 404(서비스 주소를 찾을수 없을때),500(서버측 에러),200(정상적인 통신 완료)
request.onreadystatechange=()=>{
console.log(request.readyState); // 응답완료 상태
console.log(request.status); // 응답코드
if(request.readyState==4){ // 응답이 완료됬으면
let msg="";
switch(request.status){
case 200 : msg="정상적으로 통신을 완료함"; break;
case 404 : msg="요청한 서비스가 없습니다."; break;
}
//서버가 보낸 데이터를 가져오기
//서버가 응답한 데이터는 문자열로 가져옴
//responseText 속성을 이용해서 데이터를 가져옴
console.log(request.responseText); // responseText 속성
document.getElementById("result").innerHTML=msg;
document.getElementById("result").innerHTML+=request.responseText;
}
}
// 요청보내기
request.send();
});
</script>
package com.ajax.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;
@WebServlet("/js/ajax.do")
public class JavascriptAjaxBasicServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public JavascriptAjaxBasicServlet() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("ajax서비스 실행!");
// ajax로 클라이언트가 보낸 데이터 가져오기
String param = request.getParameter("param");
System.out.println(param);
response.setContentType("text/csv;charset=utf-8");
PrintWriter out=response.getWriter(); // 응답처리
out.print("데이터 요청처리!"); // jsp 파일에 responseText에 저장됨
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// doGet(request, response);
request.setCharacterEncoding("UTF-8");
System.out.println("post방식요청응답");
String paramData=request.getParameter("param");
System.out.println(paramData);
new Thread(()->{ // 트래픽을 강제적으로 부여 (딜레이 발생시키기)
try {
Thread.sleep(4000); // 4초지연
}catch(InterruptedException e) {
e.printStackTrace();
}
}).run();
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("<h2>요청에 대한 응답</h2>"); // jsp 파일에 responseText에 저장됨
}
}