• Ajax(Asynchronous JavaScript and XML)

  • 동적인 웹화면 구성을 위한 개발 기법




DOM


Contents

1 Ajax 개발툴
1.1 일단 하나 만들어 보자
1.2 살펴볼 사이트들
1.3 Ajax를 응용한 사이트들
2 ajax 관련 사이트
3 추천 ajax 위젯

1.1 일단 하나 만들어 보자 #

어떤걸 만들까?

서버에서 메시지를 가져오는 간단한 테스트를 만들어봤습니다.

중요한건 클라이언트쪽 소스입니다. 소스보기하면 다 보일거구요. 서버쪽은 별거 없습니다. 그냥 3초정도 대기하다가 메시지를 뿌려주는 것밖에... 그리고 그 메시지를 클라이언트 브라우져에 동적으로 표시해줍니다.

  • 클라이언트쪽 html 소스
    <script>
    
    var xmlhttp;
    
    
    function getMessage()
    {
        document.getElementById("btnGM").disabled = true;
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        xmlhttp.onreadystatechange = onreadystatechangeEH
        xmlhttp.open("GET", "/comnote/web/ajax/ajaxTest_getMessage.jsp", true);
        xmlhttp.send();
    }
    
    function onreadystatechangeEH()
    {
        if(xmlhttp.readyState){
            document.getElementById("statusCode").innerText = xmlhttp.readyState;
        }
        
        if(xmlhttp.readyState == 4){
            if (xmlhttp.status == 200)
                document.getElementById("result").innerText = xmlhttp.responseText;
            document.getElementById("statusText").innerText = xmlhttp.statusText;
        }
    }
    
    </script>
    
    
    xmlhttp.readyState : <div id="statusCode"></div>
    xmlhttp.statusText : <div id="statusText"></div>
    xmlhttp.responseText : <div id="result"></div>
    <input type="button" id="btnGM" onClick="getMessage()" value="get message">
    
    
     




  • 서버쪽 jsp 소스
    <%
    try{
        Thread.sleep(3000);
    }
    catch(Exception e){}
    
    out.println("HI~ gimslab.com "+new java.util.Date());
    %>
     




==> 실행해보기







1.3 Ajax를 응용한 사이트들 #

http://www.meebo.com/ - 웹기반메신저(AIM(ICQ), YahooMessenger, Jabber(GTalk), MSN)

http://gmail.com/ - web mail


Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2008-08-27 17:32:32
Processing time 0.0177 sec