AJAX and How it works

Tram Ho

Hello friends. In this article I will introduce AJAX. A common programming technique that we use a lot. Let’s find out what it is, why use AJAX, what benefits it should and how to use it appropriately. Ok, let’s get started

1. What is AJAX?

AJAX is a method of exchanging data with servers and updating one or more parts of a web page. Ajax is a generic term for various Javascript techniques used to connect to web servers automatically without necessarily reloading the page. AJAX stands for Asynchronous Javascript and XML.

Technically, it refers to the use of XmlHttpRequest objects to interact with a dynamic web server via Javascript.

2. Why AJAX?

When you finish coding a web page, that’s only part of it. After the code is completed, nobody will use it, it will not make any sense. So how to code a website or create a good function, how to make people like it, like to use it is the main problem that we need to be concerned about.

User experience is very important to our developers. And AJAX is one of the tools that helps us give our users a better experience. When a small change is not necessary, it will not reload the whole web, making the site reload many unnecessary things. Put me in the position of the user, I also do not like any page that only a small operation that also has to load again and again.

Benefits that AJAX brings:

  • AJAX is used to make a callback. Used to perform data retrieval or archiving without reloading the page. With small servers, this will also save us bandwidth.
  • Whatever you need, just send that section, reload that section, not load the whole page. This way, you can minimize the page load speed (What we need, we load that, no need to load all the data and then not use) to help users have a better experience.
  • The website you create will also be more diverse.
  • For programmers it is quite easy to learn and use.

3. How it works

  1. First from our browser, we have an event to call ajax. Then javascript will create an XMLHttpRequest object. And this object will be sent a request to the server for example: When the user clicks on the input box and select the user’s province / city. We will then retrieve that information and send it to the server and need to return to the user’s districts
  2. When the server receives the HttpRequest from there, it will process the request and return the response to the web. The processing server retrieves the districts of the provinces / cities the user needs and returns the data of the districts.
  3. After receiving a response from the server, Javascript will process and update it on our website. Javascript will get the districts and process them into the select districts box for us. To illustrate the example above, let’s try it out together with laravel. First we will need to have 2 models: City (including field id and name) and District (including field id, name, city_id).

And 1 Controller CityController created by running the command php artisan make: controller CityController.

Next we need a route to return the view to the user to select the city, a route to retrieve the districts from the province / city that the user chooses.

We will write function select () in CityController.

Our view will look like this:

Next we will write a function getDistrict ():

And finally to the main part of us is to use ajax:

It is done. Very simple, right. 😃

Here whenever we need to use ajax need to pay attention to: type: specify the method of sending. Here we use the GET method. If you use POST, PATH, DELETE methods, we need to add a token to ensure security. Why use it, you can refer to this article. url: The route needs a route to determine the next action (for example, here I define the controller and the function to handle retrieving data). data: Submit the required data (here I send the id of the city to retrieve the district).

4. How to use it?

Although AJAX brings us many benefits, not everything can be used with AJAX. Besides that it also has certain limitations of it. So we should also consider how to use? Where should be used appropriately. A website that uses too much AJAX is also not good, having so many users will cause the server to receive too many requests that can kill the server. We should use in small functions such as the example above, vote posts, comments, rate, …

5. References.

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX https://www.tutorialspoint.com/ajax/what_is_ajax.htm

Share the news now

Source : Viblo