XMLHttpRequest(AJAX)

AJAX - Asynchronous Javascript and XML - асинхронный JavaScript и XML

Способ загрузки данных, асинхронно - без полного обновления страницы.

var request = new XMLHttpRequest();
request.open("GET", "ajax.php?input=" + input);
request.send();
request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200)
    processResult(request.responseText);
}

class XMLHttpRequest

Наследник EventTarget

Объект для работы с HTTP-запросами.

Несмотря на название умеет работать с любыми типами данных, не только с XML.

var xhr = new XMLHttpRequest();

onabort

Вы­зы­ва­ет­ся при пре­ры­ва­нии за­про­са.

onerror

Вы­зы­ва­ет­ся в слу­чае за­вер­ше­ния за­про­са по ошиб­ке. Об­ра­ти­те вни­ма­ние, что HTTP-ко­ды со­стоя­ния, та­кие как 404, не счи­та­ют­ся ошиб­кой, по­сколь­ку сам от­вет по­лу­чен ус­пеш­но. Од­на­ко это со­бы­тие мо­жет по­ро­дить от­ри­ца­тель­ный от­ветсер­ве­ра DNS или бес­ко­неч­ный цикл пе­ре­а д­ре­са­ций.

onload

Вызывается при успешном выполнении запроса. В обработчик передается XMLHttpRequestProgressEvent

xhr.onload = function(evt){};

onloadend

Вы­зы­ва­ет­ся в слу­чае ус­пеш­но­го или не­удач­но­го за­вер­ше­ния за­про­са, по­сле со­бы­тий «load», «abort», «error» и «timeout».

onloadstart

Вы­зы­ва­ет­ся с на­ча­лом вы­пол­не­ния за­про­са.

onprogress

Вы­зы­ва­ет­ся пе­рио­ди­че­ски (при­мер­но раз в 50 мил­ли­се­кунд) в хо­де за­груз­ки те­ла от­ве­та.

onreadystatechange

Вы­зы­ва­ет­ся при из­ме­не­нии зна­че­ния свой­ст­ва readyState. Наи­бо­лее ва­жен для об­ра­бот­ки си­туа­ции за­вер­ше­ния за­про­са.

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4)
    ...
}

ontimeout

Вы­зы­ва­ет­ся, ес­ли ис­тек­ло вре­мя ожи­да­ния, оп­ре­де­ляе­мое свой­ст­вом timeout, а от­вет так и не был при­нят.

readyState

Со­стоя­ние HTTP-за­про­са. В мо­мент соз­да­ния объ­ек­та XMLHttpRequest это свой­ст­во при­об­ре­та­ет зна­че­ние 0, а к мо­мен­ту по­лу­че­ния пол­но­го HTTP-от­ве­та это зна­че­ние воз­рас­та­ет до 4. Воз­мож­ные зна­че­ния свой­ст­ва оп­ре­де­ля­ют кон­стан­ты, пе­ре­чис­лен­ные вы­ше.

Зна­че­ние свой­ст­ва readyState мо­жет умень­шать­ся, толь­ко ес­ли в про­цес­се вы­пол­не­ния за­про­са был вы­зван ме­тод abort() или open().

Тео­ре­ти­че­ски при ка­ж­дом из­ме­нении зна­че­ния это­го свой­ст­ва дол­жен вы­зы­вать­ся об­ра­бот­чик со­бы­тия onreadystatechange. Од­на­ко на прак­ти­ке со­бы­тие га­ран­ти­ро­ван­но воз­ни­ка­ет, толь­ко ко­гда свой­ст­во readyState по­лу­ча­ет зна­че­ние 4. (Со­бы­тия «progress», вве­ден­ные спе­ци­фи­ка­ци­ей XHR2, обес­пе­чи­ва­ют бо­лее на­деж­ный спо­соб сле­же­ния за хо­дом вы­пол­не­ния за­про­са.)

• XMLHttpRequest.UNSENT = 0, На­чаль­ное со­стоя­ние. Объ­ект XMLHttpRequest толь­ко что соз­дан или сбро­шен в ис­ход­ное со­стоя­ние вы­зо­вом ме­то­да abort().

• XMLHttpRequest.OPENED = 1, Ме­тод open() уже вы­зван, но об­ра­ще­ния к ме­то­ду send() еще не бы­ло. За­прос еще неот­прав­лен.

• XMLHttpRequest.HEADERS_RECEIVED = 2, Вы­зван ме­тод send() и при­ня­ты за­го­лов­ки от­ве­та, но те­ло от­ве­та еще не при­ня­то.

• XMLHttpRequest.LOADING = 3, На­чат при­ем те­ла от­ве­та, но при­ем еще не за­вер­шил­ся.

• XMLHttpRequest.DONE = 4, HTTP-от­вет при­нят пол­но­стью или при­ем был ос­та­нов­лен из-за ошиб­ки.

response

В спе­ци­фи­ка­ции XHR2 это свой­ст­во хра­нит от­вет сер­ве­ра. Тип свой­ст­ва за­ви­сит от зна­че­ния свой­ст­ва responseType. Ес­ли responseType со­дер­жит пус­тую стро­ку или стро­ку «text», дан­ное свой­ст­во со­дер­жит те­ло от­ве­та в ви­де стро­ки. Ес­ли response­Type со­дер­жит стро­ку «document», зна­че­ни­ем дан­но­го свой­ст­ва бу­дет объ­ект Docu­ment, по­лу­чен­ный в ре­зуль­та­те раз­бо­ра XML- или HTML-до­ку­мен­та в те­ле от­ве­та.

Ес­ли responseType со­дер­жит стро­ку «arraybuffer», зна­че­ни­ем дан­но­го свой­ст­ва бу­дет объ­ект ArrayBuffer, пред­став­ляю­щий дво­ич­ные дан­ные в те­ле от­ве­та. А ес­лиres­pon­seType со­дер­жит стро­ку «blob», зна­че­ни­ем дан­но­го свой­ст­ва бу­дет объ­ект Blob, пред­став­ляю­щий дво­ич­ные дан­ные в те­ле от­ве­та.

responseText

Ес­ли зна­че­ние свой­ст­ва readyState мень­ше 3, дан­ное свой­ст­во бу­дет со­дер­жать пус­тую стро­ку. Ес­ли зна­че­ние свой­ст­ва readyState рав­но 3, дан­ное свой­ст­во воз­вра­ща­ет часть от­ве­та, ко­то­рая бы­ла при­ня­та к те­ку­ще­му мо­мен­ту. Ес­ли зна­че­ние свой­ст­ва readyState рав­но 4, это свой­ст­во со­дер­жит пол­ное те­ло от­ве­та.

Ес­ли в от­ве­те име­ет­ся за­го­ло­вок, оп­ре­де­ляю­щий ко­ди­ров­ку сим­во­лов в те­ле от­ве­та, ис­поль­зу­ет­ся эта ко­ди­ров­ка, в про­тив­ном слу­чае пред­по­ла­га­ет­ся ко­ди­ров­ка UTF-8.

responseType

В спе­ци­фи­ка­ции XHR2 это свой­ст­во оп­ре­де­ля­ет тип от­ве­та и тип свой­ст­ва response. До­пус­ти­мы­ми зна­че­ния­ми яв­ля­ют­ся «text», «document», «arraybuffer» и «blob». Зна­че­ни­ем по умол­ча­нию яв­ля­ет­ся пус­тая стро­ка, ко­то­рая так­же яв­ля­ет­ся си­но­ни­мом зна­че­ния «text». Ес­ли ус­та­но­вить это свой­ст­во вруч­ную, по­сле­дую­щие по­пыт­ки об­ра­тить­ся к свой­ст­вам responseText и responseXML бу­дут воз­бу­ж­дать ис­клю­че­ния и для по­лу­че­ния от­ве­та сер­ве­ра не­об­хо­ди­мо бу­дет ис­поль­зо­вать свой­ст­во response, пре­ду­смот­рен­ное спе­ци­фи­ка­ци­ей XHR2.

responseXML

От­вет на за­прос, ко­то­рый ин­тер­пре­ти­ру­ет­ся как XML- или HTML-до­ку­мент и воз­вра­ща­ет­ся в ви­де объ­ек­та Document. Это свой­ст­во бу­дет иметь зна­че­ние null, ес­ли те­ло от­ве­та еще не по­лу­че­но или оно не яв­ля­ет­ся до­пус­ти­мым XML или HTML-до­ку­мен­том.

status

HTTP-код со­стоя­ния, по­лу­чен­ный от сер­ве­ра, та­кой как 200 – в слу­чае ус­пе­ха, 404 – в слу­чае ошиб­ки от­сут­ст­вия до­ку­мен­та или 0 – ес­ли сер­вер еще не при­слалкод со­стоя­ния.

statusText

Это свой­ст­во со­дер­жит текст, со­от­вет­ст­вую­щий HTTP-ко­ду со­стоя­ния в от­ве­те. То есть, ко­гда свой­ст­во status име­ет зна­че­ние 200, это свой­ст­во со­дер­жит стро­ку «OK», а ко­гда 404 – стро­ку «Not Found». Это свой­ст­во со­дер­жит пус­тую стро­ку, ес­ли сер­вер еще не при­слал код со­стоя­ния.

timeout

Свой­ст­во, вве­ден­ное спе­ци­фи­ка­ци­ей XHR2, оп­ре­де­ляю­щее пре­дель­ное вре­мя ожи­да­ния от­ве­та в мил­ли­се­кун­дах. Ес­ли вы­пол­не­ние HTTP-за­про­са зай­мет боль­ше вре­ме­ни, чем ука­за­но в дан­ном свой­ст­ве, он бу­дет пре­рван и бу­дет сге­не­ри­ро­ва­но со­бы­тие «timeout». Это свой­ст­во мож­но ус­та­но­вить толь­ко по­сле вы­зо­ва ме­то­да open() и пе­ред вы­зо­вом ме­то­да send().

xhr.timeout = 10000;

upload

Свой­ст­во, вве­ден­ное спе­ци­фи­ка­ци­ей XHR2, ссы­лаю­щее­ся на объ­ект XML­Http­Re­qu­est­Upload, ко­то­рый оп­ре­де­ля­ет на­бор свойств ре­ги­ст­ра­ции об­ра­бот­чи­ков со­бы­тий для сле­же­ния за про­цес­сом вы­груз­ки те­ла HTTP-за­про­са.

withCredentials

Свой­ст­во, вве­ден­ное спе­ци­фи­ка­ци­ей XHR2, оп­ре­де­ляю­щее не­об­хо­ди­мость ау­тен­ти­фи­ка­ции при вы­пол­не­нии меж­до­мен­но­го CORS-за­про­са и не­об­хо­ди­мость об­ра­бот­ки за­го­лов­ков cookie в CORS-от­ве­тах. По умол­ча­нию име­ет зна­че­ние false.

abort()

Воз­вра­ща­ет объ­ект XMLHttpRequest в ис­ход­ное со­стоя­ние, со­от­вет­ст­вую­щее зна­че­нию 0 в свой­ст­ве readyState, и от­ме­ня­ет лю­бые за­пла­ни­ро­ван­ные се­те­вые взаи­мо­дей­ст­вия. Этот ме­тод мо­жет по­тре­бо­вать­ся, на­при­мер, ес­ли за­прос вы­пол­ня­ет­ся слиш­ком дол­го и на­доб­ность в по­лу­че­нии от­ве­та уже от­па­ла.

getAllResponseHeaders()

Воз­вра­ща­ет все HTTP-за­го­лов­ки от­ве­та (с от­фильт­ро­ван­ны­ми за­го­лов­ка­ми cookie и CORS), по­лу­чен­ные от сер­ве­ра, или null, ес­ли за­го­лов­ки еще не бы­ли по­лу­че­ны. За­го­лов­ки cookie и CORS от­фильт­ро­вы­ва­ют­ся и не мо­гут быть по­лу­че­ны. За­го­лов­ки воз­вра­ща­ют­ся в ви­де един­ст­вен­ной стро­ки и от­де­ля­ют­ся друг от дру­га ком­би­на­ци­ ей сим­во­лов rn.

getResponseHeader(string header)

Воз­вра­ща­ет зна­че­ние ука­зан­но­го за­го­лов­ка header в HTTP-от­ве­те или null, ес­ли за­го­лов­ки во­об­ще не бы­ли по­лу­че­ны или ес­ли от­вет не со­дер­жит тре­буе­мо­го за­го­лов­ка header. За­го­лов­ки cookie и CORS от­фильт­ро­вы­ва­ют­ся, и их нет смыс­ла за­пра­ши­вать. Ес­ли бы­ло при­ня­то не­сколь­ко за­го­лов­ков с ука­зан­ным име­нем, зна­че­нияэтих за­го­лов­ков объ­еди­ня­ют­ся в од­ну стро­ку че­рез за­пя­тую и про­бел.

open(string method, string url[, boolean async, string user, string pass])

Этот ме­тод ини­циа­ли­зи­ру­ет объ­ект XMLHttpRequest и со­хра­ня­ет свои ар­гу­мен­ты для по­сле­дую­ще­го ис­поль­зо­ва­ния ме­то­дом send().

Ар­гу­мент method оп­ре­де­ля­ет HTTP-ме­тод, ис­поль­зуе­мый для от­прав­ки за­про­са. Сре­ди наи­бо­лее ус­то­яв­ших­ся ме­то­дов мож­но на­звать GET, POST и HEAD. Реа­ли­за­ции мо­гут так­же под­дер­жи­вать ме­то­ды CONNECT, DELETE, OPTIONS, PUT,TRACE и TRACK.

Ар­гу­мент url оп­ре­де­ля­ет URL-ад­рес, ко­то­рый яв­ля­ет­ся пред­ме­том за­про­са. Раз­ре­ше­ние от­но­си­тель­ных URL-ад­ре­сов про­из­во­дит­ся обыч­ным об­ра­зом с ис­поль­зо­ва­ни­ем URL-ад­ре­са до­ку­мен­та со сце­на­ри­ем. По­ли­ти­ка об­ще­го про­ис­хо­ж­де­ния тре­бу­ет, что­бы дан­ный URL-ад­рес со­дер­жал те же имя хос­та и но­мерпор­та, что и до­ку­мент со сце­на­ри­ем, вы­пол­няю­щим за­прос. Объект XHR2 позволяет выполнять междоменные запросы к серверам, поддерживающим заголовки CORS.

Ес­ли ар­гу­мент async ука­зан и име­ет зна­че­ние false, за­прос бу­дет вы­пол­нять­ся в син­хрон­ном ре­жи­ме, и по­сле­дую­щий вы­зов send() за­бло­ки­ру­ет ра­бо­ту сце­на­рия, по­ка от­вет не бу­дет по­лу­чен пол­но­стью. Син­хрон­ные за­про­сы ре­ко­мен­ду­ет­ся ис­поль­зо­вать толь­ко в фо­но­вых по­то­ках вы­пол­не­ния.

Не­обя­за­тель­ные ар­гу­мен­ты user и pass оп­ре­де­ля­ют имя поль­зо­ва­те­ля и па­роль для HTTP-за­про­са.

xhr.open('GET', 'data.json', false);

overrideMimeType(string mime)

Этот ме­тод по­зво­ля­ет ука­зать, что от­вет сер­ве­ра дол­жен ин­тер­пре­ти­ро­вать­ся в со­от­вет­ст­вии с ука­зан­ным MIME-ти­пом mime (и па­ра­мет­ром charset, ес­ли он ука­зан в оп­ре­де­ле­нии ти­па mime), без уче­та зна­че­ния за­го­лов­ка Content-Type в от­ве­те.

send(any body)

Ини­ции­ру­ет вы­пол­не­ние HTTP-за­про­са. Ес­ли пе­ред этим не вы­зы­вал­ся ме­тод open() или, обоб­щен­но, ес­ли зна­че­ние свой­ст­ва readyState не рав­но 1, ме­тод send() воз­бу­ж­да­ет ис­клю­че­ние. В про­тив­ном слу­чае он на­чи­на­ет вы­пол­не­ние HTTP-за­про­са,

Ес­ли в пред­ше­ст­вую­щем вы­зо­ве ме­то­да open() ар­гу­мент async имел зна­че­ние false, дан­ный ме­тод бло­ки­ру­ет­ся и не воз­вра­ща­ет управ­ле­ние, по­ка зна­че­ние свой­ст­ва readyState не ста­нет рав­но 4 и от­вет сер­ве­ра не бу­дет по­лу­чен пол­но­стью. В про­тив­ном слу­чае ме­тод send() не­мед­лен­но воз­вра­ща­ет управ­ле­ние, а от­вет сер­ве­ра об­ра­ба­ты­ва­ет­ся асин­хрон­но, с по­мо­щью об­ра­бот­чи­ков со­бы­тий.

xhr.send()

setRequestHeader(string name, string value)

Оп­ре­де­ля­ет HTTP-за­го­ло­вок с име­нем name и зна­че­ни­ем value, ко­то­рый дол­женбыть вклю­чен в за­прос, пе­ре­да­вае­мый по­сле­дую­щим вы­зо­вом ме­то­да send(). Этот ме­тод мо­жет вы­зы­вать­ся, толь­ко ко­гда свой­ст­во readyState име­ет зна­че­ние 1, т. е. по­сле вы­зо­ва ме­то­да open(), но пе­ред вы­зо­вом ме­то­да send().

Ес­ли за­го­ло­вок с име­нем name уже был оп­ре­де­лен, но­вым зна­че­ни­ем за­го­лов­ка ста­нет преж­нее зна­че­ние за­го­лов­ка плюс за­пя­тая с про­бе­лом и но­вое зна­че­ние value,пе­ре­дан­ное ме­то­ду.

Ес­ли ме­то­ду open() бы­ла пе­ре­да­на ин­фор­ма­ция об ав­то­ри­за­ции, объ­ект XMLHttp­Request ав­то­ма­ти­че­ски до­ба­вит за­го­ло­вок Authorization. Од­на­ко этот за­го­ло­вок мо­жет быть так­же до­бав­лен ме­то­дом setRequestHeader().

Объ­ект XMLHttpRequest ав­то­ма­ти­че­ски ус­та­нав­ли­ва­ет за­го­лов­ки «Content-Length», «Date», «Referer» и «User-Agent» и не по­зво­ля­ет из­ме­нять их зна­че­ния.