Step 2 (S-44894)

From Stepik Wiki
Jump to: navigation, search

Step on Stepik: https://stepik.org/lesson/14834/step/2

Step 2 (S-44894) 1.png

[00:00 - 00:17] мы приступаем к изучению технология а в современных приложениях аякса фактически неотъемлемая технология но получается так что все это в основном технологии client side то есть а в основном это был клиентского разработку


[00:17 - 00:37] поскольку мы занимаемся а сервер сайта то есть разработку на стороне сервера мы поверхностно посмотрим как используется в браузере как он реализован и разберем все нюансы которое возникает на стороне сервера и так


Step 2 (S-44894) 2.png

[00:37 - 00:54] алекс расшифровывается как асинхронный javascript xml xml это исключительно историческое название как смайлик не имеет никакого особого отношения а фактически с помощью технологии аякс можно а


[00:54 - 01:11] отправлять формы на сервер и загружать данные сервера без перезагрузки а основной веб страницы а мы говорили про это в начале курса что существуют классические вот приложение которое работает по принципу


[01:11 - 01:30] рисовал эту страничку любое действие пользователя приводит к перерисовке страниц то есть в загрузке полностью новой страницы а аякс позволяет загрузить страницу 1 раз и потом обмениваются небольшими кусочками данных без перезагрузки основной странице


[01:30 - 01:47] а в принципе это дает большое количество преимуществ как то отзывчивый пользовательский интерфейс то есть не нужно ждать перезагрузки страницы уменьшение а сетевого обмена и общем то


[01:47 - 02:04] это в самом даже упрощает пользовательский интерфейс а давайте рассмотрим как аякс вызовы делается на стороне клиента ну а по сути дела это не торопи которая браузер


Step 2 (S-44894) 3.png

[02:04 - 02:22] общее название технологии а реализовывал с помощью специального api который представлен объектам теперь request это и браузер предоставляет а в java script


[02:22 - 02:40] а для того чтобы сделать асинхронный запрос в коде страницы в коде javascript тактовая работает нужно выполнить следующее следующий команд во 1 создается новый объект икс мэнов теперь квест а


[02:40 - 02:55] по факту в разных браузерах называется по разному поэтому здесь мы приводим стандартное описание но для разных браузеров а где это называется по разному поэтому там нужно перебирать а далее


[02:55 - 03:14] вызывается метод метод open указываешь а с каким методом и по какому урлу нужно отправлять а данный запрос метод post


[03:14 - 03:31] теперь этот пост а вот такой и 3 флаг означает что запрос должен быть асинхронным теоретически олег запрос может быть синхронным то есть блокировать


[03:31 - 03:49] выполнение javascript кода но это практически никогда не используются а после того как мы вызвали open мы должны задать функция обработчик а то есть каким образом происходит выполнение запросов когда запрос завершен


[03:49 - 04:06] javascript вызовет некоторую функцию call back а и внутри этой функции мы получим результаты выполнения в оригинальном api это в этот камбэк записываются в переменных on the stage in


[04:06 - 04:22] у объекта теперь квест и на самом деле эта функция вызывается несколько раз а при разных состояниях запросы когда он там был отправлен когда был получен ответ и тому подобное


[04:22 - 04:39] а чаще всего нам нужно только 1 из этих состояний поэтому делается вот такая проверка рейде стоят равняется 4 знать что был получен ответ либо ошибка а и когда будет вызвано вот эта функция


[04:39 - 04:55] и ради стоит будет равняться 4 а в объекте xml ну в объекте и с икс аш р то есть request будут доступны разные а переменные соответствующие данным


[04:55 - 05:09] это такой ответа в частности статус ответа тело ответа и так далее окей мы за далее а функцию обработчик


[05:09 - 05:25] и теперь мы делаем вызов sent sent это фактически отправка запроса в метод цен передается тело запроса а причем тело должно передаваться уже


[05:25 - 05:43] а в закодированном виде в нашем случае это икс а в форме кодов известно там кодирования данных форм а что в данный момент браузер отправляет запрос


[05:43 - 05:59] но это он делает фоле страница остаются доступны а с точки зрения протокола http это совершенно обычный http запрос то есть никаких особенностей у него в общем то нету при вот таком использовании а


[05:59 - 06:16] дальше на практике а вот использование такого сруба то есть в том виде в котором оно описано в стандарте но довольно проблематично из за а оно оперов оно просто не очень удобная так я во 2


[06:16 - 06:32] оно немножко отличается в разных браузерах поэтому front end разработчика часто используют различные библиотеки обертки для работы с а аякс а в частности очень популярна библиотека jquery


Step 2 (S-44894) 4.png

[06:32 - 06:47] с помощью нее а аякс запросы делается следующим образом сначала делается вызов а методы аякс вот здесь мы видим


[06:47 - 07:06] аргументы которые ему передаются они передаются в виде объекта в общем то аргументы все те же сам оказывается метод запроса указывается запросам и указываются данные которые будут отправляться а в данном случае


[07:06 - 07:21] библиотека jquery берете на себя сериализацию данных поэтому данный могут передаваться просто в виде объекта java scripts то есть а это естественный способ указания данных даже программистов


[07:21 - 07:39] jquery сама соболезнуют эти данные в нужную форму в нужный вид так как будто отправляется форма с 2 инпутами постоянной и текст ну в данном случае мы пытаемся а отправить запрос


[07:39 - 07:55] на добавление комментария в результате вызова функции аякс возвращается а специальный объект так называемый промис а это чем то похожа на а вы за объекта а суть в том что


[07:55 - 08:11] то есть 2 метода success и ров а с помощью этих методов мы можем задать функция обработчике а фактически мы сдаем 2 функции обработчика


[08:11 - 08:27] 1 функция будет вызвана при успешном выполнении ответа то есть кот весь текст и вернулся в тп а функция будет вызвана при неуспешном то есть если


[08:27 - 08:44] 400 500 годы ответа а вот вернуться далее а когда срабатывает функция обработчик успешного ответа она получает некоторый объект дата


[08:44 - 08:59] а объект дата зависит от того какие данные и вернул сервер в данном случае мы предполагаем что сервер возвращает данные в формате json


[08:59 - 09:14] javascript а естественно представления данных javascript то фактически очень похоже на вот эту строчку поэтому january автоматически преобразует ответ в формате json


[09:14 - 09:30] формате json а в обычный javascript объект поэтому дата будет обычным javascript объектов в частности мы можем проверить какое то поле например статус проверить что он выполнен успешно и


[09:30 - 09:50] использовать какой то другое поле например идентификатор ново созданного кальян а то есть мы видим что с точки зрения программиста он работает как будто с вызовом какой то функции не кость организации терзаться не происходит то есть это все спрятано внутр а вот rageconfig


[09:50 - 10:07] сервер при этом должен возвращать данные в формате а это то что касается использования а также на стороне клиента использована технология аякс на стороне клиента


[10:07 - 10:26] как мы видим все довольно просто нужно сделать вызов и передать функцию обработчик а какие а какие есть нюансы ограничения запрос 1 а 1 место которое нужно знать от так называемых same ориджен полисе


Step 2 (S-44894) 5.png

[10:26 - 10:43] полюсе это набор правил который позволяет браузеру обеспечивать безопасность и изолировать разные приложения друг от друга а помните мы говорили что куки привязана к домену


[10:43 - 11:01] положение с которым они были поставлены и а каждое приложение только свои куки ведь вот это счастье и мариан другая часть заключается в том что аякс запросы можно отправлять только к своему домену то есть а вашего приложения может


[11:01 - 11:16] запрашивает только свой домен картинки либо java скрипты вы можете в браузере загружается любого домена например сидела с какого нибудь только к своему и как


[11:16 - 11:35] послаблениях таком ограничении в современных браузерах есть технология курс приема поговорим в конце урока эта технология позволяет а точным образом обойти ограничения с emerging полисе и передавать данные с помощью этих запросов между разными доменами


[11:35 - 11:51] а 2 ограничение 1 мы разобрали 2 увеличение поскольку данные передаются явным в явном виде то есть в качестве просто строки вмешиваться


[11:51 - 12:07] мы видели в самом самом 1 слайде там создается объект xml теперь квест или иную вызывается метод сам и все данные передаются строкой а этот подход мешает нам передавать файлы


[12:07 - 12:23] поскольку и с помощью javascript а мы не можем прочитать содержимое файла мы не можем загрузить файлы с помощью аякса однако как послабление данному ограничению его что мы опять есть специальная технология форма дата а


[12:23 - 12:38] но опять таки вот эта фраза которая позволяет обойти данное ограничение а вот 1 2 пункта это именно как бы ограничение технологии


[12:38 - 12:55] а теперь некоторые особенности которые нужно помнить когда мы работаем с аяксом а 1 особенность это то что аякс запросы фактически с точки зрения сервера с точки зрения протокол они неотличимы от обычных


[12:55 - 13:10] то есть в них используется все тяж все те же самые заголовке все тоже самое что и при обычных запросах а поэтому сервер не всегда может понять что запрос пришел был сделан с помощью аякса


[13:10 - 13:30] а как с этим работать нужно сказать что большинство современных библиотек для работы с аяксом например jan сами добавляют специальный заголовок то есть если вы делаете запрос помощью же горе у запроса будет специальный заголовок


[13:30 - 13:49] x requested вниз а равняется xml что теперь вы можете ориентироваться по данному заголовку например django так поступаешь а во 2 частой практикой является просто разнесение обычных запросов запросов по разным урлам


[13:49 - 14:07] то есть а все запросы например идут на отдельный урлы кажется каждая вьюшка она отдает обрабатывает либо аякс запрос либо обычный запрос то есть просто не смешиваются такие а ведюшкин в принципе это позволяет решить проблему


[14:07 - 14:24] но это не ограничение это особенность такая что с точки зрения сервера аякс запрос это обычно же тебе запрос а но все таки у них есть отличия с точки зрения а того как ведет себя


[14:24 - 14:40] юзер агент то есть браузер а разница между обычным запросам запросы а в том что обычный запрос загружается в основное окно соответственно сервер может использовать стандартные методы обработки ошибок


[14:40 - 14:58] если не найдена страница например отдать 404 пользователь увидит действительно увидеть глазами 404 страницу как правило на нее можно поставить какую то заглушку с объясняющим текстов л поймешь что страница не найдена если а


[14:58 - 15:16] пользователя нет прав для просмотра этой страницы можно отдать код ответа 401 браузер покажут диалог либо можно сделать редирект если мы используем авторизацию с куками можно сделать редирект на страницу авторизации пользователь увидит


[15:16 - 15:32] форма авторизации сможет авторизоваться а в случае с запросами все это тоже можно сделать но проблема в том что а пользователи этого не увидеть


[15:32 - 15:51] то есть а в результате того что вернется какой 404 код ошибки либо сделать редирект на страницу авторизации в итоге все данные попадут функцию обработчик ошибке либо функция обработчик успех то есть в call back


[15:51 - 16:09] который который забыл javascript программист а дальше зависит от того что javascript программист сделает если он просто проигнорирует ошибку пользоваться никогда про ошибку поэтому для правильной обработке


[16:09 - 16:26] разного рода ошибок требуется взаимодействие а четверо зима действия программиста backend и программиста франта и собственно говоря сейчас мы перейдем к описанию того как это


[16:26 - 16:30] взаимодействие удобно организовать