Ajax 시작

 

Ajax를 테스트하려면 웹 서버(Web Server) 필요

 

Apache Tomcat 9

(1) Web Server = 파일서비스

(2) WAS (Web Application Server)

- 기존에 scoop으로 설치해놓은 Tomcat 파워쉘로 실행

 

 

Ajax 관련 메서드

(제이쿼리 entry point 없이도 실행 가능)

 

- $.ajax() 메서드

$.ajax({
 // 1. 데이터 전송 및 요청할 외부 주소를 입력
 url: "전송 페이지"(action url),
 // 2. 전송 방식을 입력
 type: "전송 방식"(get, post 방식),
 // 3. 전송할 데이터 입력
 data: "전송할 데이터",
 // 4. 서버로부터 받아올 데이터 형식을 지정
 dataType: "요청한 데이터 형식"("html", "xml", "json", "text", "jsonp"),
 // 5. 데이터 전송 및 요청이 정상적으로 이뤄지면 함수가 실행됨.
 //    이때 매개변수(result)에는 요청한 데이터가 저장됨
 success: function(data){
   전송에 성공하면 | 실행될 코드;
 },
   error: function() {
   전송에 실패하면 실행될 코드;
   }
}); // .ajax

 

* Ajax로 JSON 데이터 바인딩하기

- mockaroo 사이트에서 가상 데이터 준비

    <script>
        $(() => {
            $.ajax({    // jQuery 라이브러리의 AJAx 핵심구현 메소드
                
                // 1. 로컬/원격 요청 URL 지정
                url: "json/MOCK_DATA.json",

                // 2. 요청한 문서의 타입(유형) 지정
                dataType: "json",

                // 3. 비동기 요청에 대한 응답이 성공적으로 왔을 때,
                // 자동으로 callback 되는 메소드
                success: function (data) {  // callback if succeeded
                    // console.clear(), console.group('success');
                    // console.log(data);

                    // console.groupEnd();

                    // JSON Binding into DOM tree.
                    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;

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

                            tb.append(row);
                        } // enhanced for-in
                        $(".wrap").append(tb);
                    }

                }, //success
                
                // 4. 비동기 요청에 대한 응답이 에러로 왔을 때,
                //    자동으로 callback 되는 메소드
                error: function (XHR) {  // callback if failed
                    console.group('error');
                    
                    console.log('$.ajax::error() invoked.');

                    console.log('\t+ XHR', XHR);   // XmlHttpRequest (내장)객체 - 비동기호출의 근간 

                    console.log('\t+ readyState:', XHR.readyState); // XHR의 상태코드값 출력
                    console.log('\t', XHR.status);                  // XHR의 상태메시지 출력
                    console.log('\t', XHR.statusText);              // Ditto.
                    // console.log('\t', XHR.statusCode());         // 웹서버의 응답 상태코드

                    console.groupEnd();                            
                }//error
            
            }); // ajax      
        }); // jq
    </script>

 

* Ajax로 XML 데이터 바인딩하기

    <script>
        $(() => {

            $.ajax({    // jQuery 라이브러리의 AJAx 핵심구현 메소드
                
                // 1. 로컬/원격 요청 URL 지정
                url: "http://localhost:8080/temp/persons.xml",

                // 2. 요청한 문서의 타입(유형) 지정
                type: "post",
                data: "name=Eunhye&age=28",             
                dataType: "xml",

                // XML 문서를 바인딩
                success: function (data) {  // callback if succeeded
                    console.clear(), console.group('success');
                    // console.log(data);

                    // 받아온 XML 문서에서, <person> 태그를 모두 찾아라!
                    let persons = $(data).find("person"); // 결과타입은? jQuery: Array-Like Object

                    if (persons.length > 0) {    // 1개 이상의 요소가 있다면,
                        let tb = $("<table>");   // 새로운 태그 생성
                            
                            // jQuery 배열객체의 모든 원소를 순회하는 제이쿼리 메소드
                            $.each(persons, function (i, person) {
                                console.log(`i: ${i}, person:`, person);
                            
                                // 각 학생의 정보항목들의 값을 획득
                                let id = $(person).find("id").text();  // <id>태그를 찾아서
                                let first_name = $(person).find("first_name").text();
                                let last_name = $(person).find("last_name").text();
                                let email = $(person).find("email").text();
                                let gender = $(person).find("gender").text();

                                let row = $("<tr>").
                                    append(
                                        $("<td>").text(id),
                                        $("<td>").text(first_name),
                                        $("<td>").text(last_name),
                                        $("<td>").text(email),
                                        $("<td>").text(gender)
                                    ); //.append : 하나의 <tr>태그가 완성
                                
                                // 위에서 완성시킨 <tr>태그를 <table> 태그의 하위노드로 추가
                                tb.append(row);

                            }); // $.each

                            $(".wrap").append(tb);
                    }// if
                }, //success
                
                // 4. 비동기 요청에 대한 응답이 에러로 왔을 때,
                //    자동으로 callback 되는 메소드
                error: function (XHR) {  // callback if failed
                    console.group('error');

                    console.log('\t+ XHR', XHR);   // XmlHttpRequest (내장)객체 - 비동기호출의 근간 

                    console.log('\t+ readyState:', XHR.readyState); // XHR의 상태코드값 출력
                    console.log('\t', XHR.status);                  // XHR의 상태메시지 출력
                    console.log('\t', XHR.statusText);              // Ditto.
                    // console.log('\t', XHR.statusCode());         // 웹서버의 응답 상태코드

                    console.groupEnd();                            
                }//error
            
            }); // ajax    
        }); // jq
    </script>

 

* ajax 의 local lifecycle method's callback order

(1) beforeSend                
(2) dataFilter (if succeed)
(3) success   (if succeed)
(3) error   (if failed)          
(4) complete