jQuery Ajax 요청 상태 관리자 Packaging_jquery

하지만 아무리 가까워도 클라이언트와 서버 사이를 오가며 데이터가 로드될 때까지 기다려야 하는 시간은 항상 존재하기 마련입니다. 따라서 대부분의 웹사이트에서는 Gif 동적 아이콘이나 '로드 중...'과 같은 단어를 사용하여 데이터가 아직 로드 중임을 사용자에게 알립니다. 그러나 때때로 이 문제는 매우 지루하고 번거로울 수 있습니다. ajax 요청 전에 이 '로딩'을 표시한 다음 ajax가 성공한 후에 숨기거나 jquery ajax 및 jQuery의 전역 이벤트 jQuery.ajaxStart()에 작성합니다. ajaxStop()은 전체 페이지의 ajax 상태를 제어합니다. 전자의 방법은 요청마다 이 'Loading'을 작성해야 하고, 요청의 성공 여부에 관계없이 숨겨야 하기 때문에 사용하기에는 너무 간단합니다. 후자는 전역적입니다. 즉, 전체 페이지의 요청 상태를 로컬에서 표시해야 하는 요구 사항을 충족할 수 없는 경우가 있습니다.

이러한 문제를 해결하기 위해 Ajax Request Status Manager라는 jQuery 플러그인을 개발했습니다. 이 플러그인을 사용하면 로딩이 덜 번거로워질 수 있습니다. 이 플러그인을 사용하면 Ajax 요청을 트리거하기 전에 모든 요청을 추가하고 작성할 수 있습니다. 사용자 상호 작용 이벤트에서 .request() 메서드를 실행하기만 하면 됩니다. 페이지의 모든 요청을 독립적으로 로딩을 표시하도록 설정하거나 전체적으로 표시하도록 설정할 수 있습니다(하나의 로딩만 표시됨). 다음은 플러그인의 구체적인 사용법입니다.

CSS 로딩 스타일 사용자 정의:
.state-loading { background: #fff url(images/icon-ajax-loader.gif) . .. }

최신 버전의 jquery 파일 인용:


준비 중 jquery의 이벤트 다음에서 .install() 메소드를 실행합니다.
$.loader.install( className, isGlobal )

매개변수 설명:
className: 문자열, 사용자 정의된 로딩 클래스 이름을 나타냅니다. 위의 CSS에서 정의한 상태 로딩과 같습니다.

isGlobal: 부울, 로딩이 전역적으로 표시되는지 아니면 독립적으로 표시되는지 정의합니다. 기본값은 true입니다.

성공 후 필수 ajax 요청 매개변수 및 콜백 메소드 추가:
$.loader( key ).add( module, settings , callback )

매개변수 설명:
키: 문자열, 이 키를 사용하여 지정된 모듈의 로더를 생성하거나 가져옵니다. 물론 동일한 키가 add() 메서드를 여러 번 실행하여 다른 모듈을 추가할 수 있지만 이 키에 대한 설정과 콜백이 공유되므로 나중에 추가되는 설정과 콜백은 이전 설정과 콜백을 덮어쓰게 됩니다.

모듈: jquery 객체. 한 페이지의 동일한 요청이 여러 모듈의 데이터를 처리할 수 있습니다. 따라서 이전에 ajax 요청을 실행할 때 install() 메서드를 false로 설정한 경우 이 로더에 추가하세요. 모든 모듈은 로딩 상태를 표시합니다.

설정: map, jquery의 ajax 설정 매개변수이지만 ajax 이벤트를 설정하지 않습니다. 이렇게 하면 플러그인의 콜백 메서드가 재정의됩니다. 기본 요청 유형은 GET입니다.

콜백: 함수, 성공 후의 콜백 함수입니다. 매개변수 데이터가 있으며 기본값은 json 유형으로 반환되는 객체입니다.

add() 메서드는 'module'이라는 접두사가 붙은 문자열 배열을 반환합니다. 예를 들어 3개의 요소를 추가하면 결과는 ['module1', 'module2', 'module3']입니다. 반환된 배열을 통해 지정된 모듈 중 하나의 로드를 삭제하거나 지정할 수 없습니다. 즉, 필요한 경우 물론 모두 삭제할 수 있습니다.

remove() 메소드는 지정된 모듈을 삭제합니다:
$.loader( key ).remove( moduleId )

매개변수 설명:
moduleId: 문자열 또는 배열로 지정됩니다. 문자열인 경우 모듈 중 하나가 삭제됩니다. 배열로 지정하면 모듈이 일괄 삭제됩니다. 매개 변수를 지정하지 않으면 모든 모듈이 삭제됩니다.

예
userinfo라는 로더에 2개의 모듈을 추가합니다.

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

var id1 = $.loader( 'userinfo' ).add(
$( '#userinfo, #top-userinfo' ),
{ url: 'server/ userinfo.php ' },
function( data ) {
updateContent( $( '#userinfo, #topsection, #footer-userinfo' ), data )
}
);
userinfo 로더에 다른 모듈 추가:

var id2 = $.loader( 'userinfo' ).add( $('#footer-userinfo')
var idList = id1. concat( id2 );
// result: [ 'module1', 'module2', 'module3' ]
두 번째 모듈, 즉 '#top-userinfo'의 로딩 삭제:
var ret = $.loader( 'userinfo' ).remove( idList[1] );
// 결과: true, 모듈: [ 'module1', 'module3' ]
대화형 이벤트에서 실행됨() 메소드:
$.loader( key ).request();
]
물론 이전에 추가한 ajax 설정과 콜백을 버리고 대화형 이벤트에 $.ajax를 직접 작성하거나 $ .get 등 그런 다음 요청 전에 $.loader( key ).show() 를 호출하고 콜백 함수 내에서 $.loader( key ).hide() 를 호출하십시오. 또한 로딩 상태를 유연하게 제어할 수 있습니다.

예제

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

$( '#getUserInfo' ).bind( 'click', function() {
$.loader( 'userinfo' ).request();
})

할 수도 있습니다. 처음부터 다시 작성 요청:

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

$( ' #getUserInfo' ).bind( 'click', function() {
$.loader( 'userinfo' ).show();
$.get( 'server/userinfo.php', function( data ) {
$.loader( 'userinfo' ).hide();
updateContent( $( '#userinfo, #topsection, #footer-userinfo' ), data )
})
} );

참고: 요청이 반복적으로 트리거되면 관리자는 이전에 완료되지 않은 요청을 방지하고 새 요청을 다시 발행하기 위해 abor()를 실행합니다. 그러나 jquery의 ajaxError 이벤트를 통해 오류 정보를 출력합니다. 이 정보도 잘못된 것으로 간주되므로 필요한 경우 직접 필터링해야 합니다.

예제

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

// 오류 로그 출력
$( 'body' ).bind( 'ajaxError', function( event, xhr, settings, ThrowError ) {
// 중단 오류 메시지 필터링
if ( xhr.status == = 0 || xhr.readyState === 0 || ThrowError '

' )
})


플러그인은 사용하기 쉽습니다. 코드 로직은 그다지 복잡하지 않습니다. 그러나 제 능력과 기술 수준에는 한계가 있습니다. 질문이나 버그가 있으면 nicolas-zhao@hotmail.com으로 이메일을 보내주세요. 와주셔서 감사합니다!

패키지 다운로드:
Ajax 요청 상태 관리자
.