1. 정의
Asynchronos JavaScript And XML
비동기 자바스크립트와 XML을 뜻함
html form을 이용하지 않고 자바스크립트를 통해 서버에 데이터를 요청하는 것
서버 측의 스크립트와 통신하기 위한 XMLHttpRequest 객체를 사용하는 것
서버에서 로딩된 데이터를 페이지에 보여주기 위해 새로운 html 페이지로 갈 필요도 없고, 새로고침을 할 필요도 없음
=> 부분 부분만 로딩되므로 다소 속도가 빠름(비동기성)
* Asynchronos : 비동기적
클라이언트 > 서버로 요청시 요청을 보내놓고 프로그램은 계속 돌아간다는 의미
먼저 요청한 것에 대한 callback 함수가 먼저 실행되지 않음
* 자바스크립트는 웹 브라우저에 대한 스크립트 언어이기 때문에 서버와의 소통 기능은 없으나 ajax는 소통이 가능함
* XML : Extensible Markup Language
데이터 형식의 일종. 확장이 가능한 표시 언어
* Markup Language : 데이터에 태그로 항목 표시를 해줌
<person>
<name> ~ </name>
<age> ~ </age>
</person>
* XML > Ajax
독립적인 기술이라기 보다는, 여러 기술의 묶음을 지칭하는 용어에 가까움
=> html, css, DOM, JS, XML, XSLI, XPath, XMLHttpRequest 등의 기술들이 사용됨
마이크로소프트 사에서 처음으로 만든 프레임워크
* Ajax의 본래 명칭 : XHR (XML http Request). http request를 서버에 보내는 것
xml은 JS에서 사용하기에는 다소 불편함 점이 있기 때문에 JS로 서버에 요청을 보낼 시에는 주로 JSON을 많이 사용함
* Ajax로 request를 여러개 만들었을 경우, 어떤게 먼저 돌아올지 알 수 없기 때문에 어떤 callback이 먼저 실행될지 알 수 없음
2. 순서
ㄱ. XHR 객체 생성 : XMLHttpRequest Object 생성
ㄴ. callback 생성
ㄷ. html 메소드, url 결정 : open a request
ㄹ. XHR 메소드로 정보 발송 : send a request
3. 예제
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ex02</title>
<script type="text/javascript">
function loadDoc() {
// ajax 사용하려면 브라우저 내장 함수로 XMLHttpRequest 객체 생성해야 함
// (과거에는 ActiveXObject라는 생성자 사용하였음)
var xhr = new XMLHttpRequest();
// 통신 후 성공, 실패에 따른 처리가 필요할 경우 서버가 응답했을 때 callback으로 호출되는 property에 함수를 할당하면 됨
// 1. XMLHttpRequest.onreadystatechange() 메소드 이용
// 2. XMLHttpRequest의 이벤트 핸들러를 이용
// 3. EventTarget.addEventListener() 메소드 이용
// XMLHttpRequestEventTarget > XMLHttpRequest
// <상속 받는 메소드>
// - onabort() : abort 이벤트 발생시 호출
// - onerror() : 서버 응답이 200이 아닐 때 호출
// - onloadstart() : XHR 요청을 시작할 때 호출
// - onloadend() : XHR 요청이 완료되면 호출됨. onload() 와 다르게 성공/실패 상관 없이 호출됨
// - onprogres() : onloadstart()와 onloadend() 사이에 호출됨. 파라미터로 ProgressEvent를 전달 받으며 이 객체의 프로퍼티는
// 브라우저마다 다를 수 있음
// - onload() : XHR 요청이 성공적으로 완료되면 호출됨. XHR.status가 200일 때만 호출되는 메소드
// - ontimeout : XHR.timeout으로 설정한 시간 내에 응답이 도착하지 않으면 호출됨.
// 요청은 실패한 것으로 간주되며 onprogress()와 onload()는 호출되지 않음
// onreadystatechange() : XMLHttpRequest의 프로퍼티로 콜백 함수를 저장함 // readyState의 값이 변할 때마다 호출되기 때문에 그대로 실행하면 안 됨
// (readyState의 값을 체크하는 조건 분기를 추가해야 원하는 결과를 얻을 수 있음)
xhr.onreadystatechange = function() {
// XHLHttpRequest.readyState : XMLHttpRequest의 현재 상태를 의미
// - 0 : request not initialized
// - 1 : server connection established
// - 2 : request received
// - 3 : progressing request
// - 4 : request finished and response is ready
// XHLHttpRequest.status : 응답 상태 코드를 숫자로 리턴함(200 : 정상)
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("demo").innerHTML = xhr.responseText;
}
};
// XMLHttpRequest.open(method, url[, async])
// open() : Request의 유형을 지정함. send()로 메세지를 날리기 전, 어디에 어떤 방식으로 작동하는지 정하는 메소드
// method, url은 필수지만 async는 기본값이 true로 생략할 수 있는 항목
// async = false인 경우 send() 후 스크립트 진행을 중단하며 서버로부터 응답이 올 때까지 대기함
// method : HTTP 메소드 타입(get, post)
// url : 서버 경로
// async : 비동기 여부(true, false)
xhr.open("GET", "ex03.jsp");
// XMLHttpRequest.send([string]) : 폼 데이터로 전송할 문자열을 인자로 넣어 보냄
// send() : 서버로 request 송신. open() 메소드에서 설정한 값에 따라 서버로 데이터를 요청함
// string은 HTTP 메소드 타입이 POST일 경우에만 명시하며 폼 데이터로 간주됨
// POST 방식일 때에는 setRequestHeader() 메소드로 컨텐츠 타입을 지정하지 않으면 서버에서 처리가 불가능함
// string은 반드시 쿼리 스트링 형태로 작성되어야 함
xhr.send();
}
</script>
</head>
<body>
<button onclick="loadDoc()">who r u</button>
<div id="demo"></div>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ex03</title>
</head>
<body>
<h2>i am waldo</h2>
</body>
</html> |
cs |
<자바스크립트 + ajax를 이용한 예제>
'Framework > Spring' 카테고리의 다른 글
| eGov :: 전자정부프레임워크란? (0) | 2017.06.21 |
|---|---|
| 파일 다운로드 (4) | 2017.03.14 |
| Framework :: JSON (JavaScript Object Notation) (0) | 2017.01.10 |
| Framework :: Spring (0) | 2017.01.06 |
| Framework :: JNDI vs JDBC(DBCP) (0) | 2017.01.02 |