ajax 동기식은 진정한 동기 방식이 아니다
안녕하세요.
고코더 입니다.
요즘은 백엔드와 프론트로 나눠져 있는 웹생태계 덕분에 ajax 사용이 많아졌습니다. 거의 필수적인 함수 입니다. 저도 처음 ajax를 만나고 이렇게 자주 사용할줄은 몰랐네요.
● 1. 그런데 ajax에 보면 항상 보이는 옵션이 있습니다. async 라는 옵션입니다. 많은 분들이 이 옵션으로 동기,비동기를 처리할 수 있는걸로 알고 있습니다. 하지만 맞는 말이기도 하고 틀린 말이기도 합니다. 사실 ajax 자체가 비동기 처리를 위해 사용되는건데 동기로 지정한다는게 약간 어불성설 같습니다.
● 2. 우선 사용법은 아래와 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <html> <head> <script type="text/javascript"> var arryData = []; //배열을 선언 node = { "name" : 'gocoder', "url" : 'gocoder.net' }; arryData.push(node); //배열을 push 뒤에 넣는다 node = { "name" : '이름', "url" : '주소' }; arryData.unshift(node); //배열을 unshift 맨 앞에 넣는다 node = { "name" : 'gc', "url" : 'gocoder.net' }; arryData.push(node); //배열을 push 뒤에 넣는다 for (var i = 0; i < arryData.length; i++) { document.write(arryData[i].name); document.write(' , '); document.write(arryData[i].url); document.write('<br>'); } </script> </head> </html> | cs |
● 3. 그래서 해당 jqery 함수 설명을 찾아보았습니다. 결론적으로 ajax는 기본적으로 비동기를 사용하고 도메인간 요청이나 jsonp 와 같이 동기로 처리해도 소용 없는 것들은 자동으로 비동기로만 지원한다고 합니다. 그리고 그외에 동기 요청 할때는 브라우저를 일시적으로 잠궈서(Lock)을 걸어서 동기 처리를 한다고 하네요. 결론은 ajax가 처리하는 우리가 아는 동기 프로세스라기 보다는 일시중지를 이용하는 방식입니다.
마무리
ajax로 된 결과 값을 순차적인 로직에 담아야 한다면
sync : false 를 이용해서 동기처리를 활용하세요.
'IT_Developers > Javascript' 카테고리의 다른 글
| javascript - 자바스크립트란? 그리고 개발자에게 자바스크립트란? (0) | 2019.11.22 |
|---|---|
| JavaScript - 3자리 마다 콤마 적용 쉬운방법 / toLocaleString (0) | 2019.10.24 |
| JavaScript - 배열에 값을 추가/ unshift(), push() (0) | 2019.10.21 |
| JavaScript - 문자열 맨 뒷자리 잘라내기 / slice를 이용한 쉬운 방법 (0) | 2019.10.21 |
| jQuery - select 선택 값 변경시 trigger(), prop() 차이는? (0) | 2019.10.17 |
댓글