Пример AJAX на Vanilla JavaScript

Дата публикации: 2016-02-15

От автора: данная статья – это продолжение нашего знакомства с AJAX. Ниже мы рассмотрим пример, в котором используется XMLHttpRequest API для инициализации AJAX запроса.

AJAX пример

Давайте рассмотрим вот такую базовую структуру:

<div>
 <img src="Einstein.jpg" alt="Einstein">
 <button id="request">Learn more about Einstein</button>
 <div id="bio"></div>
</div>

<div>

<button id="request">Learn more about Einstein</button>

</div>

И его визуализацию:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Мы хотим, чтобы по клику на кнопку срабатывал AJAX запрос, появлялся элемент с ID bio и заполнялся данными из ответа. Данные статичны и хранятся в файле Bio.txt.

Обратите внимание: файл загружен на сервер Codepen. Т.е. проблемы с ограничением домена у нас не возникнет. Ниже AJAX код:

var btn = document.getElementById('request');
var bio = document.getElementById('bio');
 
var request = new XMLHttpRequest();
 
request.onreadystatechange = function() {
  if(request.readyState === 4) {
 bio.style.border = '1px solid #e8e8e8';
 if(request.status === 200) { 
 bio.innerHTML = request.responseText;
 } else {
 bio.innerHTML = 'An error occurred during your request: ' +  request.status + ' ' + request.statusText;
 } 
  }
}
 
request.open('Get', 'Bio.txt');
 
btn.addEventListener('click', function() {
  this.style.display = 'none';
  request.send();
});

var btn = document.getElementById('request');

var bio = document.getElementById('bio');

var request = new XMLHttpRequest();

request.onreadystatechange = function() {

if(request.readyState === 4) {

bio.style.border = '1px solid #e8e8e8';

if(request.status === 200) {

bio.innerHTML = request.responseText;

} else {

bio.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText;

}

request.open('Get', 'Bio.txt');

btn.addEventListener('click', function() {

this.style.display = 'none';

request.send();

});

Разбираем все по шагам

Давайте разберем код выше:

Создается объект XMLHttpRequest.

Пишем функцию, которая сработает, когда сервер вернет данные. В объекте XMLHttpRequest есть свойство onreadystatechange, в котором хранится данная функция. Когда состояние запроса изменяется, будет выполняться эта колбэк функция.

Отслеживаем пару других свойств объекта XMLHttpRequest. Первое свойство, readyState определяет состояние запроса. На протяжении всего запроса меняется его состояние от 0 до 4 (4 означает, что мы получили ответ с данными). Второе свойство, status показывает успешность или неуспешность запроса (200 означает, что запрос успешно прошел). В этом примере предполагается, что мы вытянули данные, а AJAX запрос прошел успешно. Мы обновили контент нужного элемента. Если запрос не прошел, мы отображаем сообщение с текстом из объекта XMLHttpRequest.

Задаем тип запроса с помощью метода open. Этот метод принимает два обязательных параметра и 3 опциональных. Первый параметр задает HTTP метод (GET или POST). Во втором параметре указывается URL страницы, куда мы посылаем запрос. В третьем параметре можно указать тип запроса синхронный или асинхронный (true или false). Для аутентификации можно использовать два дополнительных параметра.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Отправляет запрос по клику на кнопку с помощью метода send. Также на этом этапе мы прячем кнопку.

Обратите внимание: если вам нужно поддерживать очень старые версии Internet Explorer (IE6 и ниже), вам необходимо создать объект ActiveXObject. Скриншот ниже показывает визуализацию запроса в консоли браузера.

Демо выглядит так:

Если же запросить файл, которого нет, то будет показано сообщение:

Обратите внимание: Если вы запустили этот пример на локальном компьютере (и файл Bio.txt хранится на нем), то у вас будет другое сообщение об ошибке. К примеру, вы можете увидеть следующее:

Ниже Codepen демо:

Заключение

В этом уроке мы рассмотрели, как создать простой AJAX запрос на vanilla JavaScript. В следующей статье серии мы рассмотрим JQuery функции и методы для работы с AJAX. А в последней части мы рассмотрим более сложный пример. Следите за обновлениями!

Автор: George Martsoukos

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее