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

관찰 기능

관찰 함수로 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);
  });
 });

JSONP

JSONP는 패딩이 포함된 JSON으로, 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 사용하여 도메인 전체에서 Javascript 파일을 가져오므로 JSON 데이터를 도메인 전체에서 가져올 수 있습니다.
JSONP의 형식은 표준 JSON 파일을 앞에 임의의 문자열이 오는 괄호 쌍으로 묶는 것입니다. P라고 불리는 이 문자열은 데이터를 요청하는 클라이언트에 의해 결정됩니다.
위의 예와 동일한 버튼을 사용하여 먼저 외부 도메인 페이지 otherdomain.com/index.php의 콘텐츠를 다음과 같이 설정합니다.

<&#63;php
$data = '{ "name": "stephenlee", "sex": "male" }';
echo $_GET['callback'] .'('. $data .')';

JSON 데이터를 도메인 간 획득하기 위해 특별한 자리 표시자 ?를 사용합니다.

 $('button').click(function() {
  $.getJSON('otherdomain.com/index.php?callback=?', function(data) {
   console.log(data);
  });
 });

데이터 수집에 성공했습니다.