Кевин Кононенко
AJAX (Asynchronous JavaScript и XML) может быть довольно запутанным, если у вас нет твердого понимания сервера кода.
Когда я начал с веб-разработки, я впервые узнал HTML, CSS, JavaScript и JQuery, прежде чем я рискнул в Node.js и Ruby на рельсах.
Но, конечно, я хотел понять, как создать динамические веб-приложения, поэтому мне нужно было узнать, как использовать AJAX для связи с сервером. Я не хотел просто строить статические страницы, которые были прямо из 2005 года.
Фронт-конец – это совершенно другая проблема, чем в спине. Я изо всех сил пытался понять разные части получения или последующего запроса.
Итак, я придумал аналогию ресторана быстрого питания, чтобы объяснить это. Если вы были в McDonald’s, Burger King или Wendy’s, то вы можете написать свои собственные запросы Get и Post.
Чтобы понять этот пост, вам нужно будет понимание новичка jQuery.
Как выглядит Ajax?
Вы когда-нибудь замечали, что вы можете прокомментировать пост на Facebook без перезагрузки всей страницы? Это ajax на работе. Ajax Позволяет пользователям взаимодействовать с вашим веб-приложением без полностью перезагрузки страницы.
Представьте себе, если каждый раз «понравился» пост на Facebook или добавлен комментарий, страница перезагружается? Это было бы ужасно! Вместо этого Facebook быстро добавляет ваш «комментарий» или «вроде» на сообщение и позволяет продолжать читать. Они добавляют это взаимодействие в свою базу данных, не прерывая свой опыт!
Почему нам нужен ajax?
Хорошо, это анекдотальные примеры, поэтому давайте посмотрим на всю систему.
Подумайте о своем всей веб-приложении как ресторан быстрого питания. Вы кассир, человек на передних линиях. Вы обрабатываете Запросы от клиентов.
Если вы посмотрите на эту диаграмму, я вижу три отдельных задания, которые необходимо выполнить.
- Кассир должен обрабатывать запросы пользователей в быстром темпе.
- Вам нужно повара, чтобы бросить гамбургеры на гриль и готовить всю еду.
- Вам нужна команда приготовления пищи, чтобы упаковать еду вверх и положить его в сумку или на подносе.
Однако, если у вас не было AJAX, вам будет разрешено только для того, чтобы обработать один заказ одновременно с начала до конца! Вам нужно было бы принять заказ … тогда заряжайте клиента … потом сижу там ничего не делая, пока люди на кухне готовите еду … Затем продолжайте жду, пока команда приготовления пищи упаковывает его. Вы можете взять только следующий заказ после всего этого.
Теперь это плохой пользовательский опыт! Вы бы не сможете называть это «фаст-фуд». Вместо этого вам нужно было бы назвать это «посредственным едой» … или что-то.
Ajax позволяет Модель асинхронной обработки Отказ Это означает, что вы можете запросить данные или отправлять данные без загрузки всей страницы. Это так же, как работает нормальный ресторан быстрого питания. Как кассир, вы принимаете заказ клиента, отправьте его на кухонную команду и будьте готовы взять следующий заказ клиента.
Клиенты могут продолжать делать заказы, и вам не нужно сидеть там, пока сотрудники на кухне работают и заставляют всех ждать.
Это, безусловно, вводит некоторую сложность. Теперь у вас есть несколько специализированных в ресторане. Дополнительно заказы обрабатываются в разных шагах. Но это создает гораздо лучший пользовательский опыт.
Вы, наверное, видели это в действии в ресторане. Один человек работает фри машины. Один человек управляет грилем. Когда приходит заказ, кассир может мгновенно общаться с обоими и возвращаться к принятию заказов.
Как создать почтовый запрос
Давайте поставим эти концепции на работу. Как кассир, вам нужно отправить входящие запросы клиентов на кухню, чтобы остальная часть вашей команды может подготовить еду. Вы можете сделать это с последующим запросом.
В вашем реальном коде запрос пост отправляет данные на свой сервер. Это означает, что вы отправляете данные заказа на задний конец, в этом случае.
Он имеет три основных запчасти:
- URL : Это маршрут, который запрос будет следовать. Больше через минуту.
- Данные : Любые дополнительные параметры, которые вам нужно отправить на сервер.
- Обратный вызов : Что произойдет после того, как вы отправили запрос
Каковы общие вещи, которые люди заказывают в ресторане быстрого питания? Давайте посмотрим на 2 примера.
- Фри
- Комбинированная еда, состоящая из бургера, картофеля фри и напитка
Эти два требуют разных процессов. Запрос на картофель фри, возможно, понадобится только один человек, чтобы совок немного фри в рукаве. Но заказ комбинированного питания потребует работы от нескольких членов команды. Итак, эти два нужны разные URL.
$.post('/comboMeal')$.post('/fries')URL позволяет нам использовать ту же логику на задней панели для определенных типов запросов. Эта часть находится за пределами объема этого учебника, поэтому вы можете выкопать это немного больше, когда вы смотрите на задний конец.
Далее данные Отказ Это объект Это рассказывает нам немного больше о запросе. Для URL-адресов комбо мы, вероятно, должны знать:
- Тип основного приема пищи
- Они типа напитка
- Цена
- Любые специальные запросы
Для картофель фри мы могли бы только знать:
- Размер картофеля фри
- Цена
Давайте посмотрим на пример комбинированного блюда: чизбургер с пепси, который стоит $ 6,00. Вот то, что выглядит в JavaScript.
let order = { mainMeal: 'cheeseburger', drink: 'Pepsi', price: 6, exceptions: '' };$.post('/comboMeal', order);Заказать Переменная содержит содержимое заказа. А потом мы включаем его в почтовый запрос, чтобы наш кухонный персонал знал, что, черт возьми, чтобы поставить в комбо еду!
Но мы не можем иметь все этот код в случайном времени! Нам нужно триггерное событие, которое будет отправлено запрос. В этом случае заказ клиента в ресторане фаст-фуда вроде как человек, который нажимает кнопку «Заказать» на вашем сайте. Мы можем использовать jQuery’s Нажмите () Событие Чтобы запустить пост, когда пользователь нажимает кнопку.
$('button').click(function(){ let order = { mainMeal: 'cheeseburger', drink: 'Pepsi', price: 6, exceptions: '' }; $.post('/comboMeal', order); });Последняя часть. Нам нужно сообщить клиенту что-то после того, как их заказ был отправлен. Кассиры обычно говорят: «Следующий клиент, пожалуйста!» Поскольку это ресторан быстрого питания, поэтому мы можем использовать это в обратном обратном вызове, чтобы показать, что заказ был отправлен.
$('button').click(function(){ let order = { mainMeal: 'cheeseburger', drink: 'Pepsi', price: 6, exceptions: '' };$.post('/comboMeal', order, function(){ alert('Next customer please!'); }); })Как создать запрос на получение
Пока что у нас есть возможность представить заказ. Теперь нам нужен способ доставить этот заказ нашим клиентом.
Это где приходят запросы. Получить позволяет нам запросить данные с сервера (или кухни, этой аналогии). Обратите внимание: прямо сейчас наша база данных полна заказов, а не сама еда. Это важное различие, потому что Получить запросы не изменить нашу базу данных Отказ Они только доставляют эту информацию на интерфейс. Опубликовые запросы Измените информацию в базе данных.
Вот несколько типичных вопросов, которые вы можете спросить, прежде чем получать еду.
- Вы хотели бы поесть здесь или получить еду, чтобы пойти?
- Вам нужны какие-нибудь приправы (например, кетчуп или горчица)?
- Какой у вас номер на получении (для проверки, это ваша еда)?
Итак, скажем, вы заказали три комбинированных блюда для вашей семьи. Вы хотите съесть еду в ресторане. Вам нужен кетчуп. И число на вашем получении 191.
Мы можем создать запрос Get с URL-адресом «/Combomaleal», что соответствует запросу на почту вместе с тем же URL. Однако на этот раз нам нужны разные данные. Это совершенно другой тип запроса. То же самое имя URL просто позволяет нам лучше организовать наш код.
let meal = { location: 'here', condiments: 'ketchup', receiptID: 191 };$.get('/comboMeal', meal);Нам также нужен триггер для этого. Этот запрос запускается клиентами, отвечающими на ваши вопросы как кассу, прежде чем доставить еду им. Нет удобного способа представлять вопросы и ответы с JavaScript. Поэтому я просто создаю другое событие щелчка для кнопки с классом «Ответ».
$('.answer').click(function(){ let meal = { location: 'here', condiments: 'ketchup', idNumber: 191, };$.get('/comboMeal', meal); });Этот также нужен функция обратного вызова, потому что мы собираемся получить все, что было содержащему в трех комбинированных блюдах в порядке 191 года. Мы можем получить эти данные через данные Параметр в нашем обратном вызове.
Это вернет все, что затворные предусмотрены на заказ 191. Я собираюсь использовать функцию имени Ешьте Чтобы ознавить, что вы в конечном итоге получаете еду, но имейте в виду, что в JavaScript нет функции есть нет!
$('.answer').click(function(){ let meal = { location: 'here', condiments: 'ketchup', idNumber: 191, }; //data contains the data from the server $.get('/comboMeal', meal, function(data){ //eat is a made-up function but you get the point eat(data); }); });Окончательный продукт, данные , будет содержать содержание трех комбинированных блюд, теоретически. Это зависит от того, как он написан на спине!
Попробуйте другие визуальные объяснения
Вам понравилось это руководство? Дайте ему хлопок, чтобы другие могли это увидеть! Или, Подпишитесь на рассылку Чтобы услышать о последних выпусках учебных пособий CSS и JavaScript.
Оригинал: “https://www.freecodecamp.org/news/ajax-basics-explained-by-working-at-a-fast-food-restaurant-88d95f5fcb7a/”