[JQuery] 이벤트, AJax

이벤트

 - 웹 페이지에서의 다양한 종류의 상호작용

 

 - JavaScript를 사용하여 DOM에서 발생되는 이벤트를 감지하고 대응 가능

 

 

버블링과 캡쳐링

 - 캡쳐링 : 부모 HTML로부터 이벤트 근원지인 자식요소까지 검사하는 것

 

 - 버블링 : 이벤트 발생 자식 요소부터 부모요소까지 올라가면서 이벤트를 검사하는 것

 

 * 이벤트 캡쳐링 (버블링) 에 캡쳐 (버블) 속성의 이벤트 핸들러가 등록되어 있으면 수행

 

 

마우스 이벤트

 - 계층 구조를 따라 버블링

 

 

키보드 이벤트

- 키보드 조작은 운영체제의 영향을 받으므로 특정 키가 이벤트 핸들러에게 전달되지 않을 수 있음

 

 - 키보드 커서가 나타내는 위치부터 window 객체까지 버블링

 

 - 키보드 커서가 나타내는 요소가 없다면 Document에서 이벤트가 발생

 

 

Frame 이벤트

 - DOM Document에 대한 이벤트가 아닌 Frame에 대한 이벤트

 

 - onload : 문서 및 자원들이 모두 웹 브라우저에 적용되면 이벤트가 수행됨

   unload : 사용자가 브라우저를 떠날 때 이벤트가 발생

 

 

foam 이벤트

  - 여러 웹 브라우저에서 가장 안정적으로 동작하는 이벤트

 

 - submit : foam 이 전송될 때 발생

 

 - reset : foam이 초기화될 때 발생

 

 - submit과 reset은 이벤트 핸들러에서 취소 가능

 

 

이벤트 처리

등록

 이벤트 핸들러를 등록 : 어떤 입멘트에 대한 작업을 등록하는 행위

 

 - HTML요소의 내부에서 직접 이벤트 핸들러를 등록

   -> HTML코드에 JavaScript코드가 침범한다는 단점

<div onclick='alert("hello")'>Click Me</div>

 

 - JavaScript에 이벤트 핸들러를 등록

   -> HTML코드를 깔끔하게 유지

   -> 이벤트 핸들링 대상 DOM을 선택 후 이벤트 핸들러 등록

<script type="text/javascript">
document.getElementById("div1").onclick = function(){
alert("hello");
}
</script>

 

버블링과 캡쳐링

 - 캡쳐링 : 이벤트가 발생한 요소를 포함하는 부모 HTML로부터 이벤트 근원지인 자식요소까지 검사하는 것

 

 - 버블링 : 이벤트가 발생 요소부터 요소를 포함하는 부모요소까지 올라가면서 이벤트를 검사하는 것

 

 

AJax

 

AJax와 관련된 JQuery 커맨드

load (url, parameters, callback)

 - URL과 매개변수로 Ajax요청을 전송

 

 - callback 함수는 요청 완료시 호출

 

 - 응답 텍스트는 일치하는 엘리먼트의 컨텐츠를 대체

 

 

 

AJax 실습

 * jsp파일을 통한 서버간의 상호작용은 셋팅 문제로 제대로 진행되지가 않았다.

   이렇게 저렇게 해결해보려했는데 쉽지 않다. 나중에 다 배우고 꼭 다시한번 해결해봐야한다.

 - index.html을 기반으로 dictionary.js를 통해 a.html, b.json, c.js, d.xml, server3.jsp를 통해

   A, B, C ...의 버튼을 클릭 시 상호작용을 통해 내부의 데이터를 출력함

 

$(function () {
    $('#letter-a a').click(function () {
        $('#dictionary').hide().load('a.html', function () {
            $(this).fadeIn();
        });
        return false;
    })
})

//step2 : json
// $(function () {
//     $('#letter-b a').click(function () {
//         $.getJSON('b.json', function (data) {//callback함수의 파라미터 변수에는 서버의 결과값이 온다.
//             //결과값 [{}, {}] => 배열
//             $('#dictionary').empty();
//             $.each(data, function (index, item) {
//                 var html = '<div class = "entry">'; //json에 entry key 값
//                 html += '<h3 class="term">' + item.term + '</h3>';//json에 term key 값
//                 html += '<div class="part">' + item.part + '</div>';
//                 html += '<div class="definition">' + item.definition + '</div>';
//                 html += '</div>';
//                 $('#dictionary').append(html);
//             });
//         });
//         return false;
//     });
// })

//step2_1 : getJSON() => ajax() 변환 //내림차순 정렬
$(function () {
    $('#letter-b a').click(function () {
        $.ajax({
            url: 'b.json',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                $('#dictionary').empty()
                data.sort(function (a, b) {
                    if (a.term < b.term)
                        return 1;
                    else if (a.term > b.term)
                        return -1;
                    else
                        return 0;
                });//end sort
                $.each(data, function (index, item) {
                    var html = '<div class = "entry">'; //json에 entry key 값
                    html += '<h3 class="term">' + item.term + '</h3>';//json에 term key 값
                    html += '<div class="part">' + item.part + '</div>';
                    html += '<div class="definition">' + item.definition + '</div>';
                    html += '</div>';
                    $('#dictionary').append(html);
                });
            }//success
        })//end ajax
    })//end click
})//end main

// step3
$(function () {
    $('#letter-c a').click(function () {
        $.getScript('c.js');
        return false;
    });
});

//step4
$(function () {
    $('#letter-d a').click(function () {
        $.get('d.xml', function (data) {
            $(data).find('entry').each(function (index) {
                let $entry = $(this);
                var html = '<div class="entry">';
                html += '<h3 class"term">' + $entry.attr('term') + '</h3>';
                html += '<div class="part">' + $entry.attr('part') + '</div>';
                html += '<div class="definition">' + $entry.find('definition').text() + '</div>';
                html += '</div>';
                $('#dictionary').append(html);
            })
        });
        return false;
    })
});

//step5
$(function () {
    $('#letter-e a').click(function () {
        $.get('server3.jsp', {'term': $(this).text()}, function (data) {
            $('#dictionary').text(data);
        });
        return false;
    })
});

//step6
// 통합 함수의 ajax(), <form> 태그에서의 데이터 전송
$(function () {
    $('#letter-f form').submit(function () {
        $.ajax({
            url: 'server3.jsp',
            type: 'post',
            data: $(this).serialize(),
            // serialize() : 텍스트를 문자열로 만든다.
            dataType: 'text',
            success: function (data) {
                $('#dictionary').text(data);
            }
        });
        return false;
    });
});

<dictionary.js>

chap06.zip

0.09MB

 

 

Q. MOCK_DATA.json과 dataset.xml 파일 내부의 data를 화면에 출력

// //step2_1 : getJSON() => ajax() 변환 //내림차순 정렬
// $(function () {
//     $('#letter-b a').click(function () {
//         $.ajax({
//             url: 'b.json',
//             type: 'get',
//             dataType: 'json',
//             success: function (data) {
//                 $('#dictionary').empty()
//                 data.sort(function (a, b) {
//                     if (a.term < b.term)
//                         return 1;
//                     else if (a.term > b.term)
//                         return -1;
//                     else
//                         return 0;
//                 });//end sort
//                 $.each(data, function (index, item) {
//                     var html = '<div class = "entry">'; //json에 entry key 값
//                     html += '<h3 class="term">' + item.term + '</h3>';//json에 term key 값
//                     html += '<div class="part">' + item.part + '</div>';
//                     html += '<div class="definition">' + item.definition + '</div>';
//                     html += '</div>';
//                     $('#dictionary').append(html);
//                 });
//             }//success
//         })//end ajax
//     })//end click
// })//end main

// //step4
// $(function () {
//     $('#letter-d a').click(function () {
//         $.get('d.xml', function (data) {
//             $(data).find('entry').each(function (index) {
//                 let $entry = $(this);
//                 var html = '<div class="entry">';
//                 html += '<h3 class"term">' + $entry.attr('term') + '</h3>';
//                 html += '<div class="part">' + $entry.attr('part') + '</div>';
//                 html += '<div class="definition">' + $entry.find('definition').text() + '</div>';
//                 html += '</div>';
//                 $('#dictionary').append(html);
//             })
//         });
//         return false;
//     })
// });

//step6
// 통합 함수의 ajax(), <form> 태그에서의 데이터 전송
$(function() {
    $.ajax({
        url:"MOCK_DATA.json",
        dataType:"json",
        success:function(data) {
            $("#json").append($("<h2>json파일 출력</h2>"))
            if(data.length > 0) {
                var tb = $("<table />");
                for(var i in data) {
                    var $id = data[i].id;
                    var $first_name = data[i].first_name;
                    var $last_name = data[i].last_name;
                    var $email = data[i].email;
                    var $gender = data[i].gender;

                    var row = $("<tr />").append(
                        $("<td />").text($id),
                        $("<td />").text($first_name),
                        $("<td />").text($last_name),
                        $("<td />").text($email),
                        $("<td />").text($gender)
                    );

                    tb.append(row);
                }
                $("#json").append(tb);
            }
        }
    });
    return false;
});

$(function() {
    $.ajax({
        url:"dataset.xml",
        dataType:"xml",
        success:function(data) {
            var $data = $(data).find("record");
            $("#xml").append($("<h2>xml파일 출력</h2>"))
            if($data.length > 0) {
                var tb = $("<table />");
                $.each($data, function(i, o) {
                    var $id =
                        $(o).find("id").text();

                    var $first_name =
                        $(o).find("first_name").text();

                    var $last_name =
                        $(o).find("last_name").text();

                    var $email =
                        $(o).find("email").text();

                    var $gender =
                        $(o).find("gender").text();

                    var row = $("<tr />").append(
                        $("<td />").text($id),
                        $("<td />").text($first_name),
                        $("<td />").text($last_name),
                        $("<td />").text($email),
                        $("<td />").text($gender)
                    );
                    tb.append(row);
                });
                $("#xml").append(tb);
            }
        }
    });
});

<mission_js.js>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script src="mission_js.js">
    </script>
</head>
<body>
<div id="json"></div>
<div id="xml"></div>
</body>
</html>

<mission.html>