告诉Javascript从服务器获取数据

No, it is not the detergent brand we all love and know. Ajax stands for Asynchronous Javascript and XML. AJAX is a developers dream come true.

不，这不是我们所有人都喜欢和知道的洗涤剂品牌。 Ajax代表异步Javascript和XML。 AJAX是开发人员的梦想成真。

People get it confused for a programming language, but it is not. It uses a combination of

人们对一种编程语言感到困惑，但事实并非如此。 它结合使用

• A browser built-in XMLHttpRequest object (to request data from a web server)
  浏览器内置的XMLHttpRequest对象(用于从Web服务器请求数据)
• JavaScript and HTML DOM (to display or use the data)
  JavaScript和HTML DOM(显示或使用数据)

It does allow web pages to be updated asynchronously by exchanging data with the web server behind the scenes. This increases the user experience as they do not have reload the whole page every single time they want to get a piece of information.

它确实允许通过与后台的Web服务器交换数据来异步更新网页。 这可以提高用户体验，因为他们不需要每次都想获取一条信息时就重新加载整个页面。

One of the most efficient ways we can get data from the server is by fetching it. No, I am not talking about a dog fetching a ball.

我们可以从服务器获取数据的最有效方法之一就是获取数据。 不，我不是在说狗抓球。

The fetch function retrieves data from the server we tell it to get the data from. Here is a quick reference to what a typical get fetch request looks like.

提取功能从我们告诉它从中获取数据的服务器中检索数据。 这里是典型的获取请求的外观的快速参考。

Alright let’s take a deeper look into exactly what we are doing here. We defined our url at the top and we are going to item with the id of 1. In the first .then we take the response and convert the information over to JSON so we can work with the data later on. In the second .then we take our movie data and then call the second function renderMovie where we are able to render the data onto the screen for our user in this case.

好吧，让我们更深入地了解我们在这里所做的事情。 我们在顶部定义了url，然后将id设置为1。在第一个中。然后，我们将响应并将信息转换为JSON，以便以后可以使用数据。 在第二个.then中，我们获取电影数据，然后调用第二个函数renderMovie，在这种情况下，在这种情况下，我们可以将数据呈现给用户。

Another Fetch request we might use is a Patch one. This one is a bit-more complicated, however, once you understand what is happening behind the scenes it all makes sense.

我们可能使用的另一个提取请求是补丁请求。 但是，这一点有点复杂，一旦您了解了幕后发生的事情，一切就说得通了。

So in a Patch request you are modifying an existing resource. The nice thing about the Patch request is the body only needs to contain the specific changes to the resource. Our Patch request then speaks with the API and will create a new version according to the instructions we provide.

因此，在补丁请求中，您正在修改现有资源。 关于Patch请求的好处是主体仅需要包含对资源的特定更改。 然后，我们的补丁请求会与API对话，并会根据我们提供的说明创建新版本。

Here once again in the top of the Fetch we are telling our program where we want to go, in this case its the URL provided as well as the item with the Id of 1. In the method we are telling our computer it is a PATCH request so now it knows we have to update something in the URL we are going to. That is why the body of our fetch request takes in the changes we want to make which in this case we are replacing the number of tickets available with a new variable we defined earlier on.

在Fetch的顶部，我们再次告诉程序我们要去的地方，在这种情况下，它提供的URL以及ID为1的项。在方法中，我们告诉计算机这是PATCH。请求，现在它知道我们必须更新要访问的URL中的内容。 这就是为什么我们的提取请求的主体接受我们要进行的更改的原因，在这种情况下，我们将用之前定义的新变量替换可用凭单的数量。

Overall it is very very important to be able to know how to fetch data/update data from an URL. Most modern day applications are going to require you to do some sort of fetch. It may take some time to wrap your head around fetching data, but in no-time you will be an expert!

总体而言，能够知道如何从URL获取数据/更新数据非常重要。 大多数现代应用程序都将要求您进行某种提取。 可能需要花费一些时间来抓取数据，但是您很快就会成为专家！

翻译自: https://medium.com/swlh/telling-javascript-to-go-fetch-data-from-the-server-9a31f7f5332b