Ajax

ajax를 사용하면서 매번 개발 과정에 따라 다양한 자료형을 주고 받았다.

그런데 항상 사용하다 보면 문제상황을 마주치는데 바로바로 문제점을 파악을 못하는 것 같아 정리하려고 한다.

​

​

Ajax

: Asynchronous JavaScript and XML 의 약자로 데이터를 새로 불러올때 화면을 전부 로딩하지 않고도

웹페이지의 일부만을 갱신해서 빠르게 동적인 웹페이지를 개발할 수 있도록 하는 기술이다.

​

​

원래 서버와 연결하여 새로운 데이터를 가지고 올때면 화면이 전부 리로딩되어 화면이 깜박하는 것을 볼 수있다.

하지만 Ajax를 사용하면 화면을 깜박이지 않고 동적으로 데이터를 가지고 올 수있다.

​

​

---

1. Ajax 동작원리

​

기존에는 동적 페이지를 만들때 HttpRequest 객체를 생성해서 요청을 보내고

서버에서 처리를 한 다음 응답객체를 생성해서 처리한 데이터를 전송해서 웹페이지를 전부 다시 로딩했다.

​

하지만 AJax는 이와 다르다.

​

Ajax는 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출된다.

자바스크립트는 HttpRequst 객체를 생성하는 것이 아니라 XMLHttpRequest 객체를 생성하여 데이터를 요청한다.

​

이때 웹 브라우져는 요청을 보내고 서버의 응답을 기다리지 않고 다른 작업을 할 수있다.

요청을 기다리지않고 다른 작업을 처리하는 것을 비동기 방식이라고 한다.

​

서버는 전달받은 XMLHttpRequest 객체로 Ajax 요청을 처리하고 결과를 html, XML, JSON 등의 형태로 다시 웹브라우져에 전달한다.

이때 전달되는 데이터는 새로운 페이지 전체가 아니라 필요한 데이터만 전달한다.

마지막으로 받은 데이터를 이용해 화면을 갱신한다.

​

​

​

2. XMLHttpRequest

웹 브라우져가 내장하고 있어 new 예약어로 생성할 수있다.

​

​