안녕하세요. 명월입니다.
이 글은 Jquery에서 ajax의 전역 이벤트를 사용하는 방법에 대한 글입니다.
제가 예전에 ajax에 관한 글을 작성한 적이 있습니다.
링크 - [Jquery] Ajax 관련 이벤트
링크 - [Jquery] Ajax xml 파싱
위 링크도 예전에 작성한 글들이라 수정이 필요는 합니다만 참고 사항으로 확인해 주세요.
jquery에서 ajax를 사용할 때 ajax함수를 이용해서 서버와 비동기 통신으로 데이터를 취득해 올 수 있습니다. 그리고 프로젝트를 할 때 이 ajax함수는 아주 유용하게 사용할 것입니다.
특히나 요즘에는 이 ajax사용 빈도가 상당히 높습니다.
그러나 ajax를 실행할 때 로딩 이미지를 설정하거나 혹은 ajax의 전역 처리가 필요할 때 일일히 ajax 함수를 찾아서 전부 수정할 수는 없습니다. 그럴 때 사용하면 아주 유용할 듯 싶습니다.
링크 - https://api.jquery.com/category/ajax/global-ajax-event-handlers/
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
url : <input type="text" id="url" value="ajax.php"> <button id="getBtn">Get Data!!</button>
<p>ajax status</p>
<div class="status"></div>
<br />
<p>result</p>
<div class="result"></div>
<script>
$(function(){
// 버튼을 누르면 ajax를 실행한다. 경로는 텍스트 박스로 임의로 작성한다.
$("#getBtn").on("click", function(){
$ajax = $.ajax({
type: "GET",
url: $("#url").val(),
dataType : "json"
});
// ajax가 완료되면 result div에 결과를 화면에 보여준다.
$ajax.done(function(msg){
var data = $(".result").html();
data += msg.data + "<br />";
$(".result").html(data);
console.log("done");
});
// ajax가 실패하면 호출된다.
$ajax.fail(function(){
console.log("fail");
});
});
// ajax 전역함수로 ajax가 성공하면 status div에 취득해온 url과 OK 글자를 화면에 보여준다.
$(document).ajaxSuccess(function(event, xhr, settings) {
var data = $(".status").html();
data += "OK " + settings.url + "<br />";
$(".status").html(data);
console.log("ajaxSuccess");
});
// ajax 전역함수로 ajax가 실패하면 status div에 취득해온 url과 NG 글자를 화면에 보여준다.
$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
var data = $(".status").html();
data += "NG " + settings.url + "<br />";
$(".status").html(data);
console.log("ajaxError");
});
// ajax의 전역 함수로 ajax가 개시하면 호출된다.
$( document ).ajaxStart(function() {
console.log("ajaxStart");
});
// ajax 전역함수로 비동기가 시작되면 호출된다.
$( document ).ajaxSend(function() {
console.log("ajaxSend");
});
// ajax 전역함수로 ajax가 종료되면 호출된다.
$( document ).ajaxStop(function() {
console.log("ajaxStop");
});
});
</script>
</body>
</html>
{"data":"hello world"}
위 이미지에서는 ajax가 성공을 해서 결과를 hello world라고 화면에 보여주었습니다. event의 순서는 ajaxStart, ajaxSend, done, ajaxSuccess, ajaxStop 순으로 호출이 되는군요.
위 이미지에서는 존재하지 않는 url 경로를 호출하여 에러를 발생시켰습니다. event의 순서는 ajaxStart, ajaxSend, fail, ajaxError, ajaxStop 순으로 호출이 됩니다.
예제
이벤트 순서
여기까지 Jquery에서 ajax의 전역 이벤트를 사용하는 방법에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Javascript] 웹 사이트나 블로그등에 소스 코드 보기(highlightjs.min.js) (1) | 2021.01.13 |
|---|---|
| [Html] video와 audio 태그 (0) | 2020.03.05 |
| [Javascript] Html태그로 파일 다운로드(base64)를 하는 방법 (0) | 2019.11.23 |
| [Javascript] 서명 마크(sign)를 만드는 방법(canvas태크) (4) | 2019.11.14 |
| [Jquery] $.cookie 사용법 (0) | 2019.11.12 |
| [CSS] 반응형 웹을 만들기 위한 브라우저 사이즈별 css 적용 방법 (0) | 2019.11.05 |
| [Javascript] 팝업 라이브러리(bootbox) (0) | 2019.11.04 |
| [Javascript] 접속 브라우져를 확인하는 방법 (0) | 2019.11.02 |