AJAX 통신 기초

1. AJAX 통신이란?

   - Asynchronous Javascript And XML

   - 비동기로 서버와 데이터를 주고 받는 javascript 기술!

   - XMLHttpRequest 객체가 핵심. XMLHttpRequest는 서버측 javascript와 통신하기 위한 ajax의 핵심 기술이며 '비동기' 통신을 가능케 한다.

     즉,  ajax 통신을 사용하게 되면 페이지를 새로 리로딩 하지 않아도 데이터가 슉슉 바뀌는 것!!

   - ajax가 적용된 페이지는 전체 HTML이 아닌, XML이나 JSON 형식으로 구성된 새로운 데이터만을 XMLHttpRequest 객체를 통해 받아오기

     때문에, 사용자에게 페이지 이동없이 새로운 내용을 제공할 수 있다.

  

  Q. 비동기 통신을 사용하기 전, 기존 통신의 문제점은?

  웹 페이지에는 요청/응답의 관계가 성립된다. 기존 웹페이지 통신 방식에서는 응답 시, 페이지 redirect 처리가 필수였다. 

  때문에 사용자 입장에서는 모든 처리마다 페이지 리로딩이 발생했다. 조그만한 변경사항을 보여주기 위해, 전체 HTML 코드를

  재전송해야하는 비효율적인 처리 방식이다. --> 과도한 트래픽 발생, 서버 유지비용 증가..

2. $.ajax() 함수

    - ajax() 함수에 웹 서버로 보내기 위한 요청 설정 정보와 통신이 성공했을 경우 실행 될 함수,  통신에 실패했을 경우 실행 될 함수를 설정한다.

        

$.ajax({     "url": "접속할 페이지 주소",     "dataType": "전송 데이터 type(ex: json)",     "type": "get/post",     "data": "전송할 data",     "success": function(data) {                   .... // 통신 성공시 실행 함수                  }     });

__________________________________________________________________________________________________________________________________________________________

** 본 포스팅에 대해 수정해야할 부분이나 추가 의견 등이 있으신 분들은 댓글 달아주세요. 언제나 환영입니다 :) 

** 본 포스팅은 아래의 reference 들을 참고하여 내용을 덧붙인 글입니다. 혹시, 문제가 되는 경우 알려주시면 조치하도록 하겠습니다.

** 본 포스팅을 reference 자료로 참고하실 분들은 출처를 꼭 밝혀주시기 바랍니다.

  - 책: [Javascript, jQuery, Ajax 완벽가이드], 저자: 주영아 이광호, 출판사: Interpress