190208 TIL XMLHTTPRequest

Feb 8, 2019 » 1막, TIL (Today I Learned)

XMLHTTPRequest

말로만 듣던 Ajax에 대해 드디어 공부하였다.
Ajax는 XMLHTTPRequest 통신으로, 화면 리프레시 없이 화면의 일부분만 갱신할 수 있는 기술이다.

<나무위키 설명>

AJAX는 Asynchronous JavaScript and XML의 약자로, 말그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. 이름에 XML이라고 명시되어있긴 하지만, JSON이나 일반 텍스트 파일과 같은 다른 데이터 오브젝트들도 사용 가능하다. 2017년 현재는 거의 JSON 데이터를 다룬다. 용어와 실제 기술간의 차이가 커져서 요즘에는 약어가 아닌 고유명사 취급하고 있다.

<원리>
1. 브라우저가 사이트에 접속하면 서버는 사이트의 기본 얼개를 담은 '템플릿'을 전달한다.
2. 브라우저는 수신받은 템플릿 HTML과 CSS를 해석해 화면의 기본 모양을 그린다.
3. 계속해서 서버는 데이터의 요청 방식과 수신받은 데이터를 어떻게 가공해야 하는지를 기술한 자바스크립트 파일을 전달한다.
4. 브라우저는 자바스크립트 파일을 해석해서 파일에 기술된 방식대로 서버에 추가 데이터를 요청한다.
5. 서버는 순수 데이터를 응답으로 되돌려준다.
6. 브라우저는 수신한 데이터를 해석하여 템플릿의 적절한 위치에 삽입한다. 데이터의 가공 방식에 따라 삽입 외의 작업(변경, 삭제)을 할 수도 있다.

Asynchronous JavaScript and XML의 약자라니.. ~~비자엑 인가..~~

실행코드

//참고 : https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data"); //parameter를 붙여서 보낼수있음. 
 oReq.send();
}

라이브 서버로 실행시켜야먄 로컬 JSON 데이터에 접근할 수 있길래 live server extension 을 켜고 작업했는데 메모리가 94%까지 올라갔다.. (램 4기가 지못미…)
사실 몇 주 전부터 느려짐을 감지했는데 느려짐에 나를 맞추고 살았는데 ..ㅎㅎ 이젠 고쳐야할 때가 온 것 같다.
vscode를 한 세 네번 지우고 다시 깔고, extension도 다 지우고 다시 깔고, insiders 버젼으로 깔았더니 이제 좀 괜찮은 것 같다.
또 뻑나면 이젠 정말 초기화 뿐 ㅠ_ㅠ