개요
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
라는 문구가 떴다.
(크롬에서 jquery 3.3.1 로 async:false 옵션으로 테스트 했을 때)
본문
오래 전에 만들었던 소스를 살펴보는 과정에서 위와 같은 오류 표시를 확인했습니다.
살펴보니 코드 중에서 jquery 의 Ajax 기능을 이용하는 중에, async:false 라는 옵션을 넘겨주는 부분이 있었습니다.
이 부분에서 경고가 출력된 것으로 생각됩니다.
영어는 해석해보면,
메인 쓰레드에서 동기화하는 XMLHttpRequest (Ajax 의 다른 이름) 는 deprecated (더 이상 사용하지 않을 것) 되었습니다. 왜냐하면 이용자 경험이 블라블라.
비동기 호출을 동기식 호출로 변경하면 사용자 경험에 별로 도움이 안 된다, 속도가 느리다. 이런 얘기일 것으로 보입니다.
과거에 만들어진 소스에서는, (예를 들어 jquery alpha 버전 사용 중이었거나, beta 버전 사용 중이었거나) jquery 의 ajax 에 버그가 좀 있었었습니다. 그런 이유로 상용화해야하는 코드인 경우에는, 비동기를 끌 수 밖에 없는 경우들이 있었습니다. 지금의 jquery 의 ajax 는 안정적이죠... 심지어, 그냥 javascript 로 만드는 ajax 통신도 안정적입니다. 향후적으로는 '비동기식' 호출을 하는 것이 당연히 맞는 얘기입니다. 애초에, 통신(응답)하는 사항은 쓰레드나 비동기적으로 처리하는 것이 효율적입니다.
결론
async: false 옵션을 지워주면 됩니다. (기본값이 true 입니다)
주의할 점
소프트웨어에 따라서는, '동기식' 호출 (async: false) 를 해야만 하는 경우도 있습니다. 전체적인 프로세스를 '비동기식'으로 고려하지 못하고 만들어진 경우가 있기 때문입니다. 이 경우에는 조심할 필요가 있습니다. async 기능으로 전환하기 전에, 프로세스를 다 살펴봐야 할 수 있습니다.
오류 확인 예제
(index.html)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Jquery BoilerPlate</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<script>
$(document).ready(function(){
$.ajax({
url: "test.html",
context: document.body,
async: false
}).done(function(data) {
$( "body" ).append(data);
});
});
</script>
<body>
</body>
</html>
(test.html)
TEST예제 압축 파일
jquery_syn_ajax_error_sample.zip
'개발 > Javascript, ECMAScript' 카테고리의 다른 글
| [제이쿼리 jquery] jquery Ajax 이후에 Popup 해야 하는 경우 (0) | 2015.10.15 |
|---|---|
| JSON 타입을 문자열로 변환 (0) | 2015.10.03 |
| [jquery] closest (0) | 2015.10.02 |
| [자바스크립트 Javascript] 금액의 세자리 마다 , 추가하는 함수 (0) | 2015.05.10 |
| [jquery] 키 이벤트 순서 (0) | 2014.05.22 |
| [자바스크립트 javascript] 팝업에서 opener 의 변경이 필요할 때 (0) | 2014.05.19 |
| [jquery] closest / parent / parents (0) | 2014.05.12 |
| [jquery] bind click delegate live 차이 (0) | 2014.02.05 |