[JavaScript] AJAX

 

 

 

Asynchronous JavaScript and XML 의 약자로, 비동기적으로 서버와 통신하는 방식을 의미한다.

 

지금까지는 서버로부터 정보를 전달받은 경우 페이지를 리로드해서 사용자에게 정보를 보여줘야 하지만, ajax 방식을 사용하면 페이지를 리로드 하지 않고도 정보를 보여줄 수 있다.

 

전체 페이지를 전부 다 로딩하지 않고 부분만 새로 로딩할 때 사용하는 방식이라고 생각하면 된다.

 

 

 

 

브라우저에서 이벤트가 발생하면 서버에게 HttpRequest를 전달한다.

서버는 받은 정보를 처리한 후 브라우저에게 처리 결과를 전달한다.

 

브라우저는 서버로부터 받은 정보를 바탕으로 자바스크립트를 사용해 해당되는 페이지를 업데이트한다.

 

(https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_xmlhttp)

 

 

ajax를 사용할 때는 자바스크립트보다는 JQuery 문법을 사용해서 구현한다.

 

 

 

서버로부터 어떤 데이터를 가져왔을 때 어떤 요소에 집어넣을지를 정의한다.

 

URL : 필수 인자로, 어떤 데이터를 load 할 지를 의미한다.

data : 서버로부터 데이터를 요청할 때 전달해야할 데이터를 의미한다 (키 - 값)

callback : 전달받은 후 실행할 코드를 정의한다.

 

callback 함수는 인자로 세 가지를 받는다.

 

responseTxt : 요청이 성공적으로 수행됐을 때 요청 결과를 가진다.

statusTxt : 요청의 상태를 가진다. (200, 300 등..)

xhr : XHMHttpRequest 객체를 가진다.

 

 

load 함수보다는 get / post 함수를 더 자주 사용한다.