XMLHttpRequest

XMLHttpRequest - це стандартний об'єкт JavaScript для роботи з технологією AJAX.

Синтаксис:

xhr = new XMLHttpRequest();

Параметри:

xhr - зміна яка отримує об'єкт XMLHttpRequest.

Опис:

XMLHttpRequest (XHR)- об'єкт для відправки і отримання даних з сервера без перезавантаження веб-сторінки.

Об'єкт XMLHttpRequest підтримують усі браузери але створення об'єкту у старих версіях до Internet Explorer 7 є іншим. Дані браузери є застарілими, тому рекомендовано використовувати стандартний спосіб створення об'єкту new XMLHttpRequest(). У випадку якщо Вам всежтаки потрібна підтримка старих браузерів, то використовуйте наступний кросбраузерний спосіб створення об'єкту XMLHttpRequest:

function AJAX(){
var xml=false;
try{
  xml=new XMLHttpRequest();}catch(er){
  try{
    xml= new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(ero){
      try{
        xml= new ActiveXObject("Msxml2.XMLHTTP");
        }catch(eror){ xml=FALSE; }
      }
    }
return xml;
}

//застосування
var xhr = new AJAX();
xhr.open("get", "/", true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200) alert(xhr.responseText);
}
xhr.send(null);

Об'єкт XMLHttpRequest може працювати двома способами: синхроно і асинхроно. Спосіб задається методом XMLHttpRequest.open().

При синхроному способі створюється об'єкт XMLHttpRequest, ініцалізується за допомогою методу open() і відправляється за допомогою send(). Скрипт в цю мить "завмирає" і чекає відповіді від сервера. Коли отримано відповідь від сервера скрипт (код) виконується далі.

var xhr = new XMLHttpRequest();
xhr.open("get", "", false);
xhr.send(null);
if(xhr.status==200) alert(xhr.responseText);

При асинхроному способі створюється об'єкт XMLHttpRequest, ініцалізується за допомогою методу open() і відправляється за допомогою send(). Браузер при цьому не чекає відповіді від сервера, а скрипт (код) виконується дальше. Коли отримано відповідь від сервера виникає подія (ї) об'єкта XMLHttpRequest такі як onload, onreadystatechange.

var xhr = new XMLHttpRequest();
xhr.open("get", "", true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200) alert(xhr.responseText);
}
xhr.send(null);

XMLHttpRequest дозволяє отримувати дані формату: "arraybuffer", "blob", "document", "ms-stream", "text", "json". Отримані дані від сервера містяться у властивості response. Прицьому тип даних які необхідно отримати від сервера можна вказати у responseType, тоді браузер буде автоматично перетворювати отримані дані у вказаний тип даних.

CORS

CORS ( Cross-Origin Resource Sharing ) - дозволяє робити кросдомені (міжсайтові) AJAX запити.

При відправлені AJAX запиту на інший сайт браузер додає до заголовку запиту "Origin: URL", а сервер повертає відповідь яка містить заголовок: "Access-Control-Allow-Origin: URL".

Де URL - адреса веб-сторінки з якої відправляється запит, якщо "*" дозволено усім сайтам.

Якщо сервер НЕ поверне заголовок "Access-Control-Allow-Origin:" то це означає що сервер не дозволяє завантажувати дані AJAX запитом сторонім сайтам - в такому випадку браузер не дозволяє міжсайтовий запит.

XMLHttpRequest

readyState - стан об'єкту.
timeout - повертає або задає значення тайм-ауту.
withCredentials - чи приймати дані авторизації з іншого сайту.
responseURL - URL адреса з якої отримано відповідь.
status - код відповіді сервера.
statusText - назва відповіді сервера.
responseType - тип відповіді сервера.
response - дані отримані від сервера.
responseText - відповідь сервера у вигляді тексту.

XMLHttpRequest

open() - ініцалізація запиту.
setRequestHeader() - додає значення заголовка.
send() - відправляє запит.
abort() - перериває запит.
getRequestHeader() - повертає значення заголовка.
getAllResponseHeaders() - повертає всі заголовки.
overrideMimeType() - задає MIME тип відповіді сервера.
addEventListener() - додає подію.
removeEventListener() - видаляє подію.
dispatchEvent() - імітує подію.

XMLHttpRequest

onreadystatechange - зміна стану завантаження документу.
onloadstart - розпочато завантаження.
onprogress - відбувається процес завантаження.
onabort - перервано запит.
onerror - виникла помилка.
onload - дані завантажено.
ontimeout - час тайм-ауту минув.
onloadend - завершено завантаження.

XMLHttpRequest 2 це вдосконалена версія XMLHttpRequest в яку добавлено багато нових можливостей, при цьому є повна підтримка першої версії. Усі сучасні браузери підтримубть XMLHttpRequest 2.

Приклад:

Завантаження HTML коду з сервера за допомогою AJAX:

var xhr = new XMLHttpRequest();
xhr.open("get", "/", true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert( this.responseText );
}
}
xhr.send(null);

Завантаження даних з сервера формату JSON за допомогою AJAX:

var xhr = new XMLHttpRequest();
xhr.open("get", "/ajax.php?act=test_info", true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var ob=xhr.response;
alert(ob.date);
}
}
xhr.responseType="json";
xhr.send(null);

var xhr = new XMLHttpRequest();
xhr.open("get", "/ajax.php?act=test_get&name=javascript", true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var ob=JSON.parse( xhr.responseText );
alert(ob.name);
}
}
xhr.send(null);

Відправлення запиту POST:

var ajax = new XMLHttpRequest();
ajax.open("post", "/ajax.php?act=test_post", true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.onload=function(){
if(this.status==200)
alert(this.response.test);
else alert("помилка завантаження :"+this.status);
}
ajax.responseType="json";
ajax.send("name=javascript&test="+document.getElementById("textPost").value);