안녕하세요. 명월입니다.
이 글은 ajax에서 동기화 작업하는 방법에 대한 글입니다.
예전에 ajax에 대해 소개한 적이 있습니다.
링크 - [Jquery] Ajax 예제
ajax는 기본적으로 비동기 처리의 함수입니다. 비동기라는 뜻은 처리의 결과를 기다리지 않고 병렬적인 처리라는 뜻입니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="console"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
// ajax 함수
$.ajax({
type:"GET",
url:"./rss",
dataType : "xml",
success:function(msg){
// div에 Debug -1를 출력합니다.
var html = $("#console").html() + "<br />";
html += "Debug -1";
$("#console").html(html);
}
});
// div에 Debug -2를 출력합니다.
var html = $("#console").html() + "<br />";
html += "Debug -2";
$("#console").html(html);
});
</script>
</body>
</html>
위 소스의 결과를 보면 Debug -2가 먼저 출력이 되고 Debug -1이 다음에 출력이 됩니다. 이게 비동기 식으로 되어 있어서 ajax를 호출하고 그 다음에 ajax의 결과를 기다리지 않고 스탭으로 넘어갑니다.
그러나 상황에 따라서 ajax를 사용하고 싶은데 Debug -1의 결과를 받고 그 결과에 따라서 다음 스탭처리를 하고 싶을 때도 있습니다. 그 방법은 위 ajax 값에 asyn: false만 넣으면 가능합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="console"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
// ajax 함수
$.ajax({
type:"GET",
url:"./rss",
dataType : "xml",
// 이 파라미터를 넣으면 비동기에서 동기화로 바뀝니다.
async:false,
success:function(msg){
// div에 Debug -1를 출력합니다.
var html = $("#console").html() + "<br />";
html += "Debug -1";
$("#console").html(html);
}
});
// div에 Debug -2를 출력합니다.
var html = $("#console").html() + "<br />";
html += "Debug -2";
$("#console").html(html);
});
</script>
</body>
</html>
위 결과를 보면 ajax의 결과를 기다리고 Debug -2로 넘어가는 것을 확인 할 수 있습니다.
사실 ajax의 함수에서 의외로 제대로 된 기능을 알고 사용하는 사람이 많지 않습니다. 하긴 저도 그렇습니다. 정말 자주 사용하는 함수인데 사용하는 것만 사용하다 보니 알아도 까먹는 경우가 많네요..
ajax에서 꼭 json만 다루는 것이 아닌 xml를 다루는 부분도 그렇습니다. xml이 파싱되는 것을 예전에 작성했었는데, 까먹고 있었네요.
링크 - [Jquery] Ajax xml 파싱
이런 많은 기능을 잘 인지하고 있다가 프로그램을 작성할 때 다양하게 사용해야 겠습니다.
여기까지 ajax에서 동기화 작업하는 방법에 대한 소개였습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Jquery] CSS로 작성 된 loader 마크 (0) | 2019.10.16 |
|---|---|
| [Jquery] ajax 함수 사용 방법 (2) | 2019.10.16 |
| [Javascript] window.history (0) | 2019.09.02 |
| [Javascript] Clipboard를 사용하는 방법(Ctrl + c 할때 출처 붙이기) (0) | 2019.08.20 |
| [Jquery] ajax를 이용해 파일 업로드하는 방법 (2) | 2019.06.16 |
| [Jquery] Jquery 초기 구조 설정하기 (0) | 2019.05.18 |
| [Javascript] JSON.parse 함수 (0) | 2015.04.20 |
| [Javascript] JSON.stringify 함수 (0) | 2015.04.19 |