IT story/JSP

[JSP 강의] L15JavaScript (L07XmlAJAX.html)

jason719 2016. 12. 10. 21:50

L15 JAVA SCRIPT

L07XmlAJAX 
비동기식 통신에 대해 알아보자.


ex) L07XmlAJAX.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX를 이용해 비동기식 통신을 하자</title>
</head>
<body>
    <h1>HttpRequest를 이용해 AJAX를 구현하자</h1>
    <p>
        AJAX란 비동기식 웹 통신을 말한다.<br/>
        이때 비동기식을 간단하게 설명하면 page 로딩이 끝난 후 다시 page로드를 하지 않고<br/>
        통신하는 것을 말한다.<br/>
        이때 서버측에서 다양한 형태의 문서를 받을 수 있다.<br/>
        (JSON, XML, HTML, TXT) 같은 문서에 DB에서 받아온 내용을 파싱해서 넘긴다.<br/>
        비동기식 통신의 장점으로는 전체 페이지를 리프레쉬 하지 않고도 동작되는 것이다.<br/>
        전체페이지를 로딩하기 위해서는 전체 페이지에 필요한 내용을 다시 DB에서 가져와야한다.<br/>
        하지만 비동기식을 사용하면 필요한 부분만 통신한다. (DB의 부담 감소)<br/>
        사용자 ux, ui가 편리해진다.
    </p>
    <hr/>
    <h3>DB 서버와 통신하는 페이지에서 books 정보를 가져와서 xml 형태로 파싱 생략</h3>
    <h3>파싱된 books.xml을 화면에 출력시킨다.</h3>
    <button type="button" onclick="lodeDoc()">AJAX 통신</button>
    <div id="test">
        <table border="1">
            <tbody class="title">
                <tr>
                    <th>num</th>
                    <th>name</th>
                    <th>sort</th>
                    <th>price</th>
                    <th>author</th>
                    <th>info</th>
                </tr>
            </tbody>
            <tbody class="list">
            </tbody>
        </table>    
    </div>
    <br/>
    <script>
    function lodeDoc(){
        var xhttp; //HttpRequest 객체를 담을 변수
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest(); //통신을 하기위해 새로운 객체 생성
        } else if (window.ActiveXObject) {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP")
            //ie5, ie6에는 XMLHttpRequest 객체가 없다.            
        }
        xhttp.onreadystatechange = function() {
            //통신이 성공하면 실행할 함수 -> 익명함수 안에 실행할 함수를 넣으면 비동기식으로 실행된다.
            if (this.readyState==4 && this.status==200) {
                //readystate==4 통신이 완료됨, status==200 통신이 성공함
                var xml = this.responseXML;
                test(xml);
            }
        }
        xhttp.open("GET","books.xml",true); //접속하는 대상을 지정 (통신방식,URL,비동기식)
        xhttp.send(); //접속->성공시 onreadystatechange에 선언한 함수가 (비동기식으로) 실행된다.
    }
    function test(xml) {
        //모든 문서의 선택자를 찾을 수 있다 -> 브라우저 버전에 영향을 받는다.
        var tableList = document.querySelector("#test table .list");
        var books = xml.getElementsByTagName("book");
        console.log(tableList);
        var htmlList="";
        for (var i = 0; i < books.length; i++) {
            htmlList +="<tr>";
            htmlList +="<td>"+books[i].getElementsByTagName("num")[0].childNodes[0].nodeValue+"</td>";
            htmlList +="<td>"+books[i].getElementsByTagName("name")[0].childNodes[0].nodeValue+"</td>";
            htmlList +="<td>"+books[i].getElementsByTagName("sort")[0].childNodes[0].nodeValue+"</td>";
            htmlList +="<td>"+books[i].getElementsByTagName("price")[0].childNodes[0].nodeValue+"</td>";
            htmlList +="<td>"+books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue+"</td>";
            htmlList +="<td>"+books[i].getElementsByTagName("info")[0].childNodes[0].nodeValue+"</td>";
            htmlList +="</tr>";
        }
            tableList.innerHTML = htmlList;
    }
    </script>
</body>
</html>
cs

※출력내용

AJAX 통신 전

AJAX 통신 후

저작자표시 변경금지

'IT story > JSP' 카테고리의 다른 글

[JSP 강의] L15JavaScript (L09CheckIdAJAX.jsp)  (0) 2016.12.10
[JSP 강의] L15JavaScript (L08sonAJAX.html)  (0) 2016.12.10
[JSP 강의] L15JavaScript (L06JSON.html)  (0) 2016.11.18
[JSP 강의] L15JavaScript (L05Function.html)  (0) 2016.11.18
[JSP 강의] L15JavaScript (L04Array.html)  (0) 2016.11.18

'IT story/JSP'의 다른글

  • 현재글[JSP 강의] L15JavaScript (L07XmlAJAX.html)

관련글

티스토리툴바