K-Mobile_Ajax_강의

TableOfContents

개관

실무에서 많이 활용되는 여러 가지 Ajax 응용 기술들을 구현하는 과정을 실습해보고 그 과정에서 기본 개념과 원리를 학습해서 스스로 다양한 Ajax 응용 기술들을 구현할 수 있는 능력을 키울 수 있도록 한다.

강사 소개

홈페이지 : http://youngrok.com 메일 : pak.youngrok@gmail.com

이 강의에서 다루는 기본 개념

예제를 통해서 다루게 되는 Ajax 응용 기술

실습 내용

DHTML

DHTML(Dynamic HTML) 기초

링크를 누르면 특정 태그 안의 내용을 바꾼다. document.getElementById를 이용해서 특정 id를 가진 엘리먼트를 취하고 innerHTML 속성을 통해서 엘리먼트의 내용을 변경한다. 

<a href="#" onclick="document.getElementById('greeting').innerHTML += ' Hello'">Greeting!!</a>
<p id="greeting">Hello</p>

DHTML 테이블 조작

DOM을 이용해서 테이블에 동적으로 내용을 추가한다. document.createElement를 이용해서 새로운 엘리먼트를 만들고 부모 엘리먼트의 appendChild를 이용해서 만든 엘리먼트를 추가할 수 있다. 내용은 역시 innerHTML로 조정할 수 있다. 

<script type="text/javascript">
function appendNewElement(parent, elementName, text) {
        var child = document.createElement(elementName)
        child.innerHTML = text
        parent.appendChild(child)
}

function addRow(form) {
        var tr = document.createElement('tr')

        appendNewElement(tr, 'td', form.title.value)
        appendNewElement(tr, 'td', form.price.value)
        appendNewElement(tr, 'td', form.sold.value)

        document.getElementById('tbody').appendChild(tr)
        return false;
}
</script>

<form  onsubmit="return addRow(this);">
        <input type="text" name="title">
        <input type="text" name="price">
        <input type="text" name="sold">
        <input type="submit" value="목록 추가">
</form>
<table>
        <thead>
                <tr>
                        <th>도서명</th>
                        <th>가격</th>
                        <th>판매량</th>
                </tr>
        </thead>
        <tbody id="tbody">
                <tr>
                        <td>Head Rush Ajax</td>
                        <td>22000</td>
                        <td>180</td>
                </tr>
                <tr>
                        <td>Ajax in Action</td>
                        <td>28000</td>
                        <td>70</td>
                </tr>
                <tr>
                        <td>Ajax Hacks</td>
                        <td>25000</td>
                        <td>80</td>
                </tr>
        </tbody>
</table>

DHTML 대화상자

DHTML에서는 style도 바꿀 수 있다. CSS style의 display 속성을 block/none으로 바꾸면 특정 엘리먼트의 표시 여부를 변경할 수 있으므로 이걸 이용해서 HTML 내에서 대화상자를 구현할 수 있다. 

<script type="text/javascript">
function showDialog() {
        document.getElementById('dialog').style.display = 'block'
}
function hideDialog() {
        document.getElementById('dialog').style.display = 'none'
}
</script>

<a href="#" onclick="showDialog()">대화상자 띄우기</a>
<a href="#" onclick="hideDialog()">대화상자 감추기</a>

<div id="dialog" style="display: none;">
대화상자가 잘 보이나요?
</div>

Ajax

Ajax 기초

XMLHttpRequest를 이용해서 동적으로 페이지의 내용을 업데이트한다. 

<a href="#" onclick="request()">Hello!</a>
<div id="message" style="position:absolute; left: 300px; right: 300px; width: 200px; height: 100px; border: 1px solid black">

var req;
function request() {
        req = new XMLHttpRequest()
        req.open("GET", "hello.txt", true);
        req.onreadystatechange = showMessage
        req.send(null);
}
function showMessage() {
        if (req.readyState != 4) return
        document.getElementById('message').innerHTML = req.responseText
}

prototype 이용

script 부분을 prototype을 이용해서 좀더 쉽게 구현할 수 있다. 

function request() {
        new Ajax.Request('hello.txt', {
                method: 'get',
                onSuccess: showMessage
        })
}
function showMessage(req) {
        $('message').innerHTML = req.responseText
}

prototype Ajax Updater

function request() {
        new Ajax.Updater('message', 'hello.txt')
}

JavaScript Framework 소개

JavaScript

Include(JavaScript 5분 가이드)

응용 예제

검색어 추천 기능

script.aculo.us

자바스크립트 프레임웍인 script.aculo.us를 이용한 검색어 추천 기능. 

<form>
        <input type="text" id="query" length="60"/>
        <div id="keywords" style="display:none;"></div>
</form>
<script type="text/javascript">
var keywordList = ['ABBA', 'AC/DC', 'Aerosmith', 'America', 'Bay City Rollers', 'Black Sabbath', 'Boston', 'David Bowie', 'Can', 'The Carpenters', 'Chicago', 'The Commodores', 'Crass', 'Deep Purple', 'The Doobie Brothers', 'Eagles', 'Fleetwood Mac', 'Haciendo Punto en Otro Son', 'Heart', 'Iggy Pop and the Stooges', 'Journey', 'Judas Priest', 'KC and the Sunshine Band', 'Kiss', 'Kraftwerk', 'Led Zeppelin', 'Lindisfarne (band)', 'Lipps, Inc', 'Lynyrd Skynyrd', 'Pink Floyd', 'Queen', 'Ramones', 'REO Speedwagon', 'Rhythm Heritage', 'Rush', 'Sex Pistols', 'Slade', 'Steely Dan', 'Stillwater', 'Styx', 'Supertramp', 'Sweet', 'Three Dog Night', 'The Village People', 'Wings (fronted by former Beatle Paul McCartney)', 'Yes']
new Autocompleter.Local('query', 'keywords', keywordList, {})
</script>

직접 구현하기

이벤트를 잡아서 DOM 조작을 통해 검색어 자동완성을 직접 구현 

var keywords = ['ABBA', 'AC/DC', 'Aerosmith', 'America', 'Bay City Rollers', 'Black Sabbath', 'Boston', 'David Bowie', 'Can', 'The Carpenters', 'Chicago', 'The Commodores', 'Crass', 'Deep Purple', 'The Doobie Brothers', 'Eagles', 'Fleetwood Mac', 'Haciendo Punto en Otro Son', 'Heart', 'Iggy Pop and the Stooges', 'Journey', 'Judas Priest', 'KC and the Sunshine Band', 'Kiss', 'Kraftwerk', 'Led Zeppelin', 'Lindisfarne (band)', 'Lipps, Inc', 'Lynyrd Skynyrd', 'Pink Floyd', 'Queen', 'Ramones', 'REO Speedwagon', 'Rhythm Heritage', 'Rush', 'Sex Pistols', 'Slade', 'Steely Dan', 'Stillwater', 'Styx', 'Supertramp', 'Sweet', 'Three Dog Night', 'The Village People', 'Wings (fronted by former Beatle Paul McCartney)', 'Yes']
var count = 0
var index = -1
var query = ''
function suggest() {
        var keyword = $('query').value
        if (keyword == '' || query == keyword) return
        query = keyword

        var suggestHTML = ''
        count = 0

        keywords.each(function(value) {
                if (value.indexOf(keyword) == 0) {
                        var attr = ''
                        if (count == index) {
                                attr = 'class="selected"'
                        }
                        suggestHTML += '<li ' + attr + '>' + value + '</li>'
                        count ++
                }
        })
        $('keywords').innerHTML = suggestHTML
}

function choose(event) {
        if (count == 0) return true;

        if (event.keyCode == Event.KEY_UP) {
                index = (index + 3) % count
        } else if (event.keyCode == Event.KEY_DOWN) {
                index = (index + 1) % count
        } else if (event.keyCode == Event.KEY_RETURN) {
                $('query').value = $('keywords').getElementsByTagName('li')[index].innerHTML
        } else {
                return true
        }
        query = ''
        return false;
}

window.setInterval(suggest, 100)

<form onsubmit="return false;">
        <input type="text" id="query" length="60" onkeydown="return choose(event)" />
        <div>
                <ul id="keywords" >
                </ul>
        </div>
</form>

트리

<ul id="tree">
        <li id="search"><span>+ </span>검색</li>
        <li id="community"><span>+ </span>커뮤니티</li>
        <li id="shopping"><span>+ </span>쇼핑</li>
</ul>
<script type="text/javascript">
var treeData = {
        search: [{key:'google', name: '구글'}, {key:'naver', name: '네이버'}, {key:'yahoo', name: '야후'}],
        community: [{key:'cyworld', name:  '싸이월드'}, {key:'daumcafe', name: '다음 까페'}],
        shopping: [{key:'openmarket', name:  '오픈 마켓'}, {key:'shoppingmall', name: '쇼핑몰'}],
        openmarket: [{key:'gmarket', name:  'G 마켓'}, {key:'auction', name:  '옥션'}, {key:'ebay', name:  '이베이'}],
        shoppingmall: [{key:'cjmall', name:  'CJ Mall'}, {key:'amazon', name:  '아마존'}]
}

$$('#tree span').each(function(element) {
        Event.observe(element, 'click', toggle)
})

function toggle(event) {
        var element = Event.element(event).parentNode
        if (element.expanded) {
                fold(element)
                element.expanded = false
        } else {
                expand(element)
                element.expanded = true
        }
}

function expand(element) {
        var ul = document.createElement('ul')
        element.appendChild(ul)
        var children = treeData[element.id]
        children.each(function(child) {
                var li = document.createElement('li')
                ul.appendChild(li)
                li.id = child.key
                li.innerHTML = '<span>+ </span>' + child.name
                Event.observe(li.firstChild, 'click', toggle)
        })
        element.firstChild.innerHTML = '- '
}

function fold(element) {
        element.removeChild(element.getElementsByTagName('ul')[0])
        element.firstChild.innerHTML = '+ '
}
</script>

드래그 & 드랍

마우스 이벤트와 CSS style의 위치 지정 기능을 이용해서 드래그 & 드랍을 구현할 수 있다. 

function showDialog(){
        $("dialog").style.display='block';
}
function hideDialog(){
        $("dialog").style.display='none';
}

var posX;
var posY;

function setPosition(e){
        if(!e){ 
                e = window.event
                posX = e.x
                posY = e.y
        }else{
                posX = e.clientX
                posY = e.clientY
        }
}

function dragBegin(e){
        setPosition(e)
        
        $('dialog').startx = posX
        $('dialog').starty = posY
        $('dialog').dragging = true

}
function drag(e){
        setPosition(e)

        if ($('dialog').dragging) {
                
                $('dialog').style.left = $('dialog').offsetLeft + (posX - $('dialog').startx)
                $('dialog').style.top = $('dialog').offsetTop + (posY - $('dialog').starty)
                $('dialog').startx = posX
                $('dialog').starty = posY
        }
        
}
function dragEnd(e){
        $('dialog').dragging = false
}

function init(){
        document.onmousemove = drag;
        document.onmouseup = dragEnd;
        $('dialog').onmousedown = dragBegin;
}

<div id="dialog" style="position: absolute; left: 300px; top: 200px; width: 300px; border: 1px solid black"  >
<table cellspacing="0" cellpadding="0" border="0" style="margin-top: 2px;">
<tbody>
<tr>

<td><img border="0" align="absmiddle" style="margin-bottom: 2px;" src="http://imgnews.naver.com/image/news/2006/reply/memo/n1_07.gif"/> </td>
<td style="padding-top: 2px;">TestTestTest</td>
</tr>
</tbody>
</table>

참고자료

문서

Tools