Получение данных от сервера в jQuery

В этом видео мы с вами разберем, как писать запросы к серверу в javascript используя jQuery.

Напоминаю, что идея состоит в том, чтобы получить данные от сервера асинхронно с помощью HTTP-запроса и изменить страницу у пользователя без перезагрузки.

Для того, чтобы обращатся на сервер за данными, давайте создадим API с тестовыми данными с помощью сервиса mocky.io.

Вот у меня есть JSON данных

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  }
]

Вставляем его в body запроса и в advance mode выбираем

 Access-Control-Allow-Origin:*

Для того, чтобы любой домен мог обращатся к этому API.

Нажимаем Generate response и получаем ссылку на наш API.

Теперь давайте посмотрим на мою заготовку для урока. Это просто базовый html файл, в который подключено два скрипта jquery и code.js в котором мы будем писать код.

Давайте напишем код, который получит данные от сервера.

var promise = $.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
})

Очень важно помнить, что в результате выполнения мы получаем не данные, а промис. Это значит, что мы можем подписаться на получение данных из промиса с помощью .then, передав туда callback. Тогда первым аргументом, мы получим наши данные.

$.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
}).then(function (result) {
  console.log('result', result)
})

Если мы посмотрим в браузер, то у нас вывелся в консоль наш массив обьектов.

Что делать если мы хотим обработать ошибку? Нам нужно подписаться с помощью .catch на error.

$.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
}).then(function (result) {
  console.log('result', result)
}).catch(function (err) {
  console.log('err', err)
})

Если мы изменим ссылку на неправильную то попадем в error.

В $.ajax можно также использовать методы done и fail, которые являются аналогами then и catch, но я советую придерживаться в работе с любыми промисами использования then и catch, так как это ближе к стандарту. Например в es6 промисах у вас тоже будут the и catch, а это значит, что код будет выглядит одинаково.

В $.ajax можно задавать множество разнообразных опций, но я перечислю только самые используемые из них.

Первое это конечно method. По умолчанию он get и мы можем менять его например на post, чтобы отправить post запрос.

$.ajax({
  method: 'POST',
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
}).then(function (result) {
  console.log('result', result)
}).catch(function (err) {
  console.log('err')
})

Конечно чаще всего в POST запрос мы хотим передать какие-то данные. В этом нам поможет поле data

$.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30',
  method: 'POST',
  data: {
    test: 1
  }
}).then(function (result) {
  console.log('result', result)
}).catch(function (err) {
  console.log('err')
})

Если мы посмотрим в network, то увидим, что данные у нас передаются.

Также в jQuery есть алиасы метода $.ajax. Это $.get, $.post, $.getJSON, которые хоть и более короткие, но на мой взгляд менее читабельные и лучше придерживаться полной записи.

Напоминаю, что $.ajax, это всего лишь обертка нам стандартным для javascript XMLHttpRequest.

Какие же основные преимущества она нам дает?

Как результат выполнения мы получаем промис, а это значит с ним очень удобно работать с помощью .then и .catch
Очень простое API. Мы просто указываем обьектом опции и все работает.

Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

#4 Получение данных от сервера в jQuery