XMLHttpRequest events - garevna/js-course GitHub Wiki

AJAX

:mortar_board: XMLHttpRequest

:mortar_board: Обработка событий

Значения свойств, начинающиеся на on, могут быть ссылкой на колбэк-функцию, которая будет вызвана в момент возникновения события

Тип обрабатываемого события - текст, следующий за on в имени свойства

:mortar_board: onreadystatechange

Свойство, значение которого является ссылкой на колбэк-функцию, которая будет обрабатывать событие изменения значения readyState

Назначить обработчика:

var transport = new XMLHttpRequest ()

transport.onreadystatechange = function ( event ) {
   if ( this.readyState === 4 && 
        this.status === 200 ) 
           console.log ( event )
}

При вызове колбэк-функции ей будет передан объект события:

▼ Event {isTrusted: true, type: "readystatechange", target: XMLHttpRequest, currentTarget: XMLHttpRequest, eventPhase: 2, …}
    bubbles: false
    cancelBubble: false
    cancelable: false
    composed: false
  ► currentTarget: XMLHttpRequest { onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, … }
    defaultPrevented: false
    eventPhase: 0
    isTrusted: true
  ► path: []
    returnValue: true
  ► srcElement: XMLHttpRequest { onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, … }
  ► target: XMLHttpRequest { onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, … }
    timeStamp: 87810968.4
    type: "readystatechange"
  ► __proto__: Event
:coffee: Пример в песочнице :link: HTTP Status Messages

ProgressEvent

Остальные события ( loadstart, loadend, progress, load, error, timeout ) отличаются от события readystatechange - они относятся к категории ProgressEvent:

▼ ƒ ProgressEvent()
    arguments: null
    caller: null
    length: 1
    name: "ProgressEvent"
  ► prototype: ProgressEvent {constructor: ƒ, Symbol(Symbol.toStringTag): "ProgressEvent"}
  ► __proto__: ƒ Event()

:mortar_board: onload

Это свойство содержит ссылку колбэк-функцию, которая будет обрабатывать событие благополучного завершения загрузки данных с сервера

var request = new XMLHttpRequest
request.open (
    "get",
    'https://www.random.org/integers/?num=10&min=0&max=255&col=1&base=16&format=plain&rnd=new'
)

request.onload = function() {
   if ( this.status === 200 ) {
        console.log ( this.response )
   }
}
request.send ()

:mortar_board: onloadstart | onprogress | onloadend

var request = new XMLHttpRequest()
request.open (
    "get",
    'https://httpbin.org/get',
    true 
)
request.responseType = "arraybuffer";

request.onloadstart = function( event ) {
   console.log ( 'START' )
}
request.onloadend = function( event ) {
   console.log ( 'END' )
}
request.onprogress = function( event ) {
   console.log ( `progress: ${event.loaded} / ${event.total}` )
}
request.onload = function( event ) {
   console.log ( this.response )
}
request.send ()

:mortar_board: ontimeout

Это свойство содержит ссылку колбэк-функцию, которая будет вызвана, когда истечет установленный временной интервал

Временной интервал устанавливается путем определения значения свойства timeout

var request = new XMLHttpRequest()
request.open (
    "POST",
    'https://httpbin.org/post'
)

request.setRequestHeader (
    "Content-Type",
    "application/x-www-form-urlencoded"
)

request.timeout = 100

request.ontimeout = function( event ) {
   console.log ( event )
}

:mortar_board: onerror

Это свойство содержит ссылку колбэк-функцию, которая будет обрабатывать ошибки, возникающие при загрузке данных с сервера

var transport = new XMLHttpRequest ()

transport.onerror = function ( err ) {
    console.log ( this.responseText )
}
:coffee: Пример в песочнице :coffee: Пример в песочнице
:briefcase: Упражнения :link: Протокол TCP :link: RFC793