Ajax

There are a few limitations that AJAX users should keep in mind. These are:

1. Response time: It is a concern for the AJAX developers related to the network latency. Developers need to carefully consider the time gap between the user request and server response.
2. JavaScript Dependencies: AJAX heavily relies on JS. Often, the implementation goes different from browser to browser or when the browser's version changes. That is why developers need to check the AJAX-based applications on various browsers.
3. Integration with Browser: Dynamic websites do not manifest themselves with the browser history engine. That is why clicking the Back button in the web browser might not land users on the desired page or give the desired result.

This is a frequently asked question in Ajax basic interview questions.

AJAX is an abbreviation of the initials of different technologies. They are:

• HTML & CSS: HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two well-known & elementary technologies for creating web pages. Both work in tandem to provide structure and visual styling to the web pages.
• XML: eXtensible Markup Language is a set of user-defined tags and codes that helps in describing the text in a digital document. It encodes the data in such a form that is both machine-readable and human-readable also.
• Document Object Model (DOM): It is a programming format and interface for HTML and XML. It acts as a logical structure to define the way developers access and manipulate documents. It is not responsible for determining relationships between objects.
• JavaScript: It is the world's most well-known interpreted language. It is a high-level, lightweight language and has a just-in-time compiler. It supports multiple paradigms and is a core web development technology that works adjacent to HTML and CSS.
• XMLHttpRequest (XHR): It is an API as an object that asynchronously establishes communication between the client and the server. It transfers data between the web browser and a web server through the browser's JavaScript environment.

XMLHttpRequest has various tasks when applied with AJAX. These are:

• Requesting data from the server
• Sending data to the background through the XMLHttpRequest
• Receiving data from the server
• Updating data without reloading the page

AJAX creates HTTP requests with the help of XMLHttpRequest. It promotes transferring data between the client and the server, which is the request and response selection. Developers can perform the same operation and fetch data from URL without a page refresh through AJAX. There are three steps for doing this:

• Create the XMLHttpRequest object.
• Open the request using the open method.
• Send the request via the send method.

XMLHttpRequest can render both synchronous and asynchronous communications for AJAX. In AJAX, synchronous requests are those requests where the JavaScript will stop processing the developer's program until it receives a result from the server. In this situation, when the application processes such synchronous requests, the browser remains frozen effectively. Hence, developers should carefully configure such requests, making the server respond to the user according to the requirement. Synchronous requests remain in a waiting state for the server response after requesting to continue with the next script execution.

As with any technology, there are several issues that developers face. Two key security issues associated with the AJAX are:

• Attackers may append their script into an AJAX-based system.
• The source code of AJAX is readable.

In the modern context of web development, AJAX is really simple to work with.  Although the semantics of AJAX use HTML, XML, CSS, JavaScript, and JSON, it helps decouple web apps or webpage displays from data transfer for stable performance. That makes it advantageous compared to the traditional approach to website development. It also renders libraries like Axios that are simple promise-based HTTP clients for the browser and node.js. Axios delivers a simple-to-use library that comes with a tiny package as an extensible interface.

There are 2 methods that helps in transferring data between multiple security domains.

• CORS: Cross-Origin Resource Sharing, which operates through HTTP web browsers.
• JSONP: JSON with Padding is another technique that operates with legacy browsers through the HTTP GET method.

AJAX works smoothly with various other programming languages. AJAX is client-side so it really does not matter how the remote service/API is built. AJAX just needs to remotely connect to the service to fetch/send data.

Five different ready states are there in an AJAX request. These are:

• 0, designates UNOPENED or request not initialized
• 1, designates OPENED or establishes a connection with the server
• 2, designates HEADERS_RECEIVED or request received
• 3, designates LOADING or processing the request
• 4, designates DONE or request finished and is ready with a response

There are different situations where developers can use AJAX.

• Developers can use AJAX in security authentications for web applications for both server-side and client-side operations.
• Another well-known use of AJAX is fetching resources through the Fetch API. The traditional way of uploading content requires the user to navigate to a separate upload page. The page gets reloaded once the upload completes. AJAX-based applications can upload a file without a reload.
• Form auto-complete is another successful technique that helps elevating many web applications. Most auto-complete search forms get created using AJAX AutoComplete for jQuery.
• Rating the content is another real-time application that leverages AJAX. The data rating gets uploaded without reloading the page. All credit goes to AJAX. Some famous examples of such websites are Reddit and Quora.

Fetch works as an interface to create the AJAX request in JavaScript. All modern browsers largely use it. Developers leverage the Fetch to call any API that works in tandem with AJAX. When an application calls or uses the Fetch, it returns a promise along with a Response object. The promise gets rejected when it encounters a network error. The server will again respond with a status code for the application when the connection comes back. When the developer uses the Fetch, the status codes are usually 200s, 400s, or 500s.

In AJAX, the callback functions aid in handling responses from the server. Such functions can either be a named function (that developers use frequently) or an anonymous function. Developers can implement a broad spectrum of AJAX tasks on a website by simply creating a function that does the XMLHttpRequest execution along with a callback function, which accomplishes each AJAX task.

It's no surprise that this one pops up often in Ajax interview questions for freshers.

JSON stands for JavaScript Object Notation. It is an open standard data interchange format that leverages human-readable text. It allows transmitting data objects having attribute-value in pairs & arrays. Such a file format for data sharing is both human and machine understandable. JSON is a faster alternative to XML. Although AJAX uses XML, there is also a possibility where AJAX can use JSON for exchanging data between a browser and a server. The JSON format is easy to understand, and fast and supports strings, values, numbers, and objects. Due to its benefit and ease of use, many developers prefer to use JSON for passing AJAX-based updates within a client and a server.

Some popular tools that help developers debug any AJAX-based website and apps are:

• Firebug for Mozilla Firefox
• Script Debugger
• JavaScript HTML Debugger
• Fiddler for IE (Internet Explorer)
• MyEclipse AJAX Tools

Some well-known web browsers that support AJAX are Google Chrome, Opera, Mozilla Firefox, Microsoft Edge and Safari.

Some well-known AJAX enabled/enabler frameworks are:

• jQuery: It is a JavaScript library that renders an Ajax framework and other utilities. It provides abstractions for low-level interaction along with animation, high-level operations, advanced effects, themeable widgets, etc.
• Google Web Toolkit (GWT): It is a set of tools and an open-source framework that aid web developers in building and managing front-end applications in Java.
• YUI Library: It is a set of utilities and controls that help to build richly interactive web apps. It leverages DOM scripts, DHTML and Ajax.
• Prototype: It is another essential framework that helps developers deal with AJAX-based calls effortlessly and in a fun way.
• Axios: Axios is a simple promise-based library for the browser and node.js. Axios delivers a simple-to-use library that comes with a tiny package as an extensible interface.
• MooTools: It is a compilation of JavaScript utilities intended for beginners to expert JavaScript developers. Through this, developers can code robust and flexible scripts and coherent APIs.
• Spry: Adobe Systems developed this open-source AJAX framework. Developers leverage it for constructing Rich Internet applications.

While retrieving data, the AJAX request must use the HTTP GET request. It is because the data won't alter for a presented request URL. One should use the HTTP POST when the state requires an update on the server.

There are debugging tools that allow server-side and client-side debugging separately. For Mozilla Firefox and Google Chrome, there is a browser extension debugger called FireBug. It provides information related to AJAX calls. So, the developers using AJAX in their application would always need to include the capability to access the JavaScript runtime, inspect the browser DOM, and check the HTTP requests and responses (using XMLHttpRequest). Apart from this extension, developers can also use the "alert()" function calls inline like that of System.out.println() to perform debugging wherever necessary.

The term "Asynchronous" means that a wide variety of events can occur independently of one another using AJAX. As soon as the client-side initializes an AJAX-based callback to the server, the client won't have to wait for any response. The application will continue to use the web application while processing the request.

A common question in Ajax interview is questions; don't miss this one.

Names of some protocols used by AJAX are:

• JSON – For communication between client and server
• UED or URL encoded data
• HTTP’s GET or POST methods
• XMLHttpRequest that place a request with webserver

We cannot leverage the functionalities of AJAX if -

• The developers want to make an SEO-friendly website
• The web browser doesn't support JavaScript (although nowadays, most web browsers do)
• The user wants to create a completely secure application
• The user wants the webpage to be visible to a search engine