网红快餐店

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

在一家快餐店工作解释了AJAX基础知识 (AJAX Basics Explained By Working At A Fast Food Restaurant)

AJAX (Asynchronous JavaScript And XML) can be pretty confusing if you do not have a firm understanding of server-side code.

如果您对服务器端代码没有足够的了解，那么AJAX(异步JavaScript和XML)可能会令人困惑。

When I started with web development, I first learned HTML, CSS, JavaScript, and jQuery before I ventured into Node.js and Ruby on Rails.

当我开始Web开发时，我首先学习HTML，CSS，JavaScript和jQuery，然后才涉足Node.js和Ruby on Rails。

But, of course, I wanted to understand how to build dynamic web applications, so I needed to learn how to use AJAX to communicate with a server. I didn’t want to just build static pages that were straight out of 2005.

但是，当然，我想了解如何构建动态Web应用程序，因此我需要学习如何使用AJAX与服务器进行通信。 我不想只构建2005年以来的静态页面。

The front-end is a completely different challenge than back-end. I struggled to understand the different parts of a GET or POST request.

前端与后端是完全不同的挑战。 我很难理解GET或POST请求的不同部分。

So, I came up with the analogy of a fast-food restaurant to explain it. If you have been to a McDonald’s, Burger King or Wendy’s, then you can write your own GET and POST requests.

因此，我想出了一家快餐店的类比来解释它。 如果您去过麦当劳，汉堡王或温迪，则可以编写自己的GET和POST请求。

In order to understand this post, you will need to have a beginner’s understanding of jQuery.

为了理解本文，您需要对jQuery有一个初学者的了解。

AJAX是什么样的？ (What does AJAX look like?)

Have you ever noticed that you can comment on a post on Facebook without reloading the entire page? That is AJAX at work. AJAX allows users to interact with your web application without completely reloading the page.

您是否曾经注意到您可以在Facebook上发表评论而无需重新加载整个页面？ 那就是AJAX在工作。 AJAX允许用户与您的Web应用程序进行交互，而无需完全重新加载页面。

Imagine if every time you “liked” a post on Facebook or added a comment, the page reloaded? That would be terrible! Instead, Facebook quickly adds your ‘comment’ or ‘like’ to the post and allows you to keep reading. They add that interaction to their database without interrupting your experience!

想像一下，如果您每次“喜欢” Facebook上的帖子或添加评论，页面是否都会重新加载？ 那太可怕了！ 相反，Facebook会在帖子中快速添加您的“评论”或“喜欢”，并允许您继续阅读。 他们在不中断您的体验的情况下将该交互添加到其数据库中！

为什么我们需要AJAX？ (Why do we need AJAX?)

Okay, those are anecdotal examples, so let’s look at the entire system.

好的，这些都是轶事示例，因此让我们看一下整个系统。

Think of your whole web application as a fast-food restaurant. You are the cashier, the person on the front-lines. You handle requests from customers.

将整个Web应用程序视为一家快餐店。 您是收银员，一线人员。 您处理来自客户的请求 。

If you look at this diagram, I can see three separate jobs that need to be done.

如果您查看此图，我可以看到需要完成的三个单独的作业。

1. The cashier must handle user requests at a fast pace.
   收银员必须快速处理用户请求。
2. You need cooks to throw the burgers on the grill and cook all the food.
   您需要厨师将汉堡包放在烤架上，然后烹饪所有食物。
3. You need a meal prep team to package the food up and put it in a bag or on a tray.
   您需要一个备餐团队来包装食物并将其放在袋子或托盘中。

However, if you did not have AJAX, you would only be allowed to process one order at a time from start to finish! You would need to take the order… then charge the customer… then sit there doing nothing while people in the kitchen cook the food…. then continue waiting while the meal prep team packages it up. You could only take the next order after all that.

但是，如果您没有AJAX，则只能从头到尾处理一次订单！ 您需要下订单...然后向客户收费...然后坐在那里什么都不做，而厨房里的人正在煮食物...。 然后在准备食物的团队打包之前继续等待。 之后，您只能接受下一个订单。

Now THAT is a bad user experience! You would not be able to call it “fast food” anymore. Instead, you would need to call it “mediocre food”… or something.

现在，这是糟糕的用户体验！ 您将无法再将其称为“快餐”。 取而代之的是，您需要将其称为“中餐”……。

AJAX allows for an asynchronous processing model. That means you can request data or send data without loading the entire page. This is just like the way a normal fast food restaurant operates. As the cashier, you take the customer’s order, send it over to the kitchen team, and get ready to take the next customer’s order.

AJAX允许使用异步处理模型 。 这意味着您可以在不加载整个页面的情况下请求数据或发送数据。 就像普通快餐店的经营方式一样。 作为收银员，您要接受客户的订单，将其发送给厨房团队，并准备接受下一个客户的订单。

Customers can continue to make orders, and you do not need to sit there while the employees in the kitchen work and make everybody wait.

客户可以继续下订单，而您不必在厨房的员工坐在那里工作时让所有人都在等待。

This certainly introduces some complexity. You now have multiple specializations within the restaurant. Additionally orders are being handled at different paces. But, it creates a much better user experience.

这无疑会带来一些复杂性。 您现在在餐厅内拥有多个专业。 另外，订单的处理速度也不同。 但是，它创建了更好的用户体验。

You have probably seen this in action at a restaurant yourself. One person is working the fries machine. One person is managing the grill. When an order comes in, the cashier can instantly communicate with both and get back to taking orders.

您可能自己已经在一家餐厅看到了这种效果。 一个人正在炸薯条机。 一个人正在管理烧烤架。 接到订单后，出纳员可以立即与两者进行通讯，并恢复接受订单。

如何创建POST请求 (How To Create A POST Request)

Let’s put these concepts to work. As the cashier, you need to send incoming customer requests to the kitchen so that the rest of your team can prepare the meal. You can do that with POST request.

让我们将这些概念付诸实践。 作为收银员，您需要将传入的客户请求发送到厨房，以便团队的其他成员可以准备餐点。 您可以使用POST请求执行此操作。

In your actual code, a POST request sends data to your server. That means that you are sending order data to the back-end, in this case.

在您的实际代码中，POST请求将数据发送到您的服务器。 这意味着在这种情况下，您正在将订单数据发送到后端。

It has three major parts:

它包含三个主要部分：

1. A URL: this is the route that the request will follow. More in a minute.

   URL ：这是请求将遵循的路由。 一分钟内会更多。

2. Data: any extra parameters that you need to send to the server.

   数据 ：您需要发送到服务器的任何其他参数。

3. Callback: What happens after you have sent the request

   回调 ：发送请求后会发生什么

What are some common things that people order in a fast-food restaurant? Let’s look at 2 examples.

人们在快餐店点菜有哪些常识？ 让我们看两个例子。

1. Fries
   薯条
2. A combo meal composed of a burger, fries and a drink
   汉堡，薯条和饮料组成的套餐

These two require different processes. A fries request might only need one person to scoop some fries into a sleeve. But a combo meal order will require work from multiple team members. So, these two need different URLs.

这两个需要不同的过程。 一份薯条请求可能只需要一个人即可将一些薯条oop到袖子中。 但是一份组合餐将需要多个团队成员的工作。 因此，这两个需要不同的URL。

$.post('/comboMeal')

$.post('/fries')

The URL allows us to use the same logic on the back-end for certain types of requests. That part is outside of the scope of this tutorial, so you can dig into that a little more when you look at the back-end.

该URL允许我们对某些类型的请求在后端使用相同的逻辑。 该部分不在本教程的讨论范围之内，因此在查看后端时，您可以对其进行更多的研究。

Next is the data. This is an object that tells us a little bit more about the request. For the combo meal URL, we probably need to know:

接下来是数据 。 这个对象告诉我们有关请求的更多信息。 对于组合餐URL，我们可能需要知道：

1. The type of main meal
   主餐类型
2. They type of drink
   他们类型的饮料
3. The price
   价格
4. Any special requests
   任何特殊要求

For the fries, we might only need to know:

对于薯条，我们可能只需要知道：

1. The size of the fries
   薯条的大小
2. The price
   价格

Let’s look at an example of a combo meal: a cheeseburger with a Pepsi that costs $6.00. Here is what that looks like in JavaScript.

让我们看一个组合餐的示例：百事可乐的芝士汉堡售价6.00美元。 这就是JavaScript中的样子。

let order = {  mainMeal: 'cheeseburger',  drink: 'Pepsi',  price: 6,   exceptions: '' };

$.post('/comboMeal', order);

The order variable holds the contents of the order. And then we include it in the POST request so that our kitchen staff knows what the heck to put in the combo meal!

order变量保存订单的内容。 然后，我们将其包含在POST请求中，以便我们的厨房工作人员知道在组合餐中放些什么！

But, we can’t have all of this code run at a random time! We need a trigger event that will set off the request. In this case, a customer order at a fast food restaurant is kind of like a person that clicks an ‘order’ button on your website. We can use jQuery’s click() event to run the POST when the user clicks a button.

但是，我们不能让所有这些代码都随机运行！ 我们需要一个触发事件来触发请求。 在这种情况下，快餐店的客户订单就像单击网站上“订单”按钮的人一样。 当用户单击按钮时，我们可以使用jQuery的click()事件运行POST。

$('button').click(function(){   let order = {     mainMeal: 'cheeseburger',    drink: 'Pepsi',     price: 6,     exceptions: ''   };   $.post('/comboMeal', order); });

Last part. We need to tell the customer something after their order has been sent. Cashiers usually say “Next customer please!” since this is a fast food restaurant, so we can use that within the callback to show that the order has been submitted.

最后部分。 在他们的订单发送后，我们需要告诉客户一些事情。 收银员通常会说“请下一位顾客！” 由于这是一家快餐店，因此我们可以在回调中使用它来显示已提交订单。

$('button').click(function(){    let order = {     mainMeal: 'cheeseburger',     drink: 'Pepsi',     price: 6,     exceptions: ''    };

$.post('/comboMeal', order, function(){     alert('Next customer please!');   }); })

如何创建GET请求 (How To Create A GET Request)

So far, we have the ability to submit an order. Now, we need a way to deliver that order to our customer.

到目前为止，我们已经能够提交订单。 现在，我们需要一种将订单交付给客户的方法。

This is where GET requests come in. GET allows us to request data from the server (or kitchen, this analogy). Please note: right now, our database is full of orders, not the food itself. This is an important distinction because GET requests do not change our database. They only deliver that information to the front-end. POST requests change the information in the database.

这就是GET请求的来源。GET允许我们从服务器(或类似的厨房)中请求数据。 请注意：现在，我们的数据库里满是订单，而不是食物本身。 这是一个重要的区别，因为GET请求不会更改我们的数据库 。 他们仅将这些信息传递到前端。 POST请求更改数据库中的信息。

Here are some typical questions you might get asked before receiving your food.

这是您在领取食物之前可能会被问到的一些典型问题。

1. Would you like to eat here or get the food to go?
   您想在这里吃饭还是带走食物？
2. Do you need any condiments (like ketchup or mustard)?
   您需要任何调味品(例如番茄酱或芥末酱)吗？
3. What is your number on the receipt (to verify it is your food)?
   您在收据上的号码是多少(以确认它是您的食物)？

So, let’s say you ordered three combo meals for your family. You want to eat the food in the restaurant. You need ketchup. And the number on your receipt is 191.

因此，假设您为家人订购了三顿套餐。 您想在餐厅里吃饭。 你需要番茄酱。 收据上的号码是191。

We can create a GET request with a URL of ‘/comboMeal’, which corresponds to the POST request along with the same URL. However, this time we need different data. It is a totally different type of request. The same URL name just allows us to better organize our code.

我们可以创建一个URL为“ / comboMeal”的GET请求，该请求对应于POST请求以及相同的URL。 但是，这次我们需要不同的数据。 这是完全不同的请求类型。 相同的URL名称仅使我们可以更好地组织代码。

let meal = {  location: 'here',  condiments: 'ketchup',  receiptID: 191 };

$.get('/comboMeal', meal);

We also need a trigger for this one. This request is triggered by customers answering your questions as the cashier before you deliver the food to them. There is no convenient way to represent questions and answers with JavaScript. So I will just create another click event for the button with class ‘answer’.

我们还需要一个触发器。 客户在将食物交付给他们之前，以收银员的身份回答您的问题，从而触发了此请求。 没有方便的方法来表示JavaScript的问题和答案。 因此，我将为类别为“ answer”的按钮创建另一个click事件。

$('.answer').click(function(){  let meal = {     location: 'here',     condiments: 'ketchup',     idNumber: 191,   };

$.get('/comboMeal', meal); });

This one also needs a callback function, because we are going to receive whatever was contained in the three combo meals in order 191. We can receive that data through a data parameter in our callback.

这个还需要一个回调函数，因为我们将按191的顺序接收三个组合餐中包含的任何东西。我们可以通过回调中的data参数接收该数据。

This will return whatever the back-end stipulates for order 191. I am going to use a function named eat to signify that you eventually get to eat the food, but keep in mind that there is no eat function in JavaScript!

这将返回后端为订单191规定的内容。我将使用一个名为eat的函数来表示您最终可以吃到食物了，但是请记住，JavaScript中没有eat函数！

$('.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);   }); });

The final product, data, would contain the contents of the three combo meals, theoretically. It depends on how it is written on the back-end!

理论上，最终产品data将包含这三种组合餐的内容。 这取决于它在后端的编写方式！

尝试其他视觉解释 (Try Other Visual Explanations)

Did you enjoy this tutorial? Give it a clap so others can see it! Or, sign up for the newsletter to hear about the latest releases of CSS and JavaScript tutorials.

您喜欢本教程吗？ 给它鼓掌，以便其他人可以看到它！ 或者， 注册以获取有关CSS和JavaScript教程的最新版本的新闻通讯 。

翻译自: https://www.freecodecamp.org/news/ajax-basics-explained-by-working-at-a-fast-food-restaurant-88d95f5fcb7a/

网红快餐店