[Ajax] - Ajax의 개념(동기식과 비동기식 차이점, 비동기식 단점)

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

< Ajax 개요>

Asynchronus JavaScript And Xml의 약자로 
서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 한느 기법 
우리가 기존에 a 태그로 요청 및 form을 통해 요청했던 방식은 동기식 요청방식 
=> 응답페이지가 돌아와야 볼 수 있음(페이지 화면 깜박거림) 
비동기식 요청을 보내기 위해서는 AJAX라는 기술이 필요함 

 

< 동기식 / 비동기식 >

- 동기식 : 요청 처리 후 그에 해당하는 응답 페이지가 돌아와야만 그 다음 작업 가능 
만약 서버에서 호출된 결과까지의 시간이 지연되면 무조건 계속 기다려야함(흰 화면만 보여지게됨) 
전체 페이지가 리로드됨(새로고침 즉, 페이지가 기본적으로 깜빡거림) 

- 비동기식 : 현재 페이지를 그대로 유지하면서 중간중간마다 추가적인 요청을 보내줄 수 있음 
요청을 한다고 해서 다른페이지로 넘어가지 않음(현재 페이지 그대로) 
요청을 보내놓고 그에 해당하는 응답이 돌아올때까지 현재페이지에서 다른작업을 할수 있음.
ex) 검색어 자동완성기능 or 아이디 중복체크기능 등

* 비동기식 단점
- 현재 페이지에 지속적으로 리소스가 쌓임 => 페이지가 느려질수있음 ★가장중요
<!-- 네버 스크롤기능 쓰지않기(효율적이면 가능:조건식 잘꾸미기; 페이지 마지막 부분사용 등) -->
- 페이지내 복잡도가 증가할 수 있다 => 유지보수가 힘들어짐
- 요청 후 들어온 응답데이터를 가지고 현재페이지에서 새로운 요소를 만들어서 뿌려줘야함
=> DOM요소 생성구문을 숙지 못할시 힘들수가 있다.