Pure Javascript의 AJAX

Asynchronous Javascript and XML.

비동기 웹 애플리케이션 제작에 사용되는 웹 개발 기법.

웹 페이지 전체를 새로고침하지 않고도 필요한 데이터만 받아 갱신 가능.

그만큼 자원과 시간을 아낄 수 있고, 속도 향상에 도움이 된다.

 

1. 클라이언트에서 XMLHttpRequest 객체를 생성하여 서버로 보낸다.

2. 서버에서 받은 메시지에 해당하는 정보를 클라이언트로 다시 보낸다.

3. 클라이언트에서 서버로부터 응답 받은 정보를 특정 영역에 뿌려준다.

 

가장 핵심은 서버로부터 데이터를 전송받을 때 사용되는 XMLHttpRequest 객체.

 

XMLHttpRequest 객체 생성하기

let xhttp;
if(window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
    // IE5, IE6 일때
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

AJAX 서버 요청 메서드

메서드	설명
open(method, url, async)	요청 타입을 정한다. method : 요청 타입(GET 또는 POST) url : 서버(혹은 파일) 위치 async : true(비동기) / false(동기) AJAX를 사용하려면 무조건 true여야 한다.
send()	서버로 요청을 보낸다(GET 방식에서 사용)
send(string)	서버로 요청을 보낸다(POST 방식에서 사용)

GET과 POST의 차이

GET은 POST보다 빠르고 단순하다. Querystring을 이용한다.

반면

서버에 있는 파일이나 데이터베이스를 업데이트하는 경우

서버로 많은 양의 데이터 전송이 필요한 경우(POST 방식에는 사이즈 제한이 없다)

전송하는 데이터의 보안이 필요한 경우

POST 방식을 사용해야 한다.

 

GET 요청 보내기

xhttp.open('GET', 'dome_get.asp', true);
xhttp.send();

그냥 이렇게만 하면, 이미 캐시된 결과가 보여질 수 있기 때문에

그런 경우에는 다음과 같이 unique ID를 함께 삽입해주면 된다.

xhttp.open('GET', 'dome_get.asp?t=' + Math.random(), true);
xhttp.send();

요청을 보낼 때 정보를 URL에 삽입해줄 수 있다.

xhttp.open('GET', 'dome_get.asp?fname=Henry&lname=Ford', true);
xhttp.send();

 

POST 요청 보내기

HTML POST 요청을 보내려면, setRequestHeader()를 이용하여 HTTP 헤더 정보를 넣어줘야 한다.

send() 메서드에는 보내려는 데이터를 삽입해주면 된다.

xhttp.open('POST', 'demo_post.asp', true);
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.send('fname=Henry&lname=Ford');

 

XML Request의 readyState 값

코드	상태	설명
0	UNINITIALZED	XMLHttpRequest 객체를 생성하였지만, 초기화되지 않았다. open()메서드 실행 전
1	LOADING	XMLHttpRequest 객체를 생성하였고, open() 메서드를 수행하였지만 send() 메서드를 수행하지 않은 상태
2	LOADED	Send()메서드를 수행하였지만, 서버가 처리를 준비하고 있는 상태
3	INTERACTIVE	처리를 완료하지 않았지만, 진행 중인 상태
4	COMPLETED	처리를 완료한 상태

 

XML Request의 status 값

숫자	설명
100	Continue
101	Switching protocols
200	OK
201	Created
202	Accepted
203	Non-Authoritative Information
204	No Content
205	Reset Content
206	Partial Content
300	Multiple Choices
301	Moved Permanently
302	Found
303	See Other
304	Not Modified
305	Use Proxy
307	Temporary Redirect
400	Bad Request
401	Unauthorized
402	Payment Required
403	Forbidden
404	Not Found
405	Method Not Allowed
406	Not Acceptable
407	Proxy Authentication Required
408	Request Timeout
409	Conflict
410	Gone
411	Length Required
412	Precondition Failed
413	Request Entity Too Large
414	Request-URI Too Long
415	Unsupported Media Type
416	Requested Range Not Suitable
417	Expectation Failed
500	Internal Server Error
501	Not Implemented
502	Bad Gateway
503	Service Unavailable
504	Gateway Timeout
505	HTTP Version Not Supported

 

서버로부터 AJAX 응답하기

서버로부터 응답을 받기 위해서는 XMLHttpRequest 객체의 responseText 또는 responseXML 속성을 사용해야 한다.

속성	설명
responseText	응답 데이터를 string으로 받는다.
responseXML	응답 데이터를 XML로 받는다.

 

AJAX의 onreadystatechange 이벤트

XMLHttpRequest 객체는 상태정보를 가지고 있는데, readyState 속성이 그 값을 가지고 있다.

이 상태 정보를 통해, 우리는 응답이 온 상태인지, 정상적으로 왔는지 등의 여부를 확인할 수가 있다.

이 readyState가 변할 때마다 발생하는 이벤트가 바로 onreadystatechange 이벤트.

속성	설명
onreadystatechange	readyState 속성값이 변할 때마다 자동으로 호출될 함수 또는 함수명을 저장
readyState	XMLHttpRequest 객체의 상태를 가진다. 0 ~ 4 의 값을 가진다. 0: 요청이 초기화되지 않음. 1: 서버와 연결됨. 2: 요청이 받아들여짐 3: 요청이 진행중 4: 요청완료 및 응답완료
status	200: 정상 404: 페이지를 찾을 수 없음. ...

예를 들어, onreadystatechange 이벤트가 발생하였으며 readyState값이 4이고, status가 200이면

내가 보낸 요청이 정상적으로 처리되어 응답이 온 것.

function example(){
	// XMLHttpRequest 객체 생성
    var xhttp = new XMLHttpRequest();
    
    xhttp.onreadystatechange = function(){
    	// 서버로부터 응답을 받고나서 실행될 함수
        if(xhttp.readyState == 4 && xhttp.status == 200){
            document.getElementById('example_tag').innerHTML = xhttp.responseText;
        }
    };
    
    // URL에 데이터 추가해서 요청 보내기
    xhttp.open('GET', 'getcustomer.asp?q=' + str, true);
    xhttp.send();
}

요런 식으로 흘러간다고 보면 된다.

 

 

참고 :

UI개발자 이명종

[Ajax] Ajax란 무엇인가?