부스트코스 웹앱개발 -2 AJAX

function ajax() {
   var oReq = new XMLHttpRequest();
	
  oReq.addEventListener("load", function() {
    console.log(this.responseText);
  });
	
   oReq.open("GET", "./json.txt");
   oReq.send();
}

ajax의 기본 코드다. 설명하자면

xmlhttprequest로 ajax객체를 만든다.

그리고 addeventlistener는 이벤트큐로 보내지고

open과 send가 실행된 후 이벤트큐가 실행된다.

 

ajax는 기본적으로 비동기라서 밑에 코드가 다 실행된 후 이벤트큐가 실행된다.

여기서 this.responseText를 해부하자면 this는 이벤트리스너를 가리킨다.

 

즉 load가 실행된 후 이벤트리스너가 넘겨오는 것 중에 responseText를 뽑아서 콘솔창에 띄운다.

이렇게 하면 responseText는 string타입으로 오게된다. 이것은 큰 문제다.

string으로 오면 객체를 활용할 수 없기 때문이다. reponstText.name[1]라던지 객체문법을 사용할 수 없어서

저 값을 이용할 수가 없다. 그렇기 때문에 변환해줘야한다.

 

그게바로 JSON!

 

 

어렵게 생각할 것 없다. 그저 저 string값을 우리가 주물럭할 수 있는 객체타입 즉 object로 변환하는 과정을 거치면 된다.

var jsonobj = JSON.parese("this.responseText")코드를 이벤트리스터에 넣으면 ajax는 값을 object로 받는다.

 

크롬개발자 도구

network 패널을 접속하면 ajax, js 등 통신이 잘 되는지 클라이언트에서 확인할 수 있다.

status의 상태코드와 타입, 파일크기와 시간을 확인할 수 있고

css나 ajax파일만 따로 불러서 조회할 수 있다. 영어라고 쫄지말고 해석하려들자!