동그리의 이것저것 적어두는 블로그 동그리의 이것저것 적어두는 블로그

앞선 포스트에서 (dongribooth.tistory.com/12) Ajax에 대한 개념을 살펴봤다. 이번에는 실제로 "비동기적" 통신을 하는 방식을 XMLHttpRequest 를 통해 살펴보자. 결과 맛보기 "비동기적"인 것을 떠나서, 기본적으로 HTTP 요청을 발생시키는 것이기 때문에, 아래와 같은 흐름이 필요하다. 요청을 보낼 서버를 특정한다. 특정한 서버로 요청을 보낸다. (GET,POST,PUT,DELETE) 요청을 보낸 서버로부터 응답을 받는다. (필요하다면) 요청을 보내기 전/후로 데이터를 다룰 곳을 꾸며준다. 위 흐름에서 3번이 완료될때까지 기다려야 한다면 "동기적"으로 통신을 하고 있는 거고, 기다릴 필요가 없다면 "비동기적"으로 통신을 하고 있다고 생각하면 된다. 무료로 공개된 수많은 ..

이전 포스트 dongribooth.tistory.com/11 에서 Promise 로 간단히 XMLHttpRequest 사용을 래핑하는 방법을 작성해두었는데, 이번에는 XMLHttpRequest 자체에 대해서 공부할 겸 Ajax 에 대한 전반적인 내용을 작성해두려고 한다. Ajax란 무엇인가? Ajax (Asynchronous Javascript And XML). "빠르고 동적인(dynamic) 웹 페이지를 만드는 기술"이다. 어떤 사이트의 퍼포먼스 향상을 고려할 때, 필수적으로 사용하게 되는 기술이다. 특정 기술을 가리키는 것은 아니고, 통상적으로 아래와 같은 기술들이 결합한 것을 가리킨다. (아래 기술들, 개념들은 하나같이 오늘날의 웹을 다루는 데 있어서 꼭 알아두어야하는 내용들이다!) HTML, CS..

function sendAjaxRequest(url,method,data) { return new Promise(function(resolve, reject){ let xhr = new XMLHttpRequest(); xhr.onload = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { resolve(xhr.response); } else { reject({status : xhr.status, statusText : xhr.statusText}); } } xhr.open(method,url,true); xhr.responseType = 'json'; xhr.send(data); }); } function g..