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

+ Recent posts