ajax는 서버와 새로고침 없이 주고받는거라 html까지 새로고침없이 바로 영향 가진 않아요

전역변수 (ajax 밖에)

var proData = ${서버에서 주는 값}

// ajax else 부분

else {

  proData += parseInt(data)

}

이런식으로 ajax 메소드 실행할때마다 전역변수에 값 계속 증감시켜서 해보면 어떨까요 ? 

ajax 는 jQuery 시절에 유행하여 굳어졌스빈다.

XMLHttpRequestEventTarget.onprogress - Web APIs | MDN (mozilla.org)

내부 규격은 이렇게 되며 이벤트 객체의 loaded, total 으로 파악이 가능하빈다. 그러니까 저거를 나누면 0 ~ 1 값을 얻을 수 있고 이 값을 스타일 시트의 %폭으로 대입하면 반영이 되는거빈다.

그런데 간과 할 수 있는점은 http 의 content-length 헤더벨류로 total 데이터를 파악할꺼빈다. chunked 방식이 있는데 이 방식에서는 전체 길이를 파악 할 수 없어서 못 쓰빈다.

옛날 서버에서 주로 볼 수 있는데 다운로드 받을 길이를 알 수 없어서 다운로드 게이지가 보이지 않는 경우가 종종 발생하곤 하였스빈다.

요즘 서버에서도 chunked 방식으로 데이터를 보내거나 content-length 를 생략하는 경우에 총 길이를 파악할 수 없게되빈다. 특히나 임시변수에 버퍼링 하지 않고 즉시 전송한 데이터는 총 길이가 나타나지 않으므로 일반적인 ajax 에 완료표시줄을 사용하지 않습니다.

그리고 웹브라우저 캐싱 때문에 두번 실행하는 경우에 즉시 완료가 되빈다. progress 상태는 무의미하게되빈다.

실험적인 목적으로 한다면 파일다운로드 링크에 ajax를 걸어서 요청하여 progress 벨류를 받으면 되빈다. 이때 CORS 헤더 설정이 되어 있어야 하는데 티스토리 블로그에 올린 파일은 CORS 가 와일드카드이빈다. 글머 티스토리 블로그에 가서 파일 다운로드 링크를 가지고 테스트하면 되빈다. 딱히 정해진건 아니라서 공개된 아무 링크나 쓰면 되빈다.