XMLHttpRequest events

AJAX

🎓 XMLHttpRequest

• Последовательность действий
• Экземпляр XMLHttpRequest
• Метод open()
• Метод send()
• Свойство readyState
• Свойство status
• Свойство responseText

---

🎓 Обработка событий

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

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

• readystatechange
• ProgressEvent
• load
• error
• loadstart
• loadend
• progress
• timeout

---

🎓 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

☕ Пример в песочнице	🔗 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()

---

🎓 onload

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

var transport = new XMLHttpRequest ()

transport.onload = function () {
    console.log ( this.responseText )
}

🎓 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 ()

---

🎓 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 )
}

---

🎓 onerror

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

var transport = new XMLHttpRequest ()

transport.onerror = function ( err ) {
    console.log ( this.responseText )
}

☕ Пример в песочнице	☕ Пример в песочнице

---

💼 Упражнения	🔗 Протокол TCP	🔗 RFC793