Top Ajax Interview Questions and Answer

Ajax is abbreviated as Asynchronous Javascript and XML. It is new technique used to create better, faster and more interactive web systems or applications. Ajax uses asynchronous data transfer between the Browser and the web server.

This technique is used to make internet faster and user friendly. It is not a programming language.

AJAX involves different technologies such as HTML (and XHTML), CSS (for presentation layer), JSON, XML or XSLT (for data exchange between a web server and client), JavaScript and other APIs for asynchronous communication. AJAX is used for creating dynamic web pages. Examples of the websites that use AJAX are Google, Gmail, YouTube, Facebook etc. AJAX is a standard based on Internet Standards to comply with all the browsers and networks across the globe.

• Quick Response
• Bandwidth utilization
• The user is not blocked until data is retrieved from the server.
• It allows us to send only important data to the server.
• It makes the application interactive and faster.

• Dependent on JavaScript
• Security issues
• Debugging is difficult

• AJAX source code is readable
• Attackers can insert the script into the system

In a Synchronous request, the request sent from the client receives the response in the same HTTP connection. Examples being responses from Internet gateway, phone calls, and video meetings.

Whereas for Asynchronous requests, multiple requests can be sent from clients and their responses can be received in subsequent connections. Examples are collaborative documents like assessments, online queries, emails, and online forums.

Ajax with XMLHttpRequest object communicates with a server, renders data on a portion of a webpage without page reload.

List of steps that take place while working at Ajax are:

    The user request is sent to the server from the browser.
    JavaScript calls XMLHttpRequest object.
    The server interacts with the database using ASP.Net, JSP, or PHP.
    Data is fetched.
    XMLHttpRequest callback receives XML or JSON data from server.
    The browser displays HTML and CSS data on a particular portion of the page without page reload.

 

• It sends data in the background to the server.
• It requests data from the server.
• It receives data from the server.
• It updates data without reloading the page.

The important properties of the XMLHttpRequest object are given below.

• onReadyStateChange – It is called whenever readystate attribute changes.
• readyState – It represents the state of the request.
• responseText – It returns response as text.
• responseXML – It returns response as XML.
• status – It returns the status number of a request.
• statusText – It returns the details of status.

• abort() – It is used to cancel the current request.
• getAllResponseHeaders() – It returns the header details.
• getResponseHeader() – It returns the specific header details.
• open() – It is used to open the request.
• send() – It is used to send the request.
• setRequestHeader() – It adds request header.

• send() - It sends get request
• send(string) - It sends post request.

• HTTP’s GET or POST
• XMLHttpRequest for placing a request with the web server
• Uses JSON to communicate between the client and server
• UED or URL encoded data

There are several tools for debugging AJAX applications.

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

In order to improve the performance of Ajax call, we can consider the following steps:

• Limiting Ajax requests to a minimum
• A wise selection of events that triggers Ajax request
• Optimum use of GET request
• Minimize data amount transmission
• Use Caching to secure data

• Dojo Toolkit
• YUI
• Google Web Toolkit (GWT)
• Spry
• MooTools
• Prototype

Update panel is a server control used to update the specified portion of a web page. Script Manager needs to be used whenever update panel is used. Using update panel, user cannot handle outside controls.

The update panel consists of two types of triggers. The PostBackTrigger is used as a full postback and it does not function in an asynchronous manner. The second type of trigger is AsyncPostBacktrigger, which is responsible for partial postback in an asynchronous way.

XmlHttpRequest object is used for Ajax requests.