Ajax 글로벌 이벤트 참조 방법 및 각 이벤트의 실행 순서(글로벌/로컬)
- 寻∝梦원래의
- 2018-09-10 14:42:381936검색
이 기사에서는 주로 ajax의 전역 이벤트 참조 방법과 각 이벤트의 실행 순서를 소개합니다. 이제 이 기사를 함께 읽어 보겠습니다.
jquery의 ajax 메소드의 모든 전역 이벤트:
ajaxStart: ajax 이전 요청 시작
ajaxSend: ajax 요청 시
ajaxSuccess: ajax가 데이터를 가져온 후
ajaxComplete: ajax 요청이 완료된 후
ajaxError: ajax 요청에 오류가 발생한 후
ajaxStop: ajax 요청이 중지된 후
ajax 메소드 전역 이벤트의 유용성
jquery의 ajax 메소드를 사용하면 $.ajax(), $.get(), $.load(), $.getJSON() 등 전역 이벤트가 발생합니다. 기본적으로 트리거되지만 일반적으로 전역 이벤트 바인딩은 아니지만 이러한 전역 이벤트는 실제로 매우 유용합니다.
Ajax 전역 이벤트에는 일반적인 애플리케이션 시나리오가 있습니다. 페이지에 여러 개의 ajax 요청이 있거나 심지어 많은 수의 ajax 요청이 있지만 이러한 ajax 요청에는 동일한 메시지 메커니즘이 있습니다. ajax 요청이 시작되기 전에 프롬프트 상자가 표시되고, ajax 요청이 성공하면 "데이터 수집 성공"이라는 메시지가 표시되고, ajax 요청이 완료된 후 프롬프트 상자가 숨겨집니다. 전역 이벤트를 사용하지 않는 방법은 $.ajax()에 beforeSend, Success, Complete 콜백 함수를 추가하고, 콜백 함수에 처리 프롬프트 상자를 추가하는 것입니다. 글로벌 이벤트를 사용하는 방법은 다음과 같습니다.
$(document).ajaxStart(onStart)
.ajaxComplete(onComplete)
.ajaxSuccess(onSuccess);
function onStart(event) {
//.....
}
function onComplete(event, xhr, settings) {
//.....
}
function onSuccess(event, xhr, settings) {
//.....
}
jquery에서 각 이벤트의 실행 순서는 다음과 같습니다
1.ajaxStart(글로벌 이벤트)
2.beforeSend(로컬 이벤트)
3.ajaxSend(글로벌 이벤트)
4.success( 로컬 이벤트)
5.ajaxSuccess(글로벌 이벤트)
6.error(로컬 이벤트)
7.ajaxError(글로벌 이벤트)
8.complete(로컬 이벤트)
9.ajaxComplete (글로벌 이벤트)
10.ajaxStop (글로벌 이벤트)
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="点击触发ajax请求" id="ajaxReuqestID" />
<p id="ajaxStateID"></p>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function() { //点击按钮，并执行ajax请求
$(document).ajaxStart(function() {
$("#ajaxStateID").append("ajaxStart" + "<br/>");
alert("ajaxStart");
}).ajaxSend(function() {
$("#ajaxStateID").append("ajaxSend" + "<br/>");
alert("ajaxSend");
}).ajaxSuccess(function() {
$("#ajaxStateID").append("ajaxSuccess" + "<br/>");
alert("ajaxSuccess");
}).ajaxError(function() {
$("#ajaxStateID").append("ajaxError" + "<br/>");
alert("ajaxError");
}).ajaxComplete(function() {
$("#ajaxStateID").append("ajaxComplete" + "<br/>");
alert("ajaxComplete");
}).ajaxStop(function() {
$("#ajaxStateID").append("ajaxStop" + "<br/>");
alert("ajaxStop");
});
$("#ajaxReuqestID").click(function() {
$.ajax({
url: "server/ajaxtxt.txt",
global: true,
beforeSend: function() {
$("#ajaxStateID").append("berforeSend" + "<br/>");
alert("berforeSend");
},
success: function() {
$("#ajaxStateID").append("success" + "<br/>");
alert("success");
},
error: function() {
$("#ajaxStateID").append("error" + "<br/>");
alert("error");
},
complete: function() {
$("#ajaxStateID").append("complete" + "<br/>");
alert("complete");
}
});
});
});
</script>
</body>
</html>
위 내용은 Ajax 글로벌 이벤트 참조 방법 및 각 이벤트의 실행 순서(글로벌/로컬)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!