AJAX Interview Questions

Interview Questions

1.Define AJAX?

AJAX stands for "Asynchronous JavaScript and XML". It's basically a technique for creating Rich Internet 

Applications (RIA) that are faster as well as more interactive, using a combination of commonly used techniques as HTML/XHTML, CSS, Document Object Model (DOM), JavaScript, XML/XSLT and XMLHttpRequest object.

XMLHttpRequest object is the key basis of AJAX and makes it possible to communicate with the web server asynchronously and exchange data.

2.Please elaborate XMLHttpRequest Object further?

XMLHttpRequest is the core object in AJAX technology regardless of any implementation. XMLHttpRequest object is used to exchange data with a server seamlessly. Basically JavaScript uses this Object to exchange XML as well as text data between client and server. An AJAX implementation uses this object and communicate with server but it doesn't require the complete page to be refreshed.

3.How to send a request to server using XMLHttpRequest Object?

We can send a request to server using HTTP GET and POST methods as follows:

//Simple GET Request

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("GET", "TestFile.txt", true);

xmlHttp.send();

//Simple POST Request

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("POST", "TestFile.txt", true);

xmlHttp.send();

4.What is ASP.NET AJAX?

Microsoft provided an implementation of AJAX functionality known as ASP.NET AJAX.
As we discussed in above interview question that AJAX is a combination of various techniques, so Microsoft simplified the usage of these techniques with its own implementation. ASP.NET AJAX is a set of extensions to ASP.NET and comes with reusable AJAX controls. Using ASP.NET AJAX, we can develop applications that can update partial page instead of a complete page refresh.

5.Difference between Synchronous and Asynchronous Postback?

In Synchronous postback, complete web page is sent to server and in return rendering the output (i.e. complete page), whereas in case of Asynchronous postback, partial page goes to the server and renders only partial (required) part of the page.

6.What are the basic controls in ASP.NET AJAX?

Following controls can be considered as core AJAX controls in ASP.NET.

·         ScriptManager

·         ScriptManagerProxy

·         UpdatePanel

·         UpdateProgress

·         Timer

Later more controls are added to ASP.NET AJAX library e.g. Script Loader, Client Data Context, Client Data Access, jQuery Integration etc.

7.What is a ScriptManager in ASP.NET AJAX?

In order to use AJAX functionality on a web page, we add a ScriptManager control to the page in most of the scenarios, because ScriptManager control register AJAX library scripts to that particular web page. We can have only one ScriptManager per page.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

ScriptManager basically manages all ASP.NET AJAX resources of a web page, creates proxies for asynchronous web service call and also manages partial page updates... etc.

8.ScriptManager Vs ScriptManagerProxy?

As we understand that we can have only one ScriptManager control on a page but we can have multipleScriptManagerProxy controls.
Consider a scenario that we have ScriptManager in our MasterPage that is available for all content pages. Now, we wanted to register a web service in a particular page. So, we will not add another ScriptManager to that page instead we will add ScriptManagerProxy to it in order to avoid error.

9.What is the role of UpdatePanel in ASP.NET AJAX?

UpdatePanel is the control that facilitate the partial page rendering functionality in an ASP.NET application. As discussed earlier that using ASP.NET AJAX, we can communicate with a web server asynchronously and update a part of a page without a complete page postback. In order to apply partial page update/rendering, we can add one or more UpdatePanel controls to our ASP.NET Page as follows:

   <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

     <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <ContentTemplate>

                <asp:Label ID="lblPanel" runat="server" Text="Update Panel Added."></asp:Label><br />

                <asp:Button ID="btnTestButton" 
                                   runat="server" 
                                  OnClick="btnTestButton_Click" 
                                  Text="Test Button" />

      </ContentTemplate>

    </asp:UpdatePanel>

10.What are the limitations of AJAX?

·         AJAX on an application will not work if JavaScript is disabled.

·         In some scenarios, it exposes vulnerability.

·         It will always be difficult to bookmark application state.

·         Application behavior may be slow in some scenarios, because of different loading time of controls on a single page.

11. What are the new features included in the Microsoft AJAX library?

The Microsoft AJAX library is a client-based JavaScript library that is compatible with all modern browsers and offers a lot of functionality as compared to JavaScript. This library is released with new features and fully supports ASP.NET 4.0'. The new features included in the Microsoft AJAX library are as follows:

• Imperative syntax - Supports simple imperative syntax that is used to create and manage controls.
• Script loader - Retrieves all scripts that are needed by one or more client component or control automatically and executes the scripts in the order in which they are received.
• Client data access - Supports to access client data and display by client data control and client template.
• Client datacontext - Supports read and write permission to data from a database.
• The AdoNetDataContext class - Enables you to easily interact with an ADO.NET Data Services service.
• jQuery integration - Helps to access the elements in your Web pages, work with client-side events, enable visual effects, and make it easier to use AJAX in your applications.

12. Explain the Step property of the NumericUpDownExtender control.

The Step property sets the steps for numeric increment and decrement. The default value is 1.

13. What are the new features of ASP.NET AJAX 4.0?

ASP.NET 4.0 AJAX includes several new features that provide more functionality to a user. These features are as follows:

• Support for live data binding.
• Support for client-side template rendering.
• Support for declarative instantiation of client components.
• Support for using the observer pattern on JavaScript objects and arrays.
• Support for invoking ADO.NET data services and data contexts.
• Support for the DataView control.

14. Why do we use the UpdateProgress control in AJAX?

The UpdateProgress control is somewhat related to the UpdatePanel control. The UpdateProgress control enables you to design a user-friendly interface when a Web page consists of a number of UpdatePanel controls for partial-page rendering.

The UpdateProgress control makes you aware of the status information about the partial-page updates in theUpdatePanel control.

15. What is JSON?

JSON is an abbreviation of JavaScript Object Notation. It is a safe and reliable data interchange format in JavaScript, which is easy to understand not only for the users but also for the machines.

16. How many validation controls are available in ASP.NET AJAX 4.0?

The following validation controls are available in ASP.NET AJAX 4.0:

• FilteredTextBoxExtender - Enables you to apply filtering to a text box.
• MaskedEditExtender and MaskedEditValidator - Restricts a user to enter only a certain pattern of characters in the TextBox by applying a mask to the input.
• ValidatorCalloutExtender - Attaches to the ASP.NET validators so that the error messages are not displayed as a simple text but as a balloon-style ToolTip.
• NoBot - Prevents the spam/bot from filling the input forms automatically and uses the Completely Automated Public Turing test to tell Computers and Humans Apart (CAPTCHA), which is a type of challenge-response test to ensure that the response is not generated by the computer.
• PasswordStrengthExtender - Measures the strength of the password text entered within the text box by validating with the different strength specified parameters

17. What are the differences between AJAX and JavaScript?

The differences between AJAX and JavaScript are given as follows:

• AJAX sends request to the server and does not wait for the response. It performs other operations on the page during that time. JavaScript make a request to the server and waits for response.
• AJAX does not require the page to refresh for downloading the whole page while JavaScript manages and controls a Web page after being downloaded.
• AJAX minimizes the overload on the server since the script needs to request once while JavaScript posts a request that updates the script every time.

18. Explain the UpdatePanel control.

The UpdatePanel control specifies the portions of a Web page that can be updated together. As the UpdatePanelcontrol refreshes only a selected part of the Web page instead of refreshing the entire page with a postback, you get more flexibility to create rich and client-centric Web applications.

Refreshing a selected part of the Web page is referred as partial-page update. You can add one or more UpdatePanelcontrol in the Web page, which automatically participates in partial-page update without custom client script. TheUpdatePanel control uses the UpdatePanel class to support the partial-page rendering.

19. What does the DynamicPopulateExtender control do?

The DynamicPopulateExtender control populates the contents of a control dynamically. It enables you to send an asynchronous call to the server that dynamically populates the contents of a control. TheDynamicPopulateExtender control replaces the contents of a control with the result of a Web service or page method call.

20. What does the MinimumPrefixLength property of the AutoCompleteExtender control do?

The MinimumPrefixLength property sets the minimum number of characters that must be entered before getting suggestions from the Web service.

21. What is the importance of client-side libraries?

Client-side libraries contain built-in code to make asynchronous calls over XMLHTTP. These libraries automatically handle browser compatibility issues. These libraries are based on a programming model similar to ASP.NET

22. Describe the situations in which AJAX should not be used.

You should not use AJAX if:

• You want the page to show in a search engine, such as Google, because WebCrawler does not execute JavaScript code.
• The browser does not support JavaScript.
• You want to create a secure application.

23. What is the use of the ScriptManager control in AJAX?

·         The ScriptManager control is a core control that performs a key role in implementing the ASP.NET AJAX functionality. It helps to use JavaScript for the Microsoft AJAX Library. It should be noted that AJAX Library on a Web page can only be used if the Web page contains the ScriptManager control. This control makes use of theScriptManager class to maintain the AJAX script libraries and script files. It allows for partial page rendering, Web service calls, and use of ASP.NET AJAX Client Library by rendering the AJAX Library scripts to the browser.

24. How can you find out that an AJAX request has been completed?

·         You can find out that an AJAX request has been completed by using the readyState property. If the value of this property equals to four, it means that the request has been completed and the data is available.

25. Describe the AccordionExtender control.

·         The AccordionExtender control is similar to the CollapsiblePanelExtender control. It allows you to group multiple collapsible panels in a single control. At the same time, it also manages the collapsed and expanded state of each panel; therefore, expanding one panel at a time. In other words, the AccordionExtender control does not support expanding two or more panels simultaneously. Instead, the header templates of all the panels are always visible so that you can click on any of them to display the hidden contents. By default, the AccordionExtendercontrol opens with one panel as expanded.

Example:Call webservice from javascript

Welcome to the "Understand jQuery Ajax Function" article series. This series is targeted to novice developers that want to learn Ajax using the JQuey Ajax function. The previous example explained about calling a code-behind C# method using a jQuery Ajax function. You can read it here.

Understand jQuery Ajax function: Call code-behind C# method using jQuery Ajax method

In this article we will see how to call Web Service methods using a jQuery Ajax function. In a future article we will proceed to a WCF Service and the Web API.

Call Web Service from JQuey Ajax function

We will now call a C# Web Service method using a jQuery Ajax method. Try to understand the following code.

Step 1: Create simple web service

This is the first step, here we will create a simple web service that will be consumed by a JQuey Ajax method. So add one .asmx page to the current solution and modify the code as in the following example.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Script.Serialization;

using System.Web.Services;

namespace WebApplication

{

   

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    [System.ComponentModel.ToolboxItem(false)]

    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

    [System.Web.Script.Services.ScriptService]

    public class DataService : System.Web.Services.WebService

    {

        [WebMethod]

        public string GetData()

        {

            Dictionary<string, string> name = new Dictionary<string, string>();

            name.Add("1", "Sourav Kayal");

            name.Add("2", "Ram mishra");

            string myJsonString = (new JavaScriptSerializer()).Serialize(name);

            return myJsonString;

        }

    }

}

As in the previous article, the code is very simple . Here are two things we need to keep in mind.

Don't forget to enable the attribute:

[System.Web.Script.Services.ScriptService]

Before the class definition. The second one is to add the "[WebMethod]" attribute before the function definition. So, here we have finished our Service settings. We can run this service to test it in a Web browser. Now we will set up a jQuery Ajax function to call the service.

Step 2: Implement jQuery Ajax function

Here is sample code to call Web Service method. The only changes we made compared to the code-behind fashion (in the previous article) is the URL. Here we specified the service location of the specific C# function.

In this context there is one more point to explain. In the case of the code-behind fashion we declared the C# method as a static method, but for the Web Service, it is not necessary to define the method as a static method.
 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs"Inherits="WebApplication.JavaScript" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 <script>

     $(document).ready(function () {

         $.ajax({

             type: "POST",

             url: "DataService.asmx/GetData",

             contentType: "application/json; charset=utf-8",

             dataType: "json",

             success: function (response) {

                 var names = response.d;

                 alert(names);

             },

             failure: function (response) {

                 alert(response.d);

             }

         });

     });

 </script>

</head>

<body>

<form id="frm" method="post">

    <div id="Content">

    </div>

</form>

</body>

</html>

Here is sample output.