DHTMLX - AJAX 활용

DHTMLX는 Client와 Server간의 통신은 AJAX를 이용하고 있으며, 동기식/비동기식 통신이 가능합니다.

DHTMLX에서 AJAX를 사용하는 방법을 알아보겠습니다.

 

1. DHTMLX Suite의 js와 css를 include합니다.

<link rel="stylesheet" type="text/css" href="/dhtmlx/dhtmlx.css"/>
<script src="/dhtmlx/dhtmlx.js"></script>

 

 

2. 동기식 AJAX

 - 아래의 함수를 실행하면 "[동기식 통신] 로딩 완료" > "함수 호출 완료" 순으로 Alert이 표시됩니다.

    // 동기식 AJAX
    function doSync(){
        //var url = "/example/ajax/smartrend.xml";
        var url = "smartrend.xml";
        var loader = dhx4.ajax.getSync(url);
        var xml = loader.xmlDoc.responseText;
        
        alert("[동기식 통신] 로딩 완료");
        document.getElementById("xml").innerText = xml;
        
        alert("함수 호출 완료");
    }

 

 - 실행 결과

 

 

 

3. 비동기식 AJAX

 - 아래의 함수를 실행하면 "함수 호출 완료" > "[비동기식 통신] 로딩 완료" 순으로 Alert이 표시됩니다.

    // 비동기식 AJAX
    function doAsync(){
        //var url = "/example/ajax/smartrend.xml";
        var url = "smartrend.xml";
        dhx4.ajax.get(url, function(loader){
            var xml = loader.xmlDoc.responseText;
            
            document.getElementById("xml").innerText = xml;
            
            alert("[비동기식 통신] 로딩 완료");
        });
        
        alert("함수 호출 완료");
    }

 

 - 실행 결과