ajax 视频

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

通过升级视频游戏角色来解释AJAX (AJAX Explained by Upgrading Your Video Game Character)

如果您玩过视频游戏，那么您可以了解POST和GET的基础知识。 (If you’ve played video games, then you can understand the basics of POST and GET.)

AJAX (short for Asynchronous JavaScript and XML) can be pretty tough for new web developers to grasp. Without a sense of how the browser interacts with the server, AJAX can seem as though it’s powered by magic.

对于新的Web开发人员来说，AJAX(异步JavaScript和XML的缩写)可能很难。 在不了解浏览器如何与服务器交互的情况下，AJAX看起来好像是由魔力驱动的。

But don’t lose hope. Think of AJAX as similar to how you upgrade your character in role-playing games like Pokemon or Final Fantasy.

但是不要失去希望。 将AJAX视为与在《口袋妖怪》或《最终幻想》等角色扮演游戏中升级角色的方式类似。

You can use AJAX to build modern web apps with a minimum number of page reloads. If you want to build a site that easily flows between different screens and features, then you’ll need AJAX to load content dynamically based on user requests.

您可以使用AJAX构建具有最少页面重载次数的现代Web应用程序。 如果要构建一个可以在不同屏幕和功能之间轻松流动的网站，则需要AJAX根据用户请求动态加载内容。

This post will focus on the ways that you can interact with a server using the two most common AJAX methods: POST and GET.

本文将重点介绍使用两种最常见的AJAX方法与服务器交互的方式：POST和GET。

I’m going to assume that you already know the basics of callbacks. Also, I’ll assume that you have already outlined a place in your web app where you need to load data dynamically.

我假设您已经知道回调的基础知识 。 另外，我假设您已经在Web应用程序中勾勒出一个需要动态加载数据的位置。

POST请求就像将项目添加到库存中 (POST requests are like adding items to your inventory)

You can use POST to add data to your database. In your video game, this is kind of like the process when you open every treasure chest in sight until you find the item you need.

您可以使用POST将数据添加到数据库中。 在视频游戏中，这就像您打开每个可见的藏宝箱直到找到所需物品的过程。

Let’s say you need a new weapon to take on bigger challenges in your game. You search every item stash until you finally find it — a new sword! This weapon is lighter, faster, and stronger than the club that you started the game with.

假设您需要一种新的武器来应对游戏中的更大挑战。 您搜索每个存储项，直到最终找到它–一把新剑！ 该武器比开始游戏时使用的俱乐部更轻，更快，更结实。

So now you want to pick this up awesome sword and dump the your old, stinky club. From a code perspective, there are a couple things you need to store:

因此，现在您想拿起这把超棒的剑，扔掉旧的臭俱乐部。 从代码角度来看，您需要存储以下几项内容：

1. The type of equipment you are adding (sword)您要添加的设备类型(剑)
2. The weight (let’s say 20)重量(假设20)
3. The damage per strike (let’s say 10)每次打击的伤害(假设为10)
4. It’s type of metal (let’s say steel)它是金属的类型(比如说钢)
5. Defense/blocking ability (let’s say 5)防御/阻挡能力(假设5)

In order to send this data to the server and save it, you’ll need to POST it.

为了将此数据发送到服务器并保存，您需要对其进行POST。

Note that we’ll use jQuery — one of the most popular JavaScript libraries — to simplify the process of making these these requests.

请注意，我们将使用jQuery(最流行JavaScript库之一)简化发出这些请求的过程。

Your POST request will have 4 parts:

您的POST请求将分为4部分：

1. whether you’re doing $.post or $.get

   无论您正在执行$.post还是$.get

2. The route. A route is a repeatable pattern that your back-end will recognize. In this case, adding pretty much any equipment, like a sword or shield or breastplate, will follow a similar pattern because they can all be equipped on your character. You would use a different route if you were gathering resources, like metal ore, wood or coin. Although these need to be stored, they would not be “equipped” to your character- just stored in your inventory. Those routes might be “/gatherResource” or “/collectCoins”.

   路线。 路由是后端可以识别的可重复模式。 在这种情况下，几乎增加任何装备，例如剑，盾或胸甲，都会遵循类似的模式，因为它们都可以装备在您的角色上。 如果您正在收集金属矿石，木材或硬币之类的资源，则将使用不同的路线。 尽管需要存储这些内容，但它们不会“装备”到您的角色上-仅存储在您的清单中。 这些路由可能是“ / gatherResource”或“ / collectCoins”。

3. The data that is actually going to be stored. Here, you’re storing the attributes of the equipment: type of equipment, damage, weight etc., like we outlined above. We can use an object for this.实际要存储的数据。 在这里，您将存储设备的属性：设备的类型，损坏，重量等，就像我们上面概述的那样。 我们可以为此使用一个对象。
4. The callback. This lets you specify what should happen directly after the POST is completed. You may want to equip the sword and drop the club.回调。 这使您可以指定在POST完成后应立即执行的操作。 您可能需要装备剑并丢下球杆。

Here’s the finished code you would use to store the sword:

这是用于存储剑的最终代码：

The toughest part is figuring out what should go in the route, and what goes in the parameters/data. In this case, you’re writing a more generalized storeEquipment route, because you can follow a similar procedure for adding any type of equipment. The parameters allow you to offer specifics.

最困难的部分是弄清楚路线中应该走什么，以及参数/数据中走什么。 在这种情况下，您正在编写一个更通用的storeEquipment路线，因为您可以按照类似的步骤添加任何类型的设备。 这些参数允许您提供详细信息。

Relational databases are a little outside the scope of this tutorial, but if you wanted to set up a database to store this, you might create an “equipment” table that stores all of the equipment for each user. It would look something like this:

关系数据库不在本教程的讨论范围之内，但是如果您想建立一个数据库来存储该数据库，则可以创建一个“设备”表来存储每个用户的所有设备。 它看起来像这样：

When you’re building a web app, you could use a POST request to:

在构建Web应用程序时，可以使用POST请求执行以下操作：

1. Create a new user创建一个新用户
2. Store an entry created by a user存储用户创建的条目
3. Store a comment created by a user存储用户创建的评论

GET Request就像生成敌人 (GET Request are like spawning enemies)

GET requests allow you to retrieve data that’s already stored in your database. You aren’t modifying or adding anything — you’re merely presenting data that already exists. This is kind of like when you are running around in Pokemon, and this happens:

GET请求使您可以检索数据库中已经存储的数据。 您不需要修改或添加任何内容，而只是显示已经存在的数据。 这有点像您在《口袋妖怪》中奔跑时发生的情况：

Let’s say you stomp this poor Diglett. That would not change the fact that there is a Pokemon called Diglett that exists on your server. You’ll still be able to face Digletts in the future.

假设您脚这个可怜的Diglett。 这不会改变服务器上存在名为Diglett的Pokemon的事实。 将来您仍然可以面对Digletts。

Let’s say you’re running around in a dungeon, and you face the most terrifying enemy of all time: the skeleton (not really).

假设您在地牢中四处奔跑，并且面临有史以来最恐怖的敌人：骷髅(不是真的)。

We need to write the code so that this random skeleton will have certain traits. Here are what some of its attributes might look like:

我们需要编写代码，以便此随机骨架具有某些特征。 以下是其某些属性的外观：

1. Type: skeleton类型：骨架
2. Attack: 10攻击力：10
3. Mobility: 5流动性：5
4. Defense: 2防守：2
5. Equipment: helmet, mace装备：头盔，狼牙棒

You might structure your GET like this:

您可以这样构造GET：

1. $.get or $.post

   $.get或$.post

2. The route. A GET route means you will be retrieving data off the server in a specific package. Similar to POST, you want to this route to be generalized so it captures any type of interaction with an enemy.路线。 GET路由表示您将以特定程序包从服务器中检索数据。 与POST类似，您希望将此路线概括化，以便它捕获与敌人的任何类型的互动。
3. The parameters. The details on this specific enemy.参数。 有关此特定敌人的详细信息。
4. The callback. What happens when you engage this enemy in a fight?回调。 当您与这个敌人战斗时会发生什么？

When you originally built the game, you determined what a skeleton would look like, how it would move. Now, you need to dynamically create a skeleton that will face your character. The GET request will allow you to summon a skeleton with specific traits that are dictated by your parameters.

最初制作游戏时，您要确定骨架的外观，移动方式。 现在，您需要动态创建一个面对角色的骨架。 GET请求将允许您召集具有由参数决定的特定特征的骨架。

If your character defeats this skeleton, it won’t delete anything from your server. It just means that your character was superior to this particular combination of data that the skeleton represented.

如果您的角色击败了这个骨架，它将不会从您的服务器中删除任何内容。 这仅表示您的角色优于骨骼所代表的特定数据组合。

Now let’s say that you’re building an e-commerce site where you’re selling cardboard boxes. The user may want to sort their choices based on:

现在，假设您正在建立一个销售纸箱的电子商务站点。 用户可能希望根据以下内容对他们的选择进行排序：

1. Thickness of the box包装盒厚度
2. Size of the box包装盒尺寸
3. Quantity available可用数量

You would want to allow the user to sort the choices dynamically. So you would use a GET request to retrieve all boxes with the specific traits without making the user reload the page every time that a box is checked or unchecked.

您可能希望允许用户动态地对选项进行排序。 因此，您将使用GET请求来检索具有特定特征的所有框，而无需使用户每次选中或取消选中框时都重新加载页面。

综上所述… (In summary…)

• Your database is filled with components that can be summoned and presented to the user. Some were initialized with the app, and some are added by the user.您的数据库充满了可以召唤并呈现给用户的组件。 有些是使用应用程序初始化的，有些是由用户添加的。
• A POST request allows you to add components to the database.POST请求允许您将组件添加到数据库。
• A GET request allows you to dynamically summon both built-in and previously-added components. They can be combined in different ways based on the parameters of the GET request.GET请求使您可以动态调用内置组件和以前添加的组件。 可以根据GET请求的参数以不同的方式组合它们。

If you enjoyed this post, you may also enjoy my other explanations of challenging CSS and JavaScript topics, such as positioning, Model-View-Controller, and callbacks.

如果您喜欢这篇文章，那么您可能还会喜欢我对具有挑战性CSS和JavaScript主题的其他解释 ，例如定位，Model-View-Controller和回调。

And if you think this might help other people in the same position as you, give it a “heart”!

而且，如果您认为这可以帮助与您处于同一位置的其他人，请给它一个“心脏”！

翻译自: https://www.freecodecamp.org/news/ajax-explained-by-upgrading-your-video-game-character-17d26305163c/

ajax 视频