13+ Best AJAX Interview Questions For Engineers - Algrim.co

13+ Best AJAX Interview Questions For Engineers - Algrim.co We've compiled a comprehensive list of AJAX interview questions and answers to help you in your upcoming technical interviews. These questions demand a practical understanding of how AJAX is used. AJAX is commonly covered in technical interviews as it relates to common web development practices for modern user-interface applications. Especially those that rely on Frontend frameworks like React, Angular, Vue, etc. AJAX requests are a way for user-interface applications to communicate with a server-side application via web-requests. Almost every modern user-interface application uses AJAX requests to some extent. Why is AJAX covered in technical interviews? AJAX is covered in technical interviews because it is an essential tool used by Frontend engineers (and by proxy, backend engineers) to send requests between a user-interface and server-side application. AJAX uses HTTP requests to communicate, so using AJAX properly requires a strong understanding of the HTTP protocol, its various methods, and its proper uses and best practices. All of this is central to being viewed as a strong candidate for web application development positions. 15 AJAX Interview Questions & Answers 1. Describe in practical terms what AJAX is used for in a web application. AJAX is typically used in a web application to communicate data between a server-side application, written in Java, Node.js, or PHP for instance, and a javascript user-interface application, usually written in Javascript. Without using AJAX to communicate data between the javascript user-interface and the server-side application, a user typically needs to navigate to a different URL in order to move through web-pages and display new data. Using AJAX; however, a javascript user-interface application can send requests to the server-side application and display new data on the screen without navigating to a new URL or refreshing the browser. 2. What are the http methods used in AJAX calls, and what do they do? There are five http methods used in AJAX calls, they are GET, POST, PUT, PATCH, DELETE. GET is typically used to retrieve information from a server-side application, perhaps data stored in a database or accessed from a third party API. If a javascript user-interface application needs to display a list of users, the application might fetch that list of users with an AJAX GET request to some URL, e.g. https://my.example.api.com/v1/users. It is worth nothing that GET requests support query parameters, so you can pass arguments via your URL string, e.g https://my.example.api.com/v1/users?name=Sherry. POST is typically used to create some entity in the server-side application. An AJAX POST request commonly results in a new entry into the server-side application’s database. If a javascript user-interface application needs to create a new user, perhaps when someone signs-up to create a new account, the application might create that user with an AJAX POST request to a URL, e.g. POST https://my.example.api.com/v1/users. The POST request usually carries a request body or payload, which is most commonly JSON or XML. In the case of creating a new user, this JSON payload would likely contain a properties like username, firstName, lastName, etc. PUT requests are used to replace some entity in the server-side application. An AJAX PUT request commonly results in an existing entry in the server-side application’s database to be replaced with an updated version. In the case of a javascript user-interface application which needs to allow users to update their account information, for example their name or job title, the application could use an AJAX PUT request to a url, e.g. PUT https://my.example.api.com/v1/users/:userId. Similarly to a POST request, a PUT request usually carries a payload with new data with which the existing data will be replaced. PATCH requests are used to update some entity in the server-side application; however, unlike the AJAX PUT method which is meant to replace an existing entity, a PATCH request only updates part of the existing entity. The JSON payload for a PATCH request will not contain the full set of properties of the entity to be updated. Instead, it will carry only the properties which are the focus of the update. The request body for an AJAX PATCH request might look like, e.g. DELETE requests are used to delete some entity in the server-side application. By sending an AJAX DELETE request to a url, e.g DELETE https://my.example.api.com/v1/users/:userId, a javascript user-interface application might remove an entity from the server-side application’s database. 3. In a Javascript application, what are some options you have for making AJAX requests. Or, more generally, for making HTTP requests to a server-side application. You can use libraries to add support and additional functionality surrounding AJAX requests in your Javascript application. Libraries like jQuery and Angular have different purposes for an application, being a utility library and a framework, respectively; however, both offer APIs for AJAX requests. Other libraries like Axios.js offer more specific functionality tailored for making AJAX requests. If you are using ES6 Javascript to write your application, you can use Javascript’s native fetch() function to make HTTP requests to a server-side application. 4. What is a potential disadvantage of using AJAX to load data into your users’ web-browsers, as opposed to having a non-javascript application without AJAX. One potential problem with a Javascript application which users AJAX involves the routing in the application, meaning, how does a user know where they are or get back to where they were in the application. In a non-javascript application, the URL in the users’ web browser represents a pointer to the view of data and user interface a user will see on their screen. If a user wants to return to the view of a certain bit of data, they can use the URL to return. In a Javascript application using AJAX, the user-interface application is communicating with the server-side application without necessarily changing the URL in the web browser. AJAX provides support for HTTP requests, but does not have any control over the browser’s URL bar. This means that the user could potentially click buttons on the interface, load new data into their view, yet never navigate to a new URL. When the user refreshes their browser, they will lose the view they had previous to clicking buttons and loading in new data. There are solutions to this problem which provide routing through Javascript. Many Javascript frameworks like Angular have a routing solution built in, and most others like React have a favored-framework to handle routing in an AJAX powered application (in the case of React, react-router). 5. What is an HTTP request vs an AJAX request? An AJAX request is an HTTP request, usually made between a Javascript user-interface application and a server-side application. 6. AJAX stands for Asynchronous Javascript and XML. In its name, what does Asynchronous mean? What is the difference between an asynchronous and a synchronous process? An AJAX request is asynchronous, meaning that the time the result will return for the request is indeterminate. You can’t guarantee when an AJAX response will come, or if it will at all; an AJAX request could fail! Other processes and code can run while the result of the request is being awaited. If several AJAX requests are initiated at the same time, for example perhaps two separate AJAX requests load in a user’s personal data and a list of a user’s friends, the result of those two requests can be displayed in whichever order they return. Loading indicators can be rendered on the screen, and the user can still use the application while the AJAX requests are pending. Unlike an asynchronous process like an AJAX request, in a synchronous process, the return time is known and other code or processes in the same thread do not happen “in between” the invocation of the synchronous process and the following lines of code. If you invoke a synchronous, computationally-complex piece of code that takes a long time to run, maybe 10 seconds for example, then to your users your Javascript application might look “frozen” for 10 seconds until the synchronous code is finished executing. 7. Depending on the method by which you make AJAX requests, for example using ES6 fetch() vs jQuery $.ajax(), your code would rely on either promises or callbacks, respectively. Describe what a callback function would be used for in the context of an AJAX request. The callback function would contain the logic for whatever happens after the AJAX request has returned. For example, if your user-interface application was making an AJAX GET request to fetch a list of users from a server-side application, a callback function would be created in your user-interface application to define what to do with the list of users after the server-side application has responded. Perhaps we would set the list of users into a variable in our Javascript application, or do some transformation on the data. Javascript libraries like jQuery provide a convention for writing callback functions in AJAX requests. 8. What is a promise? Describe what a promise would be used for in the context of an AJAX request. A promise is a Javascript object that will have a desired value at some point in the future, after an asynchronous process has completed. A promise is an object like any other in Javascript, so it can be assigned to a variable. When you set a variable equal to a promise, you are saying that later on, when the asynchronous process has been completed you will be able to extract the value from it. As noted earlier, AJAX requests are asynchronous processes, meaning that it is indeterminate when the AJAX request will be complete. The completion depends on many factors which can not be accounted for, for example a given user’s internet connection speed. Because AJAX requests are asynchronous, a promise can be defined such that it will have a desired value, after the AJAX call has completed. Some libraries or language-features used for AJAX requests support promises. Javascript ES6 fetch() function natively returns a promise. Some example usage: 9. What is one advantage of using promises rather than callbacks when dealing with asynchronous functionality like AJAX requests? Using callback functions in the context of making AJAX requests is not necessarily a bad practice; however, there are situations where callback functions can lead to unreadable and difficult to understand code. Specifically when callback functions are nested. An example of AJAX requests using nested callbacks: If you read carefully through the above code, you’ll see that we are making 3 AJAX requests. 1) First fetching a list of users. 2) A second AJAX request which depends upon the result of the first. In this case, we take the first user from the list of users, and then gets more details about that user. 3) We search for all the users who share the firstName of the user in the second request. Hard to follow! See below how promises can clean up the above code. 10. How can AJAX have disadvantages or provide obstacles in terms of SEO? What are some solutions to these problems? Content-driven websites which rely on search rankings in Google or other search engines must be careful in their usage of AJAX. While AJAX is a straightforward way to build more dynamic-feeling and interactive user interfaces, improper usage can cause a content-dependent site to be virtually unfindable on the internet! The reason this can happen, is because when Google builds its indexes of searchable websites, it uses computer algorithms to “crawl” the web, landing on webpages, and digesting the content that is on the webpage. When a site uses AJAX to load in its content, Google’s crawling algorithm will land on a page, and see no content. The content might be on its way, but the crawler does not know that it should wait for an AJAX request to complete, so this page looks completely blank! Fortunately, there are some solutions that allow a website to combine the interactivity of an AJAX-driven user interface and the searchability of its content. These solutions are called server-side rendered frontend frameworks, React Next is one such example. 11. Assume you are working with a legacy Javascript jQuery application which uses the $.ajax() function to make all of its AJAX requests to the backend application. There are currently more than 100 invocations of $.ajax() in the application. A new requirement is made, which says that all HTTP requests to the backend application must include a header, which says “authApp”: “yes-pls”. How would you approach this requirement, so that the Javascript application continues to work? In order for this Javascript application to continue working, all of the existing 100 $.ajax() calls must include the new header. It will be time consuming to add the header manually into all 100 invocations, therefore, we should be looking for a way to apply the header to all of our AJAX calls at once. In the case of jQuery’s $.ajax() there is a solution, $.ajaxSetup(). $.ajaxSetup() takes all the same options as a regular $.ajax() call; however, the options passed in will serve as defaults for all future $.ajax() calls, (until $.ajaxSetup() is called again). Our solution will look like: Now, all of our future $.ajax() calls will include the “yes-pls” header. 12. Assume you are making an AJAX request from a Javascript user-interface to a server-side application, and the request fails. Upon inspecting the request, you see that the failed request’s HTTP method was OPTIONS, even though you expected to send a GET request. What could cause your AJAX request to fail like in this circumstance, and why was OPTIONS the HTTP method for the request and not GET? An AJAX request could fail like it did in this circumstance, if the hostname of the website which created the AJAX request is different than the hostname of the API to which the request was sent. For example, if my Javascript application is accessed at http://www.myapp.com, and my server-side application is hosted at http://www.myapi.com, I could see this error. This is due to a security feature in modern browsers called Cross Origin Resource Sharing restriction. When a web browser sees that you are trying to make an AJAX request between two different URLs (for example, a GET request), the browser first sends what is called a “preflight” OPTIONS request. This request will ask the server being contacted if it has explicitly allowed the sending server to make the GET request. If the webserver was not specificall configured to allow GET requests from the sending hostname, then the OPTIONS request will fail and the GET request will not occur. 13. In many cases, AJAX requests are made to an API that exists at some web address; however, what if you wanted to load a static file with AJAX. Would this be possible? It is possible to load in data from a static file. Instead of using an API’s URL for the URL property of your AJAX request, simply point directly to the static file’s address. This could be a JSON file for example. 14. Bob is a web developer working on an interface that shows a list of users and their associated data like their name, phone number, and address. Bob makes an AJAX call to retrieve the list of users, but he notices that the data he receives does not have the address field that is required. He decides that, since there are only 4 users in the list, he will make a separate AJAX request for each user, to an endpoint where he can retrieve the address as needed. Is Bob’s approach to solving this problem OK? If not, why? Bob did not make the best solution to the problem. The issue is that Bob relies on the assumption that there are only 4 users in the system. If the system grows, to say 200 users, loading Bob’s list will require 200 AJAX requests to be made to the backend. Just to retrieve address information! The proper approach is for Bob to communicate his need for address information to his colleagues who wrote the backend application, or communicate with the product team to see if the feature can be excluded until a better solution can be implemented. 15. Imagine a user is accessing your website on a public library computer, where due to security concerns Javascript has been disabled in the web browser. If your website uses AJAX to load content onto its pages, Is it possible for that user to view your webpage and its content? Why or why not? The user will not be able to view your web page’s content. Because AJAX depends on Javascript code to be executed by your browser, the library’s Javascript restriction will prevent those AJAX requests from firing. Unless you have a Javascript-disabled-friendly version of your site accessible, this user will not be able to see your content unless they go to a different machine.