ajax应用_AJAX的应用

蔚落 2023-03-05 08:29 14阅读 0赞

ajax应用

**AJAX** has several benefits that can be utilized inside a web application. In this article, we'll explore some **advantages of AJAX** and see **some of its applications**.

**AJAX**具有可在Web应用程序内部使用的多个优点。 在本文中，我们将探讨**AJAX的**一些**优势，**并了解**其一些应用** 。

### 编写回调 **(**Writing Callbacks**)** ###

Recall that a simple callback function is just one function calling another one by taking the latter as a parameter. We can use AJAX to make a callback in many applications without waiting for the page to respond with the data. Now, this has an advantage when it comes to building an application that runs fast and smoothly thereby providing great user experience. The network speeds up and performance becomes better because the network utilization is considerably reduced. Similarly, if a website has a restricted bandwidth, it considerably boosts up. This is a great exploitation of the fact that many times writing AJAX requests we only need a small amount of data for our application. It doesn't make sense to have a large response time for minimal data. The response time, network load and speed should be in accordance with the kind and amount of data we're taking in.

回想一下，简单的回调函数只是一个将另一个作为参数调用的函数。 我们可以使用AJAX在许多应用程序中进行回调，而无需等待页面响应数据。 现在，这对于构建快速且平稳运行的应用程序具有优势，从而提供了出色的用户体验。 由于网络利用率大大降低，因此可以加快网络速度并提高性能。 同样，如果网站的带宽受到限制，则可以大大提高网站的带宽。 这是对以下事实的一种很好的利用：多次编写AJAX请求，我们的应用程序只需要少量数据。 响应时间长，数据量少是没有意义的。 响应时间，网络负载和速度应与我们要接收的数据的种类和数量一致。

### 进行异步调用 **(**Making Asynchronous Calls**)** ###

The asynchronous behavior of an application is the magic behind single-page applications. These days modern applications have a single page with multiple functions that are undisturbed when the process is fetching data from a server is going on the background. These asynchronous calls can be made with Ajax to a backend, API or a server. As a user, we never have to wait for that data to come back for seeing other pages on the website or seeing some content.

应用程序的异步行为是单页应用程序背后的魔力。 如今，现代应用程序只有一个页面，其中包含多个功能，而这些功能在后台从服务器获取数据的过程中不受干扰。 可以使用Ajax对后端，API或服务器进行这些异步调用。 作为用户，我们无需等待数据返回就可以看到网站上的其他页面或看到某些内容。

Alright so AJAX is used to write callbacks and making async calls, but where are these benefits utilized?

好的，所以AJAX用于编写回调和进行异步调用，但是这些好处在哪里得到利用？

### 1)登录表格 **(**1) Login forms**)** ###

Working with AJAX in login forms is a great way to understand it's an advantage. We create a simple login form and attach an event listener to our submit event. When this event is triggered, we make an AJAX call to our database and check for valid user credentials. All of this without the slightest need to steer away from the current page or reloading the pageA popular site like Digg has a login system that works this way.

以登录表单使用AJAX是了解它的一个好方法。 我们创建一个简单的登录表单，并将事件侦听器附加到我们的Submit事件。 触发此事件后，我们将对数据库进行AJAX调用，并检查有效的用户凭据。 所有这些都完全不需要转向当前页面或重新加载页面。像Digg这样的受欢迎的网站都具有以这种方式工作的登录系统。

### 2)自动完成 **(**2) Autocomplete**)** ###

Google was one of the first major companies to start using AJAX. When google's search engine tool came out everyone was talking about it. You must have not noticed that the autocomplete feature inside their engine was dynamic even back then, courtesy of AJAX. When typing into the Google search bar, it starts to use AJAX to get common results from the database on each keystroke. Even now you can use AJAX to add auto-complete features on your web application easily. This is also implemented in many UI Libraries which give us the autocomplete feature using an inbuilt plugin but inside it's simple AJAX callback working on the autocomplete feature.

Google是最早使用AJAX的主要公司之一。 当Google的搜索引擎工具问世时，所有人都在谈论它。 您可能还没有注意到，即使在那时，其引擎内的自动完成功能还是动态的，这要归功于AJAX。 在Google搜索栏中键入内容时，它将开始使用AJAX在每次击键时从数据库中获取常见结果。 即使现在，您也可以使用AJAX在Web应用程序上轻松添加自动完成功能。 许多UI库中也实现了此功能，这些库使用内置插件为我们提供了自动完成功能，但是在内部，简单的AJAX回调在其中使用了自动完成功能。

### 3)动态更新内容 **(**3) Dynamically updating content**)** ###

It shouldn't be a surprise that popular social media platforms established their dominance on the web by showing the user's feed, comments, posts, etc dynamically without the need to refresh the page. The AJAX engine would fetch data in real-time and show it to the user. This is how the page would update content dynamically and offers a great user experience.

流行的社交媒体平台无需刷新页面即可动态显示用户的供稿，评论，帖子等，从而在网络上占据统治地位，这不足为奇。 AJAX引擎将实时获取数据并将其显示给用户。 该页面将以这种方式动态更新内容并提供出色的用户体验。

### 4)聊天应用 **(**4) Chatting applications**)** ###

Long ago, back when instant messaging had just come out and had started gaining immense popularity, most online chat rooms and chat apps were using AJAX requests for the complete functioning of their chatting applications.

很久以前，当即时消息传递刚刚开始并开始受到极大欢迎时，大多数在线聊天室和聊天应用程序都使用AJAX请求来实现其聊天应用程序的完整功能。

### 5)小部件和添加 **(**5) Widgets and adds**)** ###

Widgets were super popular back then just as much as ads are these days. You must have noticed a lot of times adds on a website changes after some time and all of this happens while you have been on the same page for the last 15 minutes doing possibly nothing but read out some wiki information that you need. You never clicked anywhere, never reloaded the page, the network speed was fantabulous. In such a situation if the page just out of nowhere grabs some data and updates it, while you're in awe wondering wasn't there an advertisement of mind valley here before? Now there's one for Mitashi. All of this because of AJAX callbacks and asynchronous AJAX requests.

窗口小部件在当时非常流行，就像现在的广告一样。 您一定已经注意到，一段时间后，网站上的很多次更改都发生了，而所有这一切都是在您过去15分钟一直在同一页面上时发生的，除了读出所需的一些Wiki信息外，可能什么也没有做。 您从来没有单击过任何地方，也从未重新加载过页面，网络速度异常惊人。 在这种情况下，如果页面无处不在获取一些数据并对其进行更新，而您却对此感到敬畏，那么您是否想知道这里是否曾有过广告宣传？ 现在，三菱有一个。 所有这些都是由于AJAX回调和异步AJAX请求。

Reference: [How AJAX Works: 10 Practical Uses For AJAX][How AJAX Works_ 10 Practical Uses For AJAX]

参考： [AJAX的工作原理：AJAX的10种实际用途][How AJAX Works_ 10 Practical Uses For AJAX]

> 翻译自: [https://www.includehelp.com/ajax/applications.aspx][https_www.includehelp.com_ajax_applications.aspx]

ajax应用

[How AJAX Works_ 10 Practical Uses For AJAX]: https://www.jotform.com/blog/how-ajax-works/
[https_www.includehelp.com_ajax_applications.aspx]: https://www.includehelp.com/ajax/applications.aspx