Javascript ajax 기본

웹페이지에서 비동기식 페이지를 전환하지 않고 다른 데이터를 갖고 오는 기법을 Ajax 라고 한다. 일반적으로 웹 페이지에서 다른 데이터를 수신하려면 깜빡이면서 다른 페이지로 전환을 해야되는데 AJAX 를 이용하면 부드럽게 같은페이지에서 움직임이 일어난다.

AJAX  기본 지식

객체 생성

Ajax 를 하가 위해 XMLHttpRequest 생성자를 통해 객체를 생성한다

 

통신방식

통신방식을 설정한다.

전송

readyState 속성

객체가 통신단계를 나타내주는 속성 0~4까지 있다.
0 – open 메소드 호출 전
1 – open 메소드 호출~ send 메소드 호출 사이
2 – 보낸 요청에 대한 응답 헤더가 수신된 직후
3 – 응답의 바디부분이 수신중
4 – 수신완료

onreadystatechange 속성

readystate 가 변할때바다 호출되는 콜백함수다.
req.onreadystatechange = function(){~~~~}
이런 식으로 호출하면 readystate 상황이 변할때마다 원하는 기능을 불러올 수 있다.

status 속성

HTTP response의 응답 헤더에 기록된 코드(통신상태)

예제 1.

위의것들을 이용해서 아래와 같은 AJAX  통신을 할 수 있다.

EX2

data.txt 파일에는 객체들이 들어있는 배열데이터가 있다.
for in 문을 통해서 하나하나 꺼내서 붙여준다.

가 들어있다.

의견을 남겨주세용