Ajax문법

Ajax는 빠르게 동적 웹페이지를 만들기 위한 기술입니다. Ajax에서는 서버와 적은 양의 데이터를 교환 하여 비동기적으로 웹페이지를 업데이트할 수 있습니다. 이것은 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트할 수 있다는 것을 의미합니다.

오래전에 Ajax를 쓰지 않을 때는 아주 일부만 내용을 변경한다고 하더라도 전체 페이지를 다시 로드해야 했습니다. 지금은 유튜브, 구글, 페이스북 등 너무도 많은 곳에서 Ajax를 사용하고 있습니다.

​Ajax가 어떻게 동작하는지 확인해 보겠습니다.

 

Ajax는 웹서버와 통신하고 데이터를 검색하기 위해 XMLHttpRequest를 이용하며 서버에서 가져온 데이터를 이용하고 화면에 출력하기 위해 Javascript와 DOM을 이용합니다. Ajax의 핵심은 XMLHttpRequest입니다. 모든 브라우저에서 이 객체를 지원하고 있으며 이 객체는 서버와 데이터를 교환하는데 사용됩니다. 자 이제 Ajax에 필요한 내용을 살펴보도록 하겠습니다.

 

[[XMLHttpRequest객체를 생성]]

변수 = new XMLHttpRequest()

 

​[[Ajax의 이벤트 처리]]

Ajax를 구현할 때 "onreadystatechange"에 대한 이벤트 처리를 해 주어야 합니다. 서버쪽으로 요청을 보내고 응답에 따라 내용을 구현할 수 있도록 XMLHttpRequest의 상태값에 대한 정보를 갖고 있는 속성으로 readyState라는 속성이 지원됩니다.

다시 정리해보도록 하겠습니다. XMLHTTPRequest는 다음과 같이 중요한 세 가지의 속성을 갖고 있습니다.

속성명	설명
onreadystatechange	함수를 자동으로 호출하며 readyState의 값을 변경 합니다.
readyState	XMLHttpRequest의 상태가 저장되면 0에서 4까지 변경됩니다. 0: request가 초기화되지 않은 상태 1: 서버와 연결이 된 상태 2: 요청을 받은 상태 3: 요청을 처리하고 있는 상태 4: 요청처리가 끝나고 응답 대기 상태
status	200 : 정상완료 404 : 페이지가 존재하지 않는 경우

 

onreadystatechange에 대한 처리는 서버의 상태에 따라 어떻게 처리될지 구현해야 하며 readyState가 4이거나 status가 200인 경우 응답이 정상적으로 준비된 상태이므로 원하는 작업이 처리될 수 있도록 구현해야 합니다.

onreadystatechange readyState의 다섯 값에 대해 한 번씩 총 다섯번 반응합니다.  

 

[[서버에 요청 보내기]]

XMLHttpRequest객체의 open()과 send()를 이용하여 서버에 요청을 보낼 수 있습니다.

메소드의 매개변수로 지정할 수 있는 값은 다음과 같습니다.

메소드명	설명
open(method,url,async)	request에 대한 명세를 나타냅니다. method : GET이나 POST등  request타입 url: 요청할 서버의 url async: true나 false           true(asyncronous)           false(synchronous)
send()	GET방식으로 서버에 요청을 보낼때 사용
send(문자열)	POST방식으로 서버에 요청을 보낼때 사용

​GET방식은 POST 방식 보다 간단하고 빠르게 동작하며 대부분의 경우에 사용할 수 있습니다. POST 방식을 이용해야 하는 경우는 다음과 같습니다.

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

 - POST는 크기의 제한이 없으므로 많은 양의 데이터를 서버에 보내는 경우

 - POST는 GET보다 강력하고 안전하므로 사용자가 입력한 알 수 없는 값이

   포함된 값​을 전송하는 경우 

 

​[[Ajax응답]]

​서버로 부터 받은 응답을 처리하기 위해 XMLHttpRequest객체의 responseText와 responseXML속성을 이용합니다.

 - responseText : String데이터를 get으로 응답받은 경우 사용

 - response​XML : XML데이터를 get으로 응답받은 겨우 사용