Загрузка данных через SCRIPT с отловом ошибок

Среди AJAX-транспортов особое место занимает SCRIPT, т.к. запрос данных при помощи динамического скрипта работает на любые домены.

Но как понять - загрузился ли скрипт и выполнился успешно или нет?

Предлагаемое решение предполагает транспорт JSONP, но код определения состояния загрузки скрипта может быть использовано отдельно.

Отлов окончания загрузки скрипта

Для отлова окончания загрузки будем использовать onreadystatechange для IE и onload/onerror для остальных браузеров.

var script= document.createElement('script')
script.src = "myUrl.php"
script.onreadystatechange= function () {      
   if (this.readyState == 'complete' || this.readyState == 'loaded') {      
      setTimeout(check, 0)
   }
}
script.onload = script.onerror = check
document.body.appendChild(script)

В этом коде функция check вызывается при любом окончании загрузки скрипта - успешном или неудачном. А, выполнившись, она сможет проанализировать результат загрузки и понять, что произошло.

Код довольно прост, есть лишь несколько тонких моментов.

Во-первых, используются два readyState.

loaded

Срабатывает после окончания запроса, в любом случае - загрузился ли скрипт или произошла ошибка (скажем, 404).

complete

Срабатывает после выполнения скрипта

IE в зависимости от версии генерирует одно или оба readyState в зависимости от своей версии, настроения и результата загрузки.

Подцепившись на оба readyState, я гарантирую, что check вызовется во всех IE, даже если скрипт не загрузился или в нем ошибка. В некоторых версиях и подверсиях IE readyState не работает и придется ловить ошибки по таймауту как и в опере. То есть, таймаут в приложение к описанному способу обязательно должен быть.

Вызов с setTimeout используется, чтобы дать загруженному скрипту квант времени на выполнение. Таким образом, если скрипт загрузился - то check сработает после того, как он выполнится. Как мы увидим далее - это очень важно.

Для остальных браузеров используются события onerror и onload. Конечно, можно было бы разделить обработчики, ведь при вызове onerror - уже понятно, что произошла ошибка.

Проверка успешности JSONP

Следующий код вызывается так:

go('script.php','loaded', 'failed')

Аргументы:

1. URL скрипта (можно на другом домене)
2. Имя JSONP-каллбэка в случае успешного вызова
3. Имя каллбэка при ошибке

Он загрузит скрипт и гарантирует вызов одного или другого каллбэка в зависимости от результата.

При этом учитываются ошибки как при выполнении запроса, так и при выполнении скрипта (мало ли, вдруг там стэктрейс серверного исключения ).

function go(url, callback, errback) {

   var complete = false
   
   // временный обработчик
   var myCallback = 'callback_'+Math.round(Math.random()*1000000)

   window[myCallback] = function(data) {         
      setComplete()
      window[callback](data)      
   }
   
   url = url+'?callback='+myCallback
   
   /* очищает память */   
   function setComplete() {   
      complete = true
      try {
         // если каллбэк не очистить - утечка памяти захватит все замыкание
         delete window[myCallback]      
      } catch(e) {
         window[myCallback] = undefined
      }
   }
   
   /* эта функция сработает при любом результате запроса */
   function check() {      
      // эта функция запускается так, чтобы при успешной загрузке
      // она сработала после каллбэка
      if (complete) return      
      setComplete()
      window[errback]()
   }
   
   var script = document.createElement('script')   
  
   script.onreadystatechange= function () {    
      if (this.readyState == 'complete' || this.readyState == 'loaded') {      
         setTimeout(check, 0) // дать скрипту время на выполнение
      }
   }
   
   script.onload = script.onerror = check
   script.src = url
   document.body.appendChild(script)
}

В начале кода создается уникальный глобальный callback со случайным именем myCallback. Именно он будет передан как функция для JSONP-вызова.

Функция setComplete вызывается при окончании запроса. Она устанавливает флаг complete и удаляет myCallback.

Дальше все просто:

1. Делается запрос JSONP, вызывающий myCallback.
2. Если все хорошо - вызовется обработчик, а затем - check. Обрабочик поставит complete = true, так что check поймет, что делать ей здесь нечего и завершится.
3. Если произошла ошибка (любая) - вызовется сразу check, которая запустит обработчик ошибки.

Кроссбраузерность

Этот код был протестирован во всех браузерах и отлично работает везде, включая Firefox, Safari, Chrome, кроме некоторых подверсий IE и Opera.
Так что для Оперы и, заодно, для гарантии работы во всех IE придется использовать старый добрый setTimeout: если за 10 секунд не загрузилось, значит, наверное, что-то стряслось.

Демо

Вот демо этого метода: http://javascript.ru/examples/tmp/script.html.

P.S. Этот код написан из интереса к проблеме и является Proof of Concept.