XHR(XML Http Request)의 동작방식과 호출 방법

XHR이란?

 

Microsoft가 만든 JavaScript 개체(object)

Extensible Markup Language - 확장 가능한 표시 언어 (html과 비슷하게 태그로 이루어짐)

 

보내는 방법

var xhr= new XMLHttpRequest();

참조: https://wherethelightis.tistory.com/14 [초보개발자의 공부공간]

 

 

받는 방법

xmlHttp.onreadystatechange = on_ReadyStateChange;

function on_ReadyStateChange() {
    /**
     * 0 = 초기화 전
     * 1 = 로딩 중
     * 2 = 로딩 됨
     * 3 = 대화 상태
     * 4 = 데이터 전송완료
     */
    // 4 = 데이터 전송완료
    if(xmlHttp.readyState == 4) {
        // 200 은 에러 없음= ( 404 = 페이지가 존재하지 않음 )
        if(xmlHttp.status == 200) {

            // 7. 데이터 처리
            /**
             * ----------------------------------------------------------------------------
             * 이 영역에서 서버에서 보낸 데이터를 타입(XML, JSON, CSV) 에 따라 처리
             * ----------------------------------------------------------------------------
             */
            console.log('이 부분에서 데이터를 처리합니다.');
        } else {
            console.log('처리 중 에러가 발생했습니다.');
        }
    }

}

출처: https://webclub.tistory.com/195 [Web Club]

비동기 방식

비동기(Asynchronous) 방식

비동기 방식은 동기 방식의 반대로 서버 요청에 대한 응답을 무작정 기다리는 것이 아니라 응답을 보낸 후 바로 다음 작업을 진행할 수 있습니다.

비동기 방식에서는 open() 메서드의 세 번째 매개변수로 false 대신 true 를 지정하기만 하면 비동기로 응답 받을 수 있습니다.

window.onload = function() {

// 1. 요청 객체 생성 : 웹 표준 지원 브라우저일 경우
var xmlHttp = new XMLHttpRequest();

// 2. 요청에 대한 응답 처리 이벤트 리스너 등록
xmlHttp.onreadystatechange = on_ReadyStateChange;

// 3. 서버로 보낼 매개변수 생성
var strParam = 'id=jaehee&pw=1234';

// 4. 클라이언트와 서버 간의 연결 요청 준비(open() 메서드 이용)
xmlHttp.open('GET','test.jsp?' + strParam, true);

// 5. 실제 데이터 전송(send() 메서드 이용)
xmlHttp.send('id=jaehee&pw=1234');

// Transmit ::: 동기/ 비동기 실행 테스트
alert('전송 시작');

};

// 6. 응답처리
function on_ReadyStateChange() {
// 4 = 데이터 전송완료
if(xmlHttp.readyState == 4) {
// 200 은 에러 없음= ( 404 = 페이지가 존재하지 않음 )
if(xmlHttp.status == 200) {
// 7. 데이터 처리
// 이 영역에서 서버에서 보낸 데이터를 타입(XML, JSON, CSV) 에 따라 처리
console.log('이 부분에서 데이터를 처리합니다.');
} else {
console.log('처리 중 에러가 발생했습니다.');
}
}

}

출처: https://webclub.tistory.com/195 [Web Club]

 JSON(JavaScript Object Notation)이란?

• JSON은 경량(Lightweight)의 DATA-교환 형식
• Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
• JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.
• 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.

출처: https://nesoy.github.io/articles/2017-02/JSON