Какие инструменты использовать для интеграции с api на отдельном домене посредством javascript?

Question

[Антон Иванов]

Всем привет!

Дано: Есть RESTful API на отдельном домене. И есть сайт, на котором это API надо использовать.
Я хочу сделать, чтобы общение с api было организовано посредством javascript, прямо из клиентского браузера.
То есть, для создания пользователя, допустим, мы не сабмитим форму, чтобы потом был запрос с сервера к api, а сразу отправляем запрос к api посредством javascript.

Такая схема для меня нова, поэтому прошу совета, как обычно это организовывается. Есть ли какой-то признаный лидер в javascript RESTful API клиентах? Как обычно организуют прорисовку результата/следующего шага? Поясню, допустим, после сабмита формы, при успехе, надо отрисовать вторую форму, немаленькую. Нормально ли, при получении положительного ответа от api, сделать запрос к своему серверу для получения верстки/шаблона следующего шага?
Ну и на что вообще надо обратить внимание?
Я понимаю, что все можно написать руками, но зачем заново изобретать велосипед :)

Заранее спасибо.

Answer 1

[Константин Китманов]

> Есть ли какой-то признаный лидер в javascript RESTful API клиентах?
Все приличные фреймворки умеют REST в той или иной степени (Backbone/Angular/Ember).

> Как обычно организуют прорисовку результата/следующего шага?
Получили данные —> обновили модель —> модель пнула вьюху, чтобы она перерендерилась.

> Нормально ли, при получении положительного ответа от api, сделать запрос к своему серверу для получения верстки/шаблона следующего шага?
Проще будет грузить все ресурсы сразу и потом показывать нужное — меньше возни с асинхронностью. Но если объем большой, то имеет смысл грузить по мере потребности.

Чтобы с другого домена ходить за данными, надо чтобы сервер с API умел отдавать CORS-заголовки, а браузер умел их спрашивать (то есть IE9- в пролете). Обойти это можно с помощью JSONP, как верно заметил Dmitry, но опять же сервер с API должен поддерживать JSONP.

Comments

[Антон Иванов]

Оба домена мои, да и CORS-заголовки уже отдаются. А так - да, этот велосипед уже придуман, буду использовать angular.

[Константин Китманов]

Антон Иванов: вот и правильно:)

Answer 2

[Dmitry Tallmange]

Для формирования запросов достаточно иметь jquery:

$.ajax({
    url: 'http://example.com/',
    type: 'PUT',
    data: 'id=1&name=Valera',
    success: function() { console.log('PUT completed'); }
});

Однако, это будет работать только в случае, если разрабатываемая страница пришла с того же домена.
Если же вы разрабатываете страницу, которая загружается с example.com и хочет сделать ajax запрос на somehost.com — здесь только JSONP.

Comments

[Антон Иванов]

Это можно сделать и без jQuery, на чистом javascript. Однако вопрос у меня был не о том, как формировать запросы, а как построить всю систему в целом.

[Dmitry Tallmange]

Антон Иванов: Фреймворка, умеющего «забрать ресурсы, а потом нарисовать вот тут формочку красивую» в природе не существует. Берете jquery, либо чистый javascript и описываете поведение.

[Антон Иванов]

Dmitry: понятно ведь, что придется многое писать руками. Но фреймворки, которые могут серьезно облегчить жизнь существуют. Сейчас выбираю между angular, или backbone. Скорее всего выберу первый.

[Дмитрий Б]

Dmitry: бред вы несёте.
Всё уже есть. Антон, используйте Angular, там есть сервис для работы с REST и с выводить данные очень удобно, правда привыкнуть к JS фреймворкам трудно

[Антон Иванов]

Дмитрий Байбухтин: Не такой уж angular и сложный. Удобный - это факт, со своими минусами, это да. Но для моей задачи подходит идеально

[Дмитрий Б]

Антон Иванов: написать hello world просто на любом фреймворке, а вот делать полноценные проекты - сложно. Слишком много проблем возникает. К примеру в jQuery есть решения большинства задач, при чём ещё и повыбирать можно, а в JS фреймворках с этим на порядок хуже

[Антон Иванов]

Дмитрий Байбухтин: Что нельзя решить фреймворком, будет решаться руками (jquery/etc)

[Дмитрий Б]

Антон Иванов: использовать чистый jQuery в angular - не по феншую, а делать "порты" - не по мне. Но даже учитывая эти проблемы, для одностраничного приложения я конечно же использовал бы angular.

[Антон Иванов]

Дмитрий Байбухтин: ну, приложение далеко не одностраничное, с довольно большим функционалом. Правда этот функционал довольно однообразный (получить данные из API, возможно изменить их и отправить назад).

[Дмитрий Б]

Антон Иванов: почитайте что такое одностраничное приложение

[Дмитрий Б]

Антон Иванов: некоторое время я хотел свой сайт сделать полностью одностраничным, но когда начал решать следствующие проблемы, понял, что лучше использовать angular только в отдельных частях сайта, где он на самом деле нужен. Но это только в моём случае. Комбинирование angular и jquery позволило спокойно использовать преимущества Yii2, angular и jquery(ui) за одно лишив меня кучи проблем

[Антон Иванов]

Дмитрий Байбухтин: Да, согласен, неверно понимал, что такое одностраничное приложение, спасибо.

[Дмитрий Б]

Антон Иванов: кстати для изучения angular рекомендую книгу https://www.ng-book.com , я прочитал важные для меня главы (большую часть книги) и это хорошо помогло понять что к чему и почему

[Антон Иванов]

Дмитрий Байбухтин: спасибо, воспользуюсь советом