Ajax 응답 처리와 비동기

동기/비동기

https://www.phpmind.com/blog/2017/05/synchronous-and-asynchronous/

Synchronous and Asynchronous | PHP Technology, PHP Tutorial, Database Tutorials, CMS System

 

 

AJAX 통신 비동기 처리 과정

 

 

 

Ajax

브라우저의 화면 전환 없이 새로고침이 일어나지 않고 서버측의 데이터를 요청해서 받아와서 화면에 그려주는 

비동기적인 작업을 보내놓고 나머지 작업을 먼저 하게 된다. 그리고 다시 응답이 오면 실행이 되어 추가적인 내용이 보여지게 된다. 이런 방식으로 자바스크립트 엔진이 동작되고, 브라우저에서 랜더링이 진행된다.

 

 

12라인의 익명함수(call back함수)는 16, 17라인보다 더 늦게 실행되는 함수이다. 이 익명함수는 비동기로 실행되며, 이벤트큐에 보관되다가 load 이벤트가 발생하면(서버로부터 데이터를 브라우저가 받으면) 그때 call stack에 실행되고 있는 함수가 없어서 비어있다면 stack에 올라와서 실행된다. call back 함수는 모든 동기적인 실행이 끝나고 나서 실행된다.

 

 

Ajax 응답 처리

 

서버로부터 받아온 JSON 데이터는 문자열 형태이므로 브라우저에서 바로 실행할 수 없다. 따라서 문자열을 자바스크립트 객체로 변환해야 데이터에 접근할 수 있다. 이 과정은 문자열 파싱을 일일이 해야 하는 불편함이 있다.

브라우저에서는 JSON 객체를 제공하며 이를 활용해서 자바스크립트 객체로 변환할 수 있다.

 

 

 

cross domain 문제

 

XHR 통신은 다른 도메인 간에는 보안을 이유로 요청이 안 된다. 즉, A도메인에서 B도메인으로 XHR통신, Ajax 통신을 할 수 없다. 이것을 회피하기 위해서 JSONP라는 방식이 사용되고 있다. 최근에는 CORS라는 표준적인 방법이 제공되고 있다. CORS를 사용하기 위해서는 프로그램 코드에서 별도로 해야할 것이 없고, 백엔드 코드에서 헤더 설정을 해야 하는 번거로움이 있다. 

 

 

 

 

 

 

 

참고 : boostcourse  https://www.boostcourse.org/web316/lecture/16756?isDesc=false

웹 프로그래밍(풀스택)