1. XMLHttpRequest 객체 생성
우선 httpRequest 객체를 생성해야 한다.
1-1) XMLHttpRequest라는 내장 객체가 있으면 해당 객체를 생성한다.
1-2 )아닐 경우에는(익스플로러 8버전 이하) ActiveXObject 객체를 생성한다.
// 1. XMLHttpReqeust 객체 생성
let httpRequest = null;
if(window.XMLHttpRequest){
// XMLHttpReqeust라는 내장객체가 있으면 생성해라. 요즘 다른 브라우저에는 웬만하면 다 제공한다.
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject){
// 익스플로러 8버전 이하에는 XMLHttpRequest 내장객체가 없다. ActiveXObject 있으면 생성해라.
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
2. Callback 함수 설정
서버의 상태를 인지할 수 있도록 httpRequest.onreadystatechange에 callback 함수를 할당(?) 한다.
(readystate => request의 상태.) readystate(request의 상태)가 바뀔 때마다 호출되는 callback 함수를 설정하는 것이다.
여기서 의미 있는 것은 httpRequest.readyState == 4 와 httpRequest.status== 200 이다.
서버의 응답이 완료된 상태(httpRequest.readyState == 4)이자 서버가 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리했음(httpRequest.status== 200)을 나타낸 경우에만 어떠한 동작을 수행하면 된다.
httpRequest.onreadystatechange = function(){
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
document.getElementById('msgView').innerHTML = httpRequest.responseText
/* let msgView = document.getElementById('msgView');
msgView.innerHTML = httpRequest.responseText */
}
}
}
4. 태그의 내용 수정
httpRequest.readyState == 4 && httpRequest.status== 200 인 경우 처리할 로직을 작성한다.
httpReqeust.responseText 를 통해서 응답 결과를 가져올 수 있다.
document.getElementById('msgView').innerHTML = httpRequest.responseText
3. 서버에 비동기 통신 요청
초기화 : open(HTTP method, URL, syn/asy) 메소드
전송: send() 메소드
GET, POST 방식에 따라 조금 다르다.
3-1. GET 방식 요청
GET 방식인 경우에는, url에 파라미터를 담아서 보낸다. 그리고 send 메소드의 인자로는 null을 쓰면 된다.
httpReqeust.open('get', 'url?name=value', true);
httpRequest.send(null)
3-2. POST 방식 요청
POST 방식인 경우, url에 파라미터를 쓰지 않고 send 메소드의 인자에 파라미터를 쓴다.
또한, POST 방식은 form 태그만 가능하다.
이를 위해 별도의 설정이 필요하다.
httpRequest.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
+ 응답 대상 파일에 인코딩 설정
request의 형태가 POST인 경우, 인코딩 설정을 해야 한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
if(request.getMethod().equals("POST"))
request.setCharacterEncoding("utf-8");
%>
안녕하세요 ${ param.name } 회원님
회원님이 입력하신 내용은
이름 : ${ param.name }
나이 : ${ param.age }
입니다.
*참고
readyState(request의 상태)
0 : open() 호출 전
1 : open() 호출, send() 호출 전
2 : send() 호출, 서버 응답 전
3 : 서버응답, header 전송, body 미전송
4 : 서버에서의 응답이 완료된 상태
status(http 상태코드)
200 : OK(요청 성공)
404 : Not Found
500 : Server Error
기타 등등
exam01.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>
<style>
#msgView{
border : 1px solid red;
width : 500px;
height : 200px;
}
</style>
<script>
function requestMsg(){
// 1. XMLHttpReqeust 객체 생성
let httpRequest = null;
if(window.XMLHttpRequest){
// XMLHttpReqeust라는 내장객체가 있으면 생성해라. 요즘 다른 브라우저에는 웬만하면 다 제공한다.
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject){
// 익스플로러 8버전 이하에는 XMLHttpRequest 내장객체가 없다. ActiveXObject 있으면 생성해라.
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(httpRequest);
//2. callback 함수 설정
//서버의 내용이 바뀔때마다 그것을 인지하는 놈이 필요하다. 그것이 바로 callback 함수다
httpRequest.onreadystatechange = function(){
console.log('change.....') // 한번의 요청에 4번이 찍히네
//4. 서버에서 응답 완료
// readyState가 4번째이면서 ... 200은 성공
/*
readyState
0 : open() 호출 전
1 : open() 호출, send() 호출 전
2 : send() 호출, 서버 응답 전
3 : 서버응답, header 전송, body 미전송
4 : 서버에서의 응답이 완료된 상태
/*
status
200 : OK(요청 성공)
404 : Not Found
500 : Server Error
*/
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
// 5. 서버 응답 결과를 추출
alert('마 응답 성공했다')
console.log(httpRequest.responseText)
console.log(httpRequest.responseText.length)
document.getElementById('msgView').innerHTML = httpRequest.responseText
/* let msgView = document.getElementById('msgView');
msgView.innerHTML = httpRequest.responseText */
}
}
}
//3. 서버에 비동기 통신 요청
// HTTP method, URL, syn/asyn
httpRequest.open('get', '/Lecture-WEB/HelloServlet', true);
httpRequest.send(null);
//open에 설정한 url로 request를 보내는 것이 send 라는 메소드다.
// POST 방식일 때만 의미가 있다. POST 방식인데 name=value 형태로 보낸다고 함..(? 뭐냥)
// GET 방식인 경우에는 content 값이 null이다. 별도로 URL에 파라미터를 담아 보내는 설정이 필요한듯?
// 정리필요. 확실히 이해 못함.
// 정리
//POST 방식은 url에 파라미터를 보내지 않는다.
//send 메세지에 파라미터를 name=value 형태로 보내야 한다.
}
</script>
</head>
<body>
<h2>서버에서 받은 메세지</h2>
<div id = "msgView"></div>
<input type ="button"value ="서버에 자료 요청" onclick = "requestMsg()">
</body>
</html>HelloServlet.java
package kr.ac.kopo.ajax;
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 HelloServlet
*/
@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("마 반갑다.");
response.setContentType("text/html; charset = utf-8 ");
PrintWriter out = response.getWriter();
out.println("<h1> 반갑습니다 hello servlet ajax @!#!@#!@#!@#! </h1>");
out.close();
}
}
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] JSON 파싱 예제 (0) | 2020.07.27 |
|---|---|
| [AJAX] XMLHttpRequest 모듈을 이용한 예제 (0) | 2020.07.27 |
| [JS] 변수 = 함수명 VS 변수 = 함수명() (0) | 2020.07.24 |
| [JS] AJAX란? (0) | 2020.07.24 |
| [JS] ★a태그 href 속성에 javascript 함수 넣기 (0) | 2020.07.23 |
