Ajax - what is it? Asynchronous JavaScript and XML: Pros and Cons

Now you can observe that the use and application of new technologies is gaining popularity on the Internet. One of them is AJAX. What it is? What characteristics does it have? Where is it used? All these questions can be answered within the framework of this article.

general information

ajax what is it
How is AJAX decrypted? What does it mean? This abbreviation is an abbreviation. It stands for Asynchronous Javascript and XML ("Asynchronous Javascript and IKSML"). Often you can see or hear information that this is a new technology. But it is not so. The fact is that Javascript and XML have been around for quite some time, while Ajax is a synthesis of these technologies. Most often, it is used in conjunction with the term Web 2.0 and is implied as the use of advanced development methods.

And what is the feature?

So, we already have a general idea of ​​what AJAX is. What does this give us in practice? Why is there active talk about its use? The peculiarity of this technology is that when you use it, you do not need to refresh the entire page at the first need. After all, you can request new data only for its part. This is convenient (because you have to wait less time) and economically (for those who do not have unlimited Internet). True, to inform the user about the ongoing update, it is advisable to use at least a download indicator or text messages that will inform about new data from the server. The minuses of the technology often mention the fact that it is not supported by outdated and text browsers. And the user has the ability to disable Javascript technology, which many people use. Therefore, AJAX should not be abused. What can this do if alternative methods for presenting information are not provided? In the best case, the information simply will not be displayed on the site. At worst, its appearance will suffer so much that the user will no longer return to it.

Benefits of Ajax

web application
This technology offers two methods by which a web page can be implemented. The first involves making changes without rebooting. This can be done using dynamic server calls. The second involves the use of individual technologies, the most popular of which is XMLHttpRequest. Regarding the very advantages of Ajax, the following can be said:

  1. You can create a convenient web application in which the interface will have a number of features that are pleasant for the user, which ultimately will facilitate the interaction of the person and the site.
  2. Instead of a full page reload, a partial one occurs. This saves machine resources and optimizes performance.
  3. The server part of the site actively interacts with the user.
  4. It is convenient to use to implement a number of ideas.

Data exchange

Here, for example, we need a feedback form with which you can consult clients. How can it be done? First you need to take care of the "carrier" of information. To do this, create an XMLHttpRequest object. It acts as an intermediary between the server and the user's browser. Using this object, requests will be sent, as well as responses to them will be received. For direct data exchange, we need AJAX PHP. This toolkit can be implemented using GET or POST requests. In this case, the necessary arguments will be passed directly through the URL. At the same time, a function will be launched to ensure that data transfer is not interrupted. But what AJAX request to implement? Recommend to use POST. Thanks to it, you can transfer an unlimited amount of data, which, moreover, is much more difficult to access.

Principle of operation

webpage
How does asynchronous Javascript and XML function in practice? Let's figure it out with an example. Regarding the structure of the building, it is necessary to ensure that the client part provides all the necessary functionality for the safe exchange of data. It should provide the necessary methods for transmitting information in selected ways. The server part should provide processing of the received data, and, already based on it, generate new information in order to subsequently transfer it to the client. The most common interaction of this type is working with a database. We have already mentioned such an element of many business sites as the feedback form. The advantage of Ajax in this case is that it carries out asynchronous data transfer. In other words, while the information is being sent, the user can perform all the necessary actions. Focusing on the specifics of each particular case, it is necessary to decide whether it is necessary to inform the site visitor about this process. Regarding the same form of feedback, it should be said that in this case we can write "the operator is picking up an answer", or something similar.

Server response

It can come not only thanks to XML, as you might think because of the name of the technology. In addition, it can be transmitted as plain text or JSON. In the first case, the received information can be immediately displayed on the page. If XML is used, care must be taken to ensure that the AJAX file is properly processed in the client’s browser. All data in this case is converted to (X) HTML. When the JSON format is used , it is necessary to execute the received code to get a full-fledged Javascript object. It is necessary to exercise caution and take into account the fact that many attackers like to transmit malicious code through this technology. Therefore, it is necessary to provide a procedure for checking the received data before processing it. Implementation features for different browsers may vary slightly, but, in general, the scheme of action is the same here.

Making a request to the server and processing the response

feedback form
The whole sequence of actions will look like this:

  1. Initially, you need to create and make sure that XMLHttpRequest exists.
  2. Then the connection to the server is initialized.
  3. We send a request to him.
  4. We wait until the data arrives and process it.

It should talk about some features regarding the creation of the object. It can be initiated anywhere it is possible within the framework of a programming language. But if he is assigned the status of global, then at some one point in time, only work with one request will be possible for him. This moment needs to be paid close attention. Regarding processing - here we focus on the selected tool. So, with XML, you need to process the data with DOM functions and present the end result in HTML to the user. So what to do with JSON-nom? It should be understood that it is Javascript object notation. What does it mean? Thanks to JSON, you can represent an object as a string. But it is necessary to remember that this method is not fully safe, and a lot of factors will need to be taken into account. But, in general, it is quite light.

Server programming languages

Almost any web application uses them to one degree or another. The most popular for data transfer is PHP. It usually writes files for sites where the speed of information transfer is not critical, but a balance between it and reliability is preferred. XMLHttpRequest submission methods have been discussed above.

Configure the server

asynchronous javascript and xml
What programs are needed for AJAX to work fully? What will it give us? What are they needed for? To get answers to these questions, you should familiarize yourself with the following list:

  1. HTML / XHTML. They are needed so that the server recognizes the page layout.
  2. CSS This tool is necessary for the visual selection of page design.
  3. DOM It is needed in order to provide dynamic changes on the page as a response to the action on the part of the user.
  4. XML Required to transfer data between client and server.
  5. Javascript Needed to create the Ajax engine and ensure interactivity.
  6. XMLHttpRequest. The object through which requests to the server will be forwarded.

Use on the site

So, now we have both theoretical knowledge and understanding of how AJAX works. Sending data now requires only some practice. Let’s take a look at how to approach the implementation of the task using Ajax. So, we need to create a driver database. Moreover, they will differ in devices on which they can work. It should be noted that the database in question is very large, so there is no sense in simply sending it to the client and already offering him to make a selection using JavaScript. It is also undesirable for the web page itself to reload due to one parameter. On the server, requests will be processed by special PHP scripts. The database is implemented as an XML file.

About the database

ajax sending
It is necessary to work out its structure. But what if parameters that are objects are passed? In this case, it is necessary to provide for the creation of a variable, where there will be a link not to it, in case of a call from the function. To be able to access it from anywhere in the code, you need to make it global. For convenience, it is advisable to use a database management system. Of course, this is not necessary. But still, using a DBMS will allow working with data more conveniently and efficiently.

We are working on the engine

How will everything happen? So, a certain event occurs that will cause a special function. She will prepare the GET or POST data that will be sent. Then a function is called that will call the server script URL. It is necessary to provide for the creation of an XMLHttpRequest object in it. The link to it should be stored in a variable. After the data has been sent to the server, you must wait for a response from it. To do this, you can turn on the “wiretap” before receiving information (if you know what will come and when) or provide a function that will always be ready to receive data. The first option is less reliable in the event of an emergency. The second implementation is more costly in terms of resources. Although, if this is done only with respect to one variable, it will not affect the fast Internet. But if there are hundreds and thousands of them, and they will be large, then this will be another matter. Therefore, it is necessary to seek a balance between the use of available resources and productivity. After all, it should be understood that not everyone has 16 GB of RAM. For this, a certain waiting time can be set, after which the previous data or information that the server is unavailable at the given time is substituted.

Features

ajax file
When using “Ajax” an interface is created for a page or application, it is necessary to ensure that the result works well both on different operating systems and on different browsers. In the first case, emulators can provide invaluable help. In the second case, it will be enough just to install various programs and check the operability of the code on them. It is also necessary to provide certain actions in case the browsers used by the user become obsolete or he disables the necessary settings. In such cases, care should be taken to display text on the page that indicates the reason why viewing the site in this case is not possible. Yes, now the vast majority of people use modern technology, but you should not completely ignore the likelihood that several percent of visitors will use somewhat outdated software. And on a business scale, this can have significant consequences.

Conclusion

So this article comes to a logical conclusion. If we talk about "Ajax" in general, this tool allows you to create very attractive and multifunctional sites that work quickly and with proper layout make their users a pleasure. There is no doubt that even more advanced technologies will appear in the future, but for now, we will use what we have. With the improvement of programming languages ​​and their methods, it is quite possible that such implementation options will become available that will allow you to create an even better product. But be that as it may, you need to work now with what is. And the name is Ajax.

Source: https://habr.com/ru/post/K17699/


All Articles