Ajax (1) - Intro

이번 포스트는 이고잉님의 'Ajax' 강의를 듣고 정리한 내용입니다.

https://opentutorials.org/course/3281

Ajax - 생활코딩

 

 

웹페이지에서 일부 정보만 달라졌음에도 불구하고 전체 페이지를 리로드하는 것은 효율적이지 않다.

구글 검색창을 생각해보면 내가 검색창에 a만 쳤는데도 화면이 다시 리로드 된다면..

내 apple iphone release 라고 가정했을때, 페이지가 무려 18번 리로드 되어야 한다.

하지만 전체 페이지는 그대로 있고 검색창 부분만 달라진다면 얼마나 효율이 높을까?

메일을 받을때도 계속 페이지 전체를 리로드하는 게 아니라 받은 메일함만 업데이트 된다면 훨씬 효율적이겠지!

(네이버 로그인창 부분을 상상해도 좋다)

 

이렇게 웹 페이지 전체를 리로드하지 않고 웹서버에 필요한 부분만 정보를 요청해서

부분적인 정보만 갱신해주는 기술을 Ajax라고 한다!

 

 

웹 브라우저가 Ajax를 이용해서 웹서버와 통신하면,

페이지 리로드를 줄여서 사용자의 관심이 분산되지 않아 사용자 경험이 향상되고,

서버측에서도 감당해야하는 비효율이 훨씬 줄어든다!

 

 

https://www.w3schools.com/xml/ajax_intro.asp

 

 

간단하게 Ajax가 작동하는 방식을 정리해보자면

 

1. 웹 페이지에 event가 발생한다 (페이지가 로드 되거나, 사용자가 어떤 버튼을 눌렸거나..)

2. JavaScript에 의해서 XMLHttpRequest라는 Object가 만들어진다.

3. 이 XMLHttpRequest Object가 웹 서버에 Reqeust를 보낸다.

(인터넷을 통해 전달됨)

4. 서버가 Request를 process 한다.

5. 서버가 웹 페이지에 Response를 돌려 보낸다.

(인터넷을 통해 전달됨)

6. 서버가 보내준 Response를 자바스크립트가 읽고 처리한다.

7. 페이지 컨텐츠가 업데이트 된다. 

 

(출처:https://www.w3schools.com/xml/ajax_intro.asp)

 

 

 

 

 

 

 

 

 

 

 

Ajax는 1999년 마이크로 소프트가 처음으로 Internet Explorer에 탑재한 기술이다.

당시에는 이 기술에 이름조차 없었다. 

꽤 오랜시간 이 기술은 빛을 보지 못하고 있었는데,

5년이 지난 2004년 Google이 Gmail 서비스를 발표한다!
이 Gmail 서비스는 (마치 데스크탑 앱처럼) 페이지 리로드 없이 받은 정보함을 보여준다.

 

이 것은 많은 사람들의 웹에 대한 개념을 흔들어 놓는 혁명적인 사건!!!!!!!

웹에 대한 고장 관념이 아예 변해버린 것이다.

 

Gmail 서비스를 통해 Ajax 기술의 진가 세상에 알려졌고,

지금의 이름 Ajax (Asynchronous JavaScript And XML)을 가지게 되었다.