[AJAX] AJAX 기초

Ajax (Asynchronous Javascript And XML) : 

 

Ajax는 HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법으로 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다.

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있게 된다. 

 

웹 동기 요청과 웹 비동기 요청

동기요청 :

코드가 순차적으로 실행되며, 한 작업이 완료될 때까지 다른 작업이 대기해야 한다. 이러한 방식은 간단하고 직관적이지만, 작업이 길어지면 실행 속도가 느려지고, 작업이 차단될 가능성이 있다.  쉽게 말해 요청을 보내면 응답페이지를 받아와서 전체 페이지가 바뀌는 것을 웹 동기 요청이라고 한다

 

비동기 요청 : 

코드가 순차적으로 실행되지 않습니다. A 작업을 실행하는 동안 B 작업이 실행될 수 있으며 A가 완료될 때까지 B가 기다리지 않습니다. 이 방식은 작업이 길어지더라도 실행 속도가 빠르며, 작업이 차단되지 않습니다. 응답페이지가 출력 된 상태에서 요청을 보낸 후 페이지의 이동이 없고 결과로 텍스트, json, xml 데이터를 받는 것을 웹 비동기 요청이라고 한다. 

 

[AJAX 비동기 요청 방법]

1. 비동기 request 객체 생성
   const xhttp = new XMLHttpRequest(); 
2. 비동기 요청 설정 
   xhttp.open("get", "ajax_info.txt");
   param1 : 전송 방식 ( post, get, patch, update, delete)
   param2 : 요청 받을 서버 페이지로 경로 설정 
3. 요청 보내기   
   xhttp.send(); 
4. 응답을 받았을 때 자동으로 호출 될 함수를 등록
   xhttp.onload = function() { 
   받은 응답을 가지고 처리 코드를 작성 한다 
   }
   function() 에 function a() 와 같은 이름 없으면 익명 함수로 해당 핸들러 전용으로 사용하겠다는 의미이다.