AJAX - 개발자도구의 Network 탭

AJAX

새로고침 없이 데이터 얻어오기

 

 

 

AJAX와 비동기

addEventListener의 콜백함수는

open(), send()보다 더 늦게 실행됨

그 이유는 비동기로 실행되어, 이벤큐 큐에 보관되다가

load 이벤트가 발생하면(서버로부터 데이터를 브라우저가 받으면 

그 때 call stack에 실행되고 있는 함수가 없어서 비어있다면

stack에 올라와서 실행됨

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

 

JQuery 사용 예제

 

 

AJAX 응답 처리

서버로부터 받아온 JSON 데이터는 문자열 형태이므로

브라우저에서 바로 실행할 수 없습니다

따라서 문자열을 js 객체로 변환해야 데이터에 접근할 수 있습니다.

이를 위해 문자열 파싱을 일일이 해야하는 불편함이 생깁니다.

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
    console.log(this.responseText);
    console.log(typeof this.responseText);  // string
    var jsonObj = JSON.parse(this.responseText);
    console.log(typeof jsonObj);
    // 객체이름.키값 => 값
});
oReq.open("GET", "./json.txt");
oReq.send();

 

문자열을 잘라서 토큰화하여 객체로 생성하는 일은 번거롭기에

브라우저에서는 JSON 객체를 제공하며,

이를 활용하여 js 객체로 변환할 수 있습니다.

var json객체로변환된값 = JSON.parse("서버에서 받은 JSON 문자열");

 

 

 

Cross Domain 문제

XHR 통신에서

다른 도메인 간, 즉 A 도메인의 소스코드에서 B 도메인의 데이터를 요청할 수 없음

보안 상의 이유.

 

네이버나 다음도 서로 검색 데이터를 보낼 때  

A 도메인에서 B라는 하위 도메인으로 보내고 싶어도 통신이 안 될 수 있음

예로 네이버 메인에서 검색 서버는 다른 도메인에 있으므로

데이터, 검색 결과를 못 가져옴.

이게 Ajax 통신에서 문제가 됨

 

이를 회피하기 위해 JSONP 방식이 널리 사용됨

HTML script의 요청은 보안상 허용되지 않게 이를 우회하는 방법.

 

이외에도 CORS라는 표준 스펙을 적용하기도 함.

프로그램 코드에서 별도로 해야할 것이 없고,

백엔드에서 헤더 설정을 해야 하는 번거로움이 있음

예로, 서버 쪽에서, 즉 응답을 주는 쪽에서 

"너는 OK, 너도 OK" 이렇게 헤더 값에다가 뭔가 추가한다거나

허용 가능한 도메인들을 등록해둠.

 

검색 자동완성 UI는 어떤 방식으로 데이터를 가져오는지,

개발자도구의 network 패널을 확인해보면

퇴사를 검색하는 중에 'ㅌ'만 쳤을 때 

자동완성 내용이 JSONP 방식을 이용해서 완성됐다는 것이 보인다.

 

 

 

 

크롬 개발자 도구의 네트워크 패널

성능 개선하려면 여기를 잘 살펴보아야 함

200 코드가 나오면 잘 받았다는 뜻.

404 코드는 요청한 파일을 찾을 수 없었다는 의미 (Note Found)

• Preview 탭으로 렌더링한 화면 미리보기
• 녹화 기능으로 HTML, CSS, js, image 파일을 내려받는 상황 확인
  • css는 stylesheet, js는 script
  • 녹화 기능은 왼쪽 위에 빨간색 동그라미 버튼
    • 시간대별로 캡처 스크린샷 기능도 있음 (녹화 기능 키고 새로고침)
• 404같은 응답 오류의 문제를 찾기
• 서버로부터의 응답까지 걸리는 시간 측정
• 느린 네트워크로 테스트 해보기
  • Online으로 설정되어있는 것을 Slow 3G로 변경. 그 후에 새로고침

  • 

• Network Log
  • State : HTTP 응답 코드
  • Type : 파일, 리소스의 유형
  • Initiator : 리소스가 요청된 원인. 링크 클릭하면 요청 발생시킨 소스코드로 이동
  • 우측 마우스 클릭을 하면 더 다양한 로그를 볼 수 있음

 

참고

https://developer.chrome.com/docs/devtools/network/