JSON_05_자바스크립트에서 패키지 정의하기

- 자바스크립트에서 패키지 정의하기 
    - 다른 모듈과 이름이 겹치는 경우가 발생할 수 있으므로 패키지, 어셈블리와 같은 개념을 제공합니다.
    var ajax = new Object();
     ajax.Request = function {
          // Request 클래스 정의
     }
    ajax.Request.prototype = {
          // Request 클래스에 함수 추가
          '함수 이름' : function() {
               ....
          }
          ...
     }

     - 패키지의 형태로 클래스나 함수를 호출할 수 있습니다.
     var req = new ajax.Request();
     req.'함수 이름'();

    - 패키지 중첩 정의
    var ajax = new Object();
    var ajax.xhr = new Object();    
     ajax.xhr.Request = function(){
          ....
     }
    
     // 호출
     var req = new ajax.xhr.Request();

     - Objcet 클래스를 사용하지 않고 아무 값도 없는 JSON 표기법을 사용할 수도 있습니다.
          var ajax = { };
          var ajax.xhr = { };
         ajax.xhr.Request = function() {
               ...
          }

- 패키지와 클래스 개념을 적용하여  XMLHttpRequest 모듈 생성하기 
- prototype > 'ajax.js' JavaScript 파일 생성하기
=====

/**
 * 
 */
 
var ajax = { };
 
ajax.xhr = { };
 
ajax.xhr.Request = function(url, params, callback, method){
    this.url = url;
    this.params = params;
    this.callback = callback;
    this.method = method;
     
    // Request 클래스 생성자로 생성과 동시에 호출합니다.
    this.send();
}
 
ajax.xhr.Request.prototype = {
     
    getXMLHttpRequest : function() {
        if(window.ActiveXObject){
            try{
                return new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                try{
                    return new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e1){
                    return null;
                }
            }
        } else if(window.XMLHttpRequest){
            return new XMLHttpRequest(); 
        } else {
            return null;
        }
    },
     
    send : function(){
         
        // req 프로퍼티에 XMLHttpRequest 객체를 저장
        this.req = this.getXMLHttpRequest();
         
        var httpMethod = this.method ? this.method : 'GET';
         
        if(httpMethod != 'GET' && httpMethod != 'POST'){
            httpMethod = 'GET';
        }
         
        var httpParams = (this.params == null || this.params == '')?null : this.params;
         
        var httpUrl = this.url;
         
        if(httpMethod == 'GET' && httpParams != null){
            httpUrl = httpUrl + "?" + httpParams;
        }
         
        this.req.open(httpMethod, httpUrl, true);
        this.req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
             
        // XMLHttpRequest 객체의 readyState 값이 바뀔 때 함수를 호출합니다.
        var request = this;
        
        this.req.onreadystatechange = function(){
            request.onStateChange.call(request);
        }
        
        this.req.send(httpMethod == 'POST' ? httpParams : null);
     },
     
     // 이 객체의 callback 프로퍼티에 할당된 함수를 호출합니다.
     onStateChange : function(){
         this.callback(this.req);
     }
 }

- ' Ajax_DOM_XML 응답 생성하기'에서 사용한  books.jsp 파일 가져오기
=====

<?xml version="1.0" encoding="UTF-8" ?>
 
<%@ page contentType="text/xml; charset=UTF-8"%>
 
<books>
    <book>
        <title>첫 번째 book 태그 title</title>
        <content>첫 번째 book 태그 content</content>
    </book>
    <book>
        <title>두 번째 book 태그 title</title>
        <content>두 번째 book 태그 content</content>
    </book>
    <book>
        <title>세 번째 book 태그 title</title>
        <content>세 번째 book 태그 content</content>
    </book>
</books>

- ' Ajax_DOM_XSL/T를 사용하여 XML을 HTML로 변환하기삭제 ' 에서 사용한 books.xsl 파일 가져오기
=====

<?xml version="1.0" encoding="UTF-8"?>
 
<!-- XSLT 스타일시트를 정의하는 루트 요소입니다. -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
    <!-- XSLT 에서 출력 형식을 설정하는 요소입니다 -->
    <xsl:output method="html" indent="yes" encoding="UTF-8" />
        <!-- 
            - method : 출력 형식을 지정합니다.
            - indent : 출력을 들여쓸 것인지를 지정합니다.
            - encoding : 출력 문서의 문자 인코딩을 설정합니다.
         -->
    
    <!-- 템플릿을 정의하는 요소입니다. books 엘리먼트와 일치하는 경우 적용됩니다. -->
    <xsl:template match="books">
        <ul>
            <!-- XSLT 에서 반복 처리를 수행하는 루프를 의미합니다. -->
            <xsl:for-each select="book">
                <li>
                    <b>
                        <!-- book 엘리먼트의 title 엘리먼트 내용을 출력합니다. -->
                        <xsl:value-of select="title" />
                    </b>
                    (
                    <i>
                        <!-- book 엘리먼트의 content 내용을 출력합니다. -->
                        <xsl:value-of select="content" />
                    </i>
                    )
                </li>
            </xsl:for-each>
        </ul>
    </xsl:template>
</xsl:stylesheet>

- prototype > 'bookList.html' html 파일을 생성합니다.
=====

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bookList.html</title>
 
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
    var xmlDoc = null;
    var xslDoc = null;
    
    function loadBooks(){
        new ajax.xhr.Request("books.jsp", null, loadedBooksXML, "GET");
        new ajax.xhr.Request("books.xsl", null, loadedBooksXSL, "GET");
    }
    
    function loadedBooksXML(req){
        if(req.readyState == 4){
            if(req.status == 200){
                xmlDoc = req.responseXML;
                doXSLT();
            }
        }
    }
    
    function loadedBooksXSL(req){
        if(req.readyState == 4){
            if(req.status == 200){
                xslDoc = req.responseXML;
                doXSLT();
            }
        }
    }
    
    function doXSLT(req){
        if(xmlDoc == null || xslDoc == null)
            return;
        
        var bookList = document.getElementById("bookList");
        
        if(window.ActiveXObject){
            bookList.innerHTML = xmlDoc.transformNode(xslDoc);
        } else{
            var xsltProc = new XSLTProcessor();
            xsltProc.importStylesheet(xslDoc);
            
            /*
                - transformToFragment : XSLT 스타일 시트를 사용하여 XML 데이터를 변환
                    - 변환된 결과를 DocumentFragment로 반환하는 메소드입니다.
                - DocumentFragment
                    - 가상의 노드 컨테이너로 작동하는데 실제 DOM 트리에 속하지 않으며 독립적으로 존재
                    - 여러 DOM 노드를 담는 데 사용합니다.
                    - 이런 노드들을 하나의 그룹으로 다룰 수 있도록 도와주는 역할입니다.
            */
            var fragment = xsltProc.transformToFragment(xmlDoc, document);
            bookList.appendChild(fragment);
        }
    }
    
    window.onload = function(){
        loadBooks();
    }
</script>
</head>
<body>
    <h3>New Book List</h3>
    <div id="bookList">
        <!-- 출력 위치입니다. -->
    </div>
</body>
</html>

- bookList.html 파일을 실행합니다.