jquery Ajax 기초 1

Ajax란 Asynchronous JavaScript and XML 약자로 전체페이지를 다시 로딩하지 않고 부분적으로 서버와 데이터 교환을 하는 것입니다. 취미 삼아 만드는 사이트라 지금까지 ajax 의미도 모르면서 남의 코딩만 베껴서 자바스크립트로 ajax를 하다가, 또 jquery로 하다가 그냥 대충 되기만 하면 장땡이지 하는 식으로 사이트를 구축해 왔습니다. 갑자기 반성모드.. 

콘솔창을 보면 항상

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

요런 말이 느낌표와 함께 뜨는 것이 신경쓰였으나 그냥 넘어갔는데 결국 발목을 잡히네요.. 

잘되고 있었는데 갑자기 ajax로 구현한 페이지가 로딩이 되지 않는 겁니다. 사이트 구축하면서 느낀거는 대충 훑고 지나간 공부는 반드시 다시 공부하게 된다는 겁니다.

사용자의 경험에 안 좋은 영향을 미치기 때문에 메인쓰레드에서 Synchronous XMLHttpRequest 가 더 이상 사용되지 않게 될거다.

정도로 해석되는 거겠죠? 영어도 항상 발목을 잡습니다. 영어는 정말...정말..  공부해 두어야 겠더군요.

참조사이트에는 더 이상 Synchronous XMLHttpRequest를 지원하지 않겠다. 그러니 async를 false로 설정해 사용하지 말라 라고 되어 있다고 하네요.

어차피 jquery도 자바스크립트 라이브러리이니, jquery로 사용하던 ajax를 그냥 자바스크립트로 코딩을 고쳐 쓸 까 하다가 이 기회에 jquey로 하는 ajax도 공부해 두려고 합니다. 당연히 자바스크립로 사용해도 되나 제이쿼리로 사용하는 것이 더 쉽다고 합니다. 공부하는 입장에서는 어떤 부분이 쉬운것인지 알기 어려웠습니다. 이제부터 정리해 가면 좀 알게 될까요?

우선 자바스크립트에서 ajax를 사용하는 방법부터 정확히 이해하고자 정리해 두겠습니다. 

ajax란 앞서 언급했듯이 Asynchronous JavaScript and XML의 약자입니다. 비동기적 자바스크립트와 xml이라는 것인데요, 우선 동기적과 비동기적이라는 말의 의미부터 정리하겠습니다. 

어떤일을 동기적으로 처리한다는 것은 요청하고, 응답이 끝날 때까지 대기하고, 응답이 오면 다음 업무를 처리하는 방식입니다. 비동기적으로 처리한다는 것은 요청을 하고, 요청한 결과가 나오지 않은 상태에서 바로 다음 일을 수행하는 방식입니다. 결과는 비동기적으로 진행된다는 것이겠죠.

ajax의 핵심 기술은 마이크로소프트에서 처음 개발한 xhr 객체(XMLHttpRequest)객체라고 합니다. xhr객체를 이용해서 ajax를 실현합니다.

다음 포스팅에서..이어 가야겠군요..