[Ajax] Ajax 적용하기 - GET방식
기존 웹브라우저를 로딩하는 동기 방식과 ajax와의 가장 큰 차이점은 XMLHttpRequest의 존재 유무이다.
XMLHttpRequest란
Ajax의 가장 핵심적인 구성요소
XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용
XMLHttpRequest 객체
주요 메소드
| 메소드 | 설명 |
| open(method, url, async, user, password) | 새로 만든 요청을 초기화하거나 기존의 요청을 다시 초기화한다. 즉 서버로 보낼 Ajax 요청의 형식을 설정한다. |
| send(body) | 요청을 서버로 보낸다. 요청이 비동기(기본 값) 인 경우이 메소드는 요청이 보내지고 이벤트를 사용하여 결과가 전달되는 즉시 리턴한다. 요청이 동기이면 응답이 도착할 때까지이 메소드가 반환되지 않는다. |
| setRequestHeader(header.value) | header 에 해당하는 value 값으로 HttpRequest 헤더에 값을 설정하는 메소드로써 반드시 open() 메소드 다음에 위치해야한다. |
| abort() | 요청을 중지한다. |
| getAllResponseHeaders() | 요청에 대응되는 응답의 헤더정보를 리턴한다. 즉 cotent-Length / date / URI 등을 포함하는 헤더정보를 문자열 형식으로 반환한다. |
| getResponseHeader(headerName) | 응답의 헤더 정보 중에서 headerName에 대응되는 값을 문자열 형식으로 반환한다. |
주요 속성
| 속성 | 설명 |
| onreadystatechange | readyState 속성이 변경 될 때마다 호출되는 EventHandler |
| readyState | XMLHttpRequest 클라이언트가 있는 다음중 하나의 상태를 반환 |
| responseText | 요청이 전송 된 후 서버에서 받은 텍스트를 반환(읽기 전용) |
| responseXML | 요청에 의해 검색된 HTML 또는 XML을 포함하는 Document 를 반환(읽기 전용) 요청이 실패하거나 아직 전송되지 않았거나 xml/html로 파싱할수 없을시 null |
| status | XMLHttpRequest의 응답에 대한 숫자 HTTP 상태 코드를 반환(읽기 전용) |
| statusText | HTTP 상태 코드에 대한 텍스트 값 ( OK, NOT FOUND 등의 문자열) |
ex.jsp : jsp => 사용자가 데이터를 작성하여 요청하는 페이지
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// AJAX 객체 생성
function createXMLHttpRequest() {
var req = null;
if(window.XMLHttpRequest) { // IE 7.0 이상, Non-Microsoft browsers
req = new XMLHttpRequest();
} else if(window.ActiveXObject) { // IE 7 미만
req = new ActiveXObject("Msxml2.XMLHTTP");
}
return req;
}
var httpReq = null;
function send() {
var query;
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
var oper=document.getElementById("oper").value;
query="num1="+num1+"&num2="+num2+"&oper="+oper;
var url = "ex2_ok.jsp?"+query;
// AJAX 객체 생성
httpReq = createXMLHttpRequest();
// 서버에서 처리한 결과를 전송 할 자바스크립트 함수 지정
httpReq.onreadystatechange = callback;
// GET 방식으로 서버에 전송
httpReq.open("GET", url, true);
httpReq.send(null);
}
// 서버에서 처리한 결과를 넘겨 받는 함수
function callback() {
if(httpReq.readyState == 4) { // 요청상태(4:모든 요청 및 응답 완료)
if(httpReq.status == 200) { // 서버로 부터 넘겨 받은 상태코드(200:성공)
printData();
}
}
}
function printData() {
var box = document.getElementById("box");
// 서버에서 전달 받은 데이터(html)
var result = httpReq.responseText;
box.innerHTML = result;
}
</script>
</head>
<body>
<h3> AJAX 예제 - GET 방식 </h3>
<p>
<input type="text" id="num1">
<select id="oper">
<option value="add">더하기</option>
<option value="sub">빼기</option>
<option value="mul">곱하기</option>
<option value="div">나누기</option>
</select>
<input type="text" id="num2">
<button type="button" onclick="send();"> = </button>
</p>
<hr>
<div id="box"></div>
</body>
</html>
|
cs |
1) Ajax 객체 생성하는 함수 작성
익스플로러 버전에 따라 다르게 설정해준다.
IE 7 미만 일 경우 ActiveXObject("Msxml2.XMLHTTP")
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// AJAX 객체 생성
function createXMLHttpRequest() {
var req = null;
if(window.XMLHttpRequest) { // IE 7.0 이상, Non-Microsoft browsers
req = new XMLHttpRequest();
} else if(window.ActiveXObject) { // IE 7 미만
req = new ActiveXObject("Msxml2.XMLHTTP");
}
return req;
}
|
cs |
2) Ajax 객체를 통해 사용자 요청하는 데이터를 전송하기
서버에서 건너온 데이터를 직렬화하여 url에 저장한다.
ajax 객체를 생성하여 처리한 결과를 보내줄 자바스크립트 함수를 지정해준다.(callback)
마지막으로 위에서 저장한 url과 함께 전송하는 방식과 비동기 여부를 지정하여 설정한다(open 메소드)
그리고 send 메소드를 통해 서버에 전송한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var httpReq = null;
function send() {
var query;
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
var oper=document.getElementById("oper").value;
query="num1="+num1+"&num2="+num2+"&oper="+oper;
var url = "ex2_ok.jsp?"+query;
// AJAX 객체 생성
httpReq = createXMLHttpRequest();
// 서버에서 처리한 결과를 전송 할 자바스크립트 함수 지정
httpReq.onreadystatechange = callback;
// GET 방식으로 서버에 전송
httpReq.open("GET", url, true);
httpReq.send(null);
}
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 서버에서 처리한 결과를 넘겨 받는 함수
function callback() {
if(httpReq.readyState == 4) { // 요청상태(4:모든 요청 및 응답 완료)
if(httpReq.status == 200) { // 서버로 부터 넘겨 받은 상태코드(200:성공)
printData();
}
}
}
function printData() {
var box = document.getElementById("box");
// 서버에서 전달 받은 데이터(html)
var result = httpReq.responseText;
box.innerHTML = result;
}
|
cs |
ex_ok.jsp=> 사용자가 요청한 정보에 대한 결과 페이지
1) 넘어온 요청정보를 받아 html로 출력한다.
정보를 받을시 request를 통해 파라미터로 정보를 받는다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
String oper = request.getParameter("oper");
String result="";
switch(oper){
case "add" : result=String.format("%d+%d=%d", num1,num2, num1+num2); break;
case "sub" : result=String.format("%d-%d=%d", num1,num2, num1-num2); break;
case "mul" : result=String.format("%d*%d=%d", num1,num2, num1*num2); break;
case "div" : result=String.format("%d/%d=%d", num1,num2, num1/num2); break;
}
%>
<p>
수1: <%=num1 %>, 수2: <%=num2 %>
</p>
<p> 결과 : <%=result %></p>
|
cs |
'Web > AJAX' 카테고리의 다른 글
| [Ajax] Ajax 적용하기 - jQuery.load() : GET방식 (0) | 2020.12.07 |
|---|---|
| [Ajax] Ajax 적용하기 - JSON 방식 (0) | 2020.12.07 |
| [Ajax] Ajax 적용하기 - xml방식 (0) | 2020.12.05 |
| [Ajax] Ajax 적용하기 - POST방식 (0) | 2020.12.05 |
| [Ajax] ajax란? (0) | 2020.12.05 |
댓글