jQuery 연구 노트 - Ajax 작업(3) - 처리 처리

관찰 기능

관찰 함수로 ajaxStart 및 ajaxStop 함수를 사용할 수 있으며, 관찰 함수의 콜백 함수를 사용하여 해당 처리를 수행할 수 있습니다.

ajaxStart의 콜백 함수는 Ajax 요청이 시작되고 다른 전송이 이루어지지 않았을 때 트리거됩니다.
마지막 활성 요청이 종료되면 ajaxStop을 통해 등록된 콜백 함수가 실행됩니다.
관찰 함수는 전역 함수이므로 $(document)를 사용하여 호출해야 합니다. 이미지 예제를 얻기 위해 Ajax 메서드를 사용하여 두 기능을 테스트합니다.
현재 페이지는 다음과 같습니다:

<div></div>
<button>load</button>

로그인 후 복사

동일 디렉토리에 있는 test.html의 내용은 다음과 같습니다.

<img src="avatar.jpg" />

로그인 후 복사

버튼을 클릭한 후 이미지를 로드하려면:

 $('button').click(function() {
  $('div').load('test.html');
 });

로그인 후 복사

이 시점에서 ajaxStart 및 ajaxStop 기능을 사용하여 프롬프트를 추가할 수 있습니다.

 $(document).ajaxStart(function() {//
  alert('load a picture');
 }).ajaxStop(function() {
  alert('show a picture');
 });
 $('button').click(function() {
  $('div').load('test.html');
 });

로그인 후 복사

이 때 버튼을 클릭하면 이미지를 로드하기 전에 사진을 로드하라는 메시지가 표시되고 로드 후에 사진이 표시됩니다.

오류 처리

가장 일반적으로 사용되는 방법은 전역 ajaxError 방법입니다. 존재하지 않는 페이지에 데이터 요청을 보내는 경우:

 $(document).ajaxError(function() {//
  alert('load failed!');
 });
 $('button').click(function() {
  $('div').load('noexsited.html');
 });

로그인 후 복사

이때 버튼을 클릭한 후:

로드되지 않는 방법의 경우 연결 처리에 실패 방법을 사용할 수도 있습니다.

 $('button').click(function() {
  $.get('noexsited.html', function(data) {

  }).fail(function(jqXHR) {
   alert('status is ' + jqXHR.status);
  });
 });

로그인 후 복사