Асинхронный JavaScript.

Работа с REST API

Репозиторий

https://goo.gl/Zu4DDD

Общение с сервером

Браузер (JavaScript)

Сервер (Python)

Запрос

(URL)

Ответ

(html, css, js, media)

Общение с сервером

Браузер (JavaScript)

Сервер (Python)

AJAX

Запрос

(Route)

Ответ

(html, xml, json, media)

SPA (Single Page Applications)

 

Онлайн-магазины

 

Каталоги

 

Любой сайт динамическими данными

(погода, онлайн-игры, результаты матчей)

Где применяется?

Callback (ф-ия обратного вызова)

  


  function sum(a, b) {
    return parseFloat(a) + parseFloat(b);
  }

  var five = sum(2, 3)

Callback (ф-ия обратного вызова)

  


  function slooow(a, b) {
    return getFromAPI(a) + getFromAPI(b);
  }

  var five = slooow(2, 3) // Задержка

Callback (ф-ия обратного вызова)

  


  function slooow(a, b, callback) {
    var a = getFromAPI(a);
    var b = getFromAPI(b);

    var sum = a + b;
    callback(sum);
  }

  slooow(2, 3, function(result) {
    doSomethingWith(result);
  })

XMLHttpRequest

Создаем объект

Открываем соединение

Отправляем запрос

Проверяем статус

Обрабатываем ответ

XMLHttpRequest






  var XHR = new XMLHttpRequest();


  XHR.open('GET', 'http://api.com/actors', false);


  XHR.send();


  XHR.onprogress = function(event) {
    console.log('Загружено:' + event.loaded + ' из ' + event.total);
  }


  xhr.onload = function() {
    console.log('Код ответа:' + this.status);
  }

Синхронный вызов








  var actors;

  var XHR = new XMLHttpRequest();

  XHR.open('GET', 'http://api.com/actors', false);

  XHR.send();

  xhr.onload = function() {
    actors = JSON.parse( this.responseText )
  }

  console.log(actors)
  // [{name: 'Том', last_name: 'Круз'}]

Асинхронный вызов








  var actors;

  var XHR = new XMLHttpRequest();

  XHR.open('GET', 'http://api.com/actors', true);

  XHR.send();

  xhr.onload = function() {
    actors = JSON.parse( this.responseText )
  }

  console.log(actors);
  // undefined

Синхронный код

Асинхронный код

 Инструменты

Браузер

XMLHttpRequest

jQuery

Fetch polyfill

 

Node.js

Node http

Axios

Fetch

4 состояния интерфейса

Ожидание

Загрузка

Успех

Ошибка

Сценарий

  1. Обработка события (клик, вызов функции итд)
     
  2. Открываем соединение и отправляем запрос
     
  3. Включаем в интерфейсе анимацию загрузки
    или показваем прогресс загрузки (в %)
     
  4. По завершении проверяем статус ответа
     
  5. Выводим данные на страницу, показываем,
    что запрос успешно или что произошла ошибка

Безопасность

Same Origin Policy

Защита от XSS и AJAX Injection

Фильтровать данные клиента

Защищенный бэкенд

Репозиторий

https://goo.gl/Zu4DDD

Асинхронный JavaScript. Работа с REST API

By Исмаил

Асинхронный JavaScript. Работа с REST API

Сказ о том, что за зверь такой - асинхронность в JavaScript. Как браузеры разговаривают с сервером. Что такое коллбэки и промисы и где их использовать. Что такое AJAX и XMLHttpRequest. Как получать и отправлять данные. Как отображать статус загрузки и результата запроса. Как отслеживать работу в браузере.

  • 877