ajax(Asynchronous JAvascript XML)

비동기적으로 도메인 내의 데이터(XML 형식)를 가져오는 기술
이 기술을 대부분 현재 화면 내부에서 일부분을 주기적으로 교체하기 위해서 사용했기 때문에 하나의 웹 페이지에서 전체 갱신없이 일부분의 데이터를 갱신하는 기술로 여겨집니다.

1.ajax 요청 방법

1) XMLHttpRequest 객체 생성

2) 요청 후 결과가 오면 호출되는 리스너를 등록(콜백함수를 등록)

데이터(csv, xml, json)를 정상적으로 받아오면 수행할 내용을 작성

3) 서버로 보낼 데이터(파라미터)를 생성

4) 요청

2.ajax 요청 객체 생성

IE: ActiveXObject("Microsoft.XMLHTTP") 로 생성
그 이외 브라우저: new XMLHttpRequest()로 생성

3.XMLHttpRequest 객체의 속성과 메소드

readyState: 한자리 정수로 객체의 상태를 나타내는 속성
- 1이면 객체 생성 직후이고 2이면 요청을 한 상태이고 3이면 서버에서 응답이 오고 있는 상태이고 4이면 응답 완료
status: 응답의 상태를 나타내는 코드 - 웹 과 관련된 개발자가 될 때는 외워야 합니다. 100번대: 처리 중 200번대: 정상 응답 300번대: 리다이렉트 중 - 결과 URL로 이동 중 400번대: 클라이언트 오류 500번대: 서버 오류
responseText: XML 형식을 제외한 데이터
responseXML: XML 데이터
onreadstateChange: readyState가 변경될 때 호출될 콜백 메소드 지정
open(요청방식, 요청주소, 비동기여부): ajax 요청 옵션 설정
send(파라미터): 실제 전송

4.ajax에서 주의 사항

ajax는 도메인(현재 프로젝트) 내의 데이터만 가져올 수 있음
외부 데이터를 가져와서 ajax로 사용하고자 하는 경우는 proxy를 구현해야 합니다.
proxy는 서버용 언어(Java 의 HttpURLConnection 클래스)로 데이터를 가져와서 넘겨주는 형태를 구현하는 것

5.텍스트 파일에서 데이터를 읽어와서 출력하기

1) 프로젝트의 WebContent 디렉토리에 텍스트 파일 1개 생성

data.txt

Database,Java,Web FrontEnd,Java Web Server Programming

2) ajax 요청 파일을 생성

ajax.html d

HTML, CSS, JavaScript

HTML: 웹 문서의 구조를 만들기 위해서 사용, 정적(만들면 변경이 안됨)
CSS: HTML 문서의 스타일을 변경하기 위해서 사용, 정적(만들면 변경이 안됨)
JavaScript: HTML 문서의 구조를 동적으로 변경하기 위해서 사용

HTML 과 JavaScript는 한 줄 씩 읽으면서 수행을 하고 CSS는 문서를 전부 읽고 화면에 출력되기 전에 적용을 합니다.
각각의 역할이 다르기 때문에 별도의 파일에 만들어서 읽어내는 구조를 취하는 것이 좋습니다.
최근의 Application 개발 기법에서는 대부분 화면구조를 나타내는 디자인 파일과 이 구조를 가지고 동적인 작업을 하는 소스코드를 분리해서 작업을 합니다.
Android 나 iOS(Mac OS 포함) 그리고 MS-Windows Programming이 이러한 방식을 취합니다.
이러한 방식이 만들 때는 복잡하지만 코드의 분리로 인해서 가독성이 높아져서 유지보수에 유리합니다.

ajax : 자바스크립트를 이용해서 도메인 내의 데이터를 비동기적으로 받아오는 기술

어제 프로젝트: https://github.com/itggangpae/web0210.git

<script>
        //ajax를 이용해서 data.txt 파일의 내용을 읽어서 disp 영역에 출력
        var disp = document.getElementById("disp");
        var request;        //ajax 객체 생성
        if (window.ActiveXObject) {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            request = new XMLHttpRequest();
        }

        request.open('GET', 'data.txt');     //요청 옵션을 생성 - data.txt를 GET 방식으로 요청

        setInterval(function(){         // 30초마다 계속 수행되는 타이머
            request.send('');    //요청을 전송 (계속 반복적으로 )
        }, 30000)

        //비동기 실행 - 콜백이 존재
        //비동기는 언제 종료될 지 몰기 때문에 종료된 후에 어떤 동작을 수행하고자 하면 콜백 메소드에 작성
        //callback : 어떤 이벤트가 발생하면 호출되는 메소드
        //파일을 읽는 부분도 마찬가지 - 파일을 읽어주세요 요청 - 파일을 전부 읽으면(load) 동작을 수행

        //콜백 메소드를 등록
        request.onreadystatechange = function() {
            //응답을 정상적으로 받 경우
            if (request.reayState = 4 && request.status >= 200 && request.status < 300) {
                //읽어온 데이터를 disp에 출력
                disp.innerHTML = request.responseText;
            }
        }
    </script>

json 파싱

자바스크립트에서는 JSON 문자열은 JSON.parse()에 대입하면 파싱을 수행해서 자바스크립트 객체로 리턴을 해줍니다.

data.json 파일 생성 
[{"name" :"javascript", "rank" : 1}, {"name":"java", "rank" :2}]

<script>
    //1.ajax 요청 객체 생성 - 반드시 1번 
    //2.ajax 요청 옵션을 생성 - 1번 이후에 3번보다 먼저 나오면 됨 
    //3.ajax 요청
    //4.상태변화가 생겼을 때 호출 될 콜백 메소드를 등록 - 1번 이후에 아무곳에서 작성해도 됨 
    //콜백(이벤트처리) 메소드는 순서와 상관없이 이벤트가 발생했을 때 호출되는 메소드 (비동기, 순서가 없다)
</script>

    <script>
        //1.ajax 요청 객체 생성 - 반드시 1번 
        var request;
        //if를 사용하는 이유  : IE와 다른브라우저가 ajax 요청 객체 생성 방법이 다름  
        if (window.ActiveXObject) {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            request = new XMLHttpRequest();
        }

        //2.ajax 요청 옵션을 생성 - 1번 이후에 3번보다 먼저 나오면 됨 
        request.open('GET', 'data.json');

        //3.ajax 요청
        request.send('');

        //4.상태변화가 생겼을 때 호출 될 콜백 메소드를 등록 - 1번 이후에 아무곳에서 작성해도 됨 
        //콜백(이벤트처리) 메소드는 순서와 상관없이 이벤트가 발생했을 때 호출되는 메소드 
        request.onreadystatechange = function() {
            //정상적으로 데이터를 받아오는 경우 
            if (request.readyState == 4 && request.status >= 200 && request.status < 300) {
                var res = request.responseText;     //받아온 문자열 - json 문자열
                alert(res);
            }
        }
    </script>

        request.onreadystatechange = function() {
            //정상적으로 데이터를 받아오는 경우 
            if (request.readyState == 4 && request.status >= 200 && request.status < 300) {
                var res = request.responseText;        //받아온 문자열 - json 문자열
                var result = JSON.parse(res);        //json 파싱 - 객체의 배열이 만들어진다. 
                var disp = document.getElementById("disp");   //배열의 경우 출력할 영역 찾기
                var html = ''
                for(var idx in result){            // 배열 순회 
                    html += "<p>" + result[idx].name + ':' + result[idx].rank + '</p>'
                }
                disp.innerHTML = html;
            }
        }

14.ajax