jQuery Ajax_jquery의 이벤트에 대한 자세한 소개

Ajax는 많은 이벤트를 트리거합니다.
이벤트에는 두 가지 종류가 있습니다. 하나는 지역 이벤트이고 다른 하나는 글로벌 이벤트입니다.
로컬 이벤트: $.ajax를 통해 호출 및 할당됩니다.

코드 복사 코드는 다음과 같습니다.

$.ajax({
beforeSend: 함수(){
// beforeSend 이벤트 처리
},
완료: 함수(){
// 전체 이벤트 처리
}
// ...
});

전역 이벤트는 바인딩을 사용하여 바인딩할 수 있으며 바인딩 해제를 사용하여 바인딩을 해제할 수 있습니다. 이는 click/mousedown/keyup 및 기타 이벤트와 유사합니다. 그러나 모든 DOM 요소에 전달될 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$("#loading").bind("ajaxSend", function(){ //바인드 사용
$(this).show();
}).ajaxComplete(function(){ //ajaxComplete를 직접 사용
$(this).hide();
});

물론 특정 Ajax 요청에 대해 전역 이벤트가 생성되는 것을 원하지 않으면 global:false를 설정할 수 있습니다

코드 복사 코드는 다음과 같습니다.

$.ajax({
URL: "test.html",
전역: 거짓,
// ...
});

이벤트 순서는 다음과 같습니다.

ajaxStart 글로벌 이벤트
새로운 Ajax 요청을 시작하며 현재 진행 중인 다른 Ajax 요청은 없습니다.
전지역 이벤트 보내기
Ajax 요청이 시작되면 시작됩니다. 필요한 경우 여기에서 XHR 개체를 설정할 수 있습니다.
ajax전역 이벤트 보내기
요청이 시작되기 전에 트리거되는 글로벌 이벤트
지역행사 성공
요청이 성공하면 트리거됩니다. 즉, 서버는 오류를 반환하지 않으며 반환된 데이터에는 오류가 없습니다.
ajaxSuccess 글로벌 이벤트
글로벌 요청 성공
오류 지역 이벤트
오류가 발생한 경우에만 트리거됩니다. 성공 및 오류 콜백 함수를 동시에 실행할 수는 없습니다.
ajaxError 글로벌 이벤트
오류 발생 시 전역적으로 트리거
지역행사 완료
요청의 성공 여부에 관계없이 동기 요청이더라도 요청이 완료되면 이 이벤트를 트리거할 수 있습니다.
ajax전체 글로벌 이벤트
글로벌 요청이 완료되면 트리거됩니다
ajaxStop 글로벌 이벤트
진행 중인 Ajax가 없을 때 발생합니다.

로컬 이벤트 콜백의 매개변수는 문서에 명확하게 기재되어 있으므로 여기서는 자세히 다루지 않겠습니다.

글로벌 이벤트에서는 ajaxStart, ajaxStop을 제외한 다른 이벤트에는 3개의 매개변수가 있습니다
이벤트, XMLHttpRequest, ajaxOptions
첫 번째는 이벤트, 두 번째는 XHR 객체, 세 번째 매개변수가 가장 유용하며 이 ajax를 호출할 때 사용하는 매개변수입니다.
ajaxError에는 예외가 발생할 때만 전달되는 네 번째 매개변수 ThrowError가 있습니다.
ajaxOptions를 사용하여 전역 ajax 이벤트를 작성할 수 있습니다.
예를 들어

코드 복사 코드는 다음과 같습니다.

$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("요청 중" o.url);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.url "요청 성공");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.url "요청 실패");
});

이 예에서는
이러한 방식으로 현재 Ajax 상태를 전 세계적으로 쉽게 표시할 수 있습니다.
물론 앞서 언급했듯이 세 번째 매개변수는 실제로 ajax에 전달되는 매개변수이다. get/post/load/getScript/getJSON과 같은 메소드는 기본적으로 ajax 메소드를 호출하므로 ajaxOptions.url 속성은 항상 유효합니다.

더 많은 예시가 있습니다.
Ajax로 호출하는 경우 맞춤 매개변수를 전달할 수도 있습니다. 다음 예에서는 ajax 호출
에 대한 msg 매개변수를 사용자 정의했습니다.

코드 복사 코드는 다음과 같습니다.

//맞춤 매개변수 메시지
$.ajax({url:"test1.html",type:"get",msg:"1페이지"});
$.ajax({url:"test2.html",type:"get",msg:"2페이지"});
$.ajax({url:"test3.html",type:"get",msg:"3페이지"});
$.ajax({url:"test4.html",type:"get",msg:"4페이지"});

//여기에서 사용자 정의 매개변수 msg를 얻을 수 있습니다.
//다른 ajax 요청을 다르게 처리하는 데 사용할 수 있습니다.
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("요청 중" o.msg);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.msg "요청 성공");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.msg "요청 실패");
});

마지막으로 로드 방식에 대해 말씀드릴 것이 있습니다.

get, post, getJSON 등과 같은 기타 간단한 ajax 메소드의 콜백 기능은 모두 성공 콜백으로 설정됩니다.

그리고 로드 설정만이 실제로 완전한 콜백입니다.

따라서 로드에 설정된 콜백 함수에는 2개의 매개변수가 있어야 합니다.

XMLHttpRequest 및 textStatus
그러나 실제로는 그렇지 않습니다.
로드 콜백에는 세 가지 매개변수가 있습니다
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
따라서 로드 콜백에서
할 수 있습니다. 호출이 성공했는지 확인하려면 textStatus=="success" 또는 textStatus=="error"를 사용하세요.
또는 XMLHttpRequest.status 속성을 사용하여 200인지, 404인지 또는 다른 것인지 확인합니다.

이런 점에서는 일반적인 get/post 방식보다 더 발전된 방식이라고 생각합니다. 각 GET의 오차를 홀수로 설정하는 것은 불가능합니다. 그러나 전역 ajaxError를 설정하는 것은 실제로 좋은 선택입니다.