0% found this document useful (0 votes)
183 views

Interview Questions AJAX Jquery

The document discusses AJAX (Asynchronous JavaScript and XML), which allows for asynchronous data retrieval without reloading the web page. It defines AJAX, lists its advantages like quick response time and bandwidth utilization. It also discusses disadvantages like dependency on JavaScript. Real world applications using AJAX like Twitter and Facebook are provided. Technologies used by AJAX like HTML/CSS, DOM, XML, XMLHttpRequest and JavaScript are explained. Properties and methods of XMLHttpRequest like open(), send() and onreadystatechange are outlined. The role of callback functions and JSON in AJAX is described. Debugging tools and different types of postbacks are mentioned.

Uploaded by

A B Sagar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
183 views

Interview Questions AJAX Jquery

The document discusses AJAX (Asynchronous JavaScript and XML), which allows for asynchronous data retrieval without reloading the web page. It defines AJAX, lists its advantages like quick response time and bandwidth utilization. It also discusses disadvantages like dependency on JavaScript. Real world applications using AJAX like Twitter and Facebook are provided. Technologies used by AJAX like HTML/CSS, DOM, XML, XMLHttpRequest and JavaScript are explained. Properties and methods of XMLHttpRequest like open(), send() and onreadystatechange are outlined. The role of callback functions and JSON in AJAX is described. Debugging tools and different types of postbacks are mentioned.

Uploaded by

A B Sagar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

1) What is AJAX?

AJAX stands for Asynchronous JavaScript and XML. It is a group of related technologies used to display data
asynchronously. In other words, it sends and retrieves data without reloading the web page.

2) What are the advantages of AJAX?

 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.

3) What are the disadvantages of AJAX?

 Dependent on JavaScript
 Security issues
 Debugging is difficult

4) What are the real web applications of AJAX currently running in the market?

 Twitter
 Facebook
 Gmail
 Javatpoint
 Youtube

5) What are the security issues with AJAX?

 AJAX source code is readable


 Attackers can insert the script into the system

6) What is the difference between synchronous and asynchronous requests?

Synchronous request blocks the user until a response is retrieved whereas asynchronous doesn't block the user.

Synchronous Request
Asynchronous Request

7) What are the technologies used by AJAX?

 HTML/XHTML and CSS - These technologies are used for displaying content and style.
 DOM - It is used for dynamic display and interaction with data.
 XML - It is used for carrying data to and from server
 XMLHttpRequest - It is used for asynchronous communication between client and server.
 JavaScript - It is used mainly for client-side validation

8) What is the purpose of XMLHttpRequest?

 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.
9) What are the properties of XMLHttpRequest?

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.

10) What are the important methods of XMLHttpRequest?

 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.

11) What are the types of open() method used for XMLHttpRequest?

 open(method, URL) - It opens the request specifying get or post method and URL.
 open(method, URL, async) - It is same as above but specifies asynchronous or not.
 open(method, URL, async, username, password) - It is same as above but specifies the username and
password.

12) What are the types of send() method used for XMLHttpRequest?

 send() - It sends get request


 send(string) - It sends post request.

13) What is the role of the callback function in AJAX?

The callback function passes a function as a parameter to another function. If we have to perform various AJAX
tasks on a website, then we can create one function for executing XMLHttpRequest and a callback function to
execute each AJAX task.
14) What is JSON in AJAX?

JSON stands for JavaScript Object Notation. In AJAX, it is used to exchange data between a browser and a
server. It is easy to understand, and data exchange is faster than XML. It supports array, object, string, number,
and values.

1. request.onreadystatechange = function(){
2. if (request.readyState == 4 )
3. {
4. var jsonObj = JSON.parse(request.responseText);//JSON.parse() returns JSON object
5. document.getElementById("date").innerHTML = jsonObj.date;
6. document.getElementById("time").innerHTML = jsonObj.time;
7. }
8. }

15) What are the tools for debugging AJAX applications?

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
16) What are the types of post back in AJAX?

There are two types of post back in AJAX.

 Synchronous Postback - It blocks the client until the operation completes.

 Asynchronous Postback - It doesn?t block the client.

17) What are the different ready states of a request in AJAX?

There are 5 ready states of a request in AJAX.

 0 means UNOPENED
 1 means OPENED
 2 means HEADERS_RECEIVED
 3 means LOADING
 4 means DONE
18) What are the common AJAX frameworks?

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

19) How can you test the AJAX code?

JUnit is the open source unit testing framework for client-side JavaScript. It is required to create test cases. The
unit test case is a code which ensures that the program logic works as expected.

20) What is the difference between JavaScript and AJAX?

JavaScript is an object-based scripting AJAX is a group of inter-related technologies like JavaScript, XML,
language. HTML, CSS etc
It requests the server and waits for the
It sends a request to the server and doesn't wait for the response.
response.
It consumes more bandwidth as it reloads
It doesn't reload the page so consumes less bandwidth.
the page.

One of the most popular libraries of JavaScript is jQuery. It is a tiny library for web development that provides
an exciting web experience. In this article, wewe have collected a set of frequently asked jQuery interview
questions to get you familiar with the interviews' topics. If you are looking to learn JavaScript, read about its
learning path here.

What is JQuery?

JQuery is a fast, small, and feature-rich JavaScript library. It simplifies things like HTML document traversal
and manipulation, event handling, and animation with an easy-to-use API that works across many browsers.
With versatility and extensibility, jQuery has changed how millions of people write JavaScript.

What is JQuery Used For?

jQuery is mainly used for DOM (Document Object Model) manipulation, which allows you to modify a web
page's structure, style, and content. Some of the common things that jQuery is used for include:

 Selecting and manipulating HTML elements


 Traversing and modifying the DOM tree
 Handling events such as clicks, mouseover, and keypress
 Creating animations and effects such as fading, sliding, and hiding elements
 Making AJAX requests to retrieve data from a server without reloading the page
 Creating plugins to extend the functionality of jQuery
Because of its ease of use, jQuery has become one of the most popular JavaScript libraries and is widely used in
developing web applications and websites.

1. Why is jQuery known as a feature-rich library?

This is because jQuery has several features such as easy DOM manipulation, event handling, built-in
animations, cross-browser compatibility, supports CSS3, and is lightweight.

2. In what scenarios jQuery can be used?

jQuery is used mainly to add animation effects, call functions on events, apply dynamic or static CSS, and
manipulate purposes.

3. Can you select all elements using jQuery? How?

Yes, all elements can be selected using jQuery using $('*') available in a DOM.

4. What are different selectors in jQuery used for?

There following selectors in jQuery is used as:

$('div') is used for selection all div tags in the document, $('#TextId') is used for selecting elements whose ID is
TextId and $('.myclass') is used for selecting all elements whose class is .myclass.

5. What is the purpose of jQuery AJAX?

AJAX stands for Asynchronous JavaScript and XML. It helps in loading and exchanging data without a
browser page refresh and only via server. jQuery provides a rich set of AJAX methods to develop web
applications.

6. How to deal with cookies in jQuery?

Dough cookie plugin can be used to deal with cookies in jQuery. It has powerful features and is easy to use. For
example: $.dough(“cookie_name”, “cookie_value”);

can be used to create a cookie.

7. Popularly asked jQuery interview questions are how to get the text contents and set the text
contents of an element using jQuery?

Text () method is used to get combined text contents of all matched elements, and text(Val) is used to set those
text contents.

8. How is css(‘width’) different from width() in jQuery?

These two are different methods available in jQuery to change the width of an element. The difference is that in
CSS('width'), we have to add px in the width value while this is not required in width().

9. Does Bootstrap require jQuery?


jQuery is used for JavaScript plugins by Bootstrap. However, if we use the CSS part of Bootstrap, jQuery is not
needed.

10. How can you include jQuery on a page?

jQuery can be included in a page inside the script tag, remote copy of Ajax API and jQuery.com, embedder
script using client script object and a local copy of script manager control.

11. What are the advantages of jQuery?

 jQuery is easy to use and understand, even for people with limited programming experience.
 It simplifies common JavaScript tasks, such as traversing the Document Object Model (DOM), handling events,
and creating animations.
 jQuery is cross-browser compatible, which works well in most major web browsers.

12. How is jQuery different from other javascript frameworks?

jQuery is a JavaScript library, while other JavaScript frameworks, such as AngularJS and React, are JavaScript
frameworks. The main difference between the two is that a library is a collection of pre-written code that you
can use to perform specific tasks, while a framework is a structure in which you build your code on top.

13. List some features of jQuery.

 DOM manipulation and traversal


 Event handling
 Effects and animations
 AJAX support
 Cross-browser compatibility
 Support for plugins and extensions

14. Is jQuery a JavaScript or JSON library file?

jQuery is a JavaScript library file.

15. Does jQuery work for both HTML and XML documents?

Yes, jQuery can work with both HTML and XML documents.

16. What is jQuery Mobile?

jQuery Mobile is a JavaScript framework that allows you to create mobile web applications with a consistent
look and feel across different platforms and devices. It is based on the jQuery library and provides a set of UI
widgets and tools for building mobile-friendly web pages and applications.

17. What is the $() function in the jQuery library?

The $() function is an alias for the jQuery() function. It is used to select elements from the DOM and perform
various operations.

18. Explain $(document).ready() function?


This function is used to ensure that the DOM is fully loaded before any jQuery code is executed. This function
takes a function as an argument, and the function passed to it will be executed when the DOM is ready. This is
useful for ensuring that elements on the page are available before interacting with them.

19. What is the exact difference between the methods onload() and document? ready()?

The onload() method is JavaScript when the page finishes loading. The document. a Ready () method is a
jQuery method called when the DOM is ready. The main difference is that onload() waits for all assets on the
page to be loaded, including images and other external resources, during the document. Ready () only remains
for the DOM to be prepared.

20. Describe jQuery Connect in brief. Also, list its uses.

jQuery Connect is a plugin for jQuery that allows you to connect to other web pages and services using AJAX.
It can be used to retrieve data from other websites, for example, to display information from another site on
your site or to post data to another place.

21. What are the jQuery functions used to provide effects?

jQuery provides several functions for creating effects, such as hide(), show(), slideUp(), slideDown(), fadeIn(),
and fadeOut(). These functions can create animations and visual effects on elements in the DOM.

22. What is the use of the CSS () method in jQuery?

The CSS () method in jQuery is used to retrieve or set the value of a CSS property for the selected elements.

23. Which jquery method is used to hide selected elements?

The hide() method in jQuery is used to hide selected elements.

24. What are events in jQuery?

Events in jQuery are actions or occurrences in the browser, such as a user clicking a button or hovering over an
element.

25. How to iterate/loop through all p elements in jquery.

To iterate/loop through all p elements in jQuery, you can use the each() method like so:

var paragraphs = $("p"); for(var i = 0; i < paragraphs.length; i++) { var p = paragraphs[i]; // code to be executed
}

26. What is the significance of jQuery.length?

jQuery.length is a property that returns the number of elements in the selected jQuery object.

27. What is jQuery click event?

The click event in jQuery is triggered when a user clicks on an element. It can perform a specific action when
an element is clicked.
28. What is the purpose of JQuery's delay() method? Can you use this for different types of
browsers like (Internet Explorer)?

The delay() method in jQuery is used to delay the execution of an animation or a function for a specified time. It
can be used in different types of browsers, including Internet Explorer.

29. Can you explain about ajaxStart() functions?

The ajaxStart() function in jQuery is a method triggered when an AJAX request is sent. It can perform a specific
action when an AJAX request is sent, such as displaying a loading message.

30. Can you explain the ajaxComplete() function?

The ajaxComplete() function in jQuery is a method that is triggered when an AJAX request is completed. It can
perform a specific action when an AJAX request is completed, such as hiding a loading message.

31. Can you say something about jQuery each() method?

Each () method in jQuery is used to iterate through a set of elements and perform a specific action on each
element. It can loop through a set of elements and perform a specific action on each element.

32. What is the difference between javascript and jquery?

JavaScript is a programming language that can add interactivity and other dynamic features to websites. jQuery
is a library built on top of JavaScript that makes it easier to work with the Document Object Model (DOM) and
perform common tasks such as event handling and animation.

33. What is the difference between the $(window).load and $(document)? Ready functions in
jQuery?

The $(window).load function is triggered when all assets, including images, have finished loading on the page.
The $(document).ready function is activated when the DOM (Document Object Model) is fully loaded and
ready for manipulation. The $(document).ready function is generally used to initialize scripts, while the
$(window).

34. What exactly is a jQuery Data Table plugin? Also, explain the uses with examples.

A jQuery Data Table plugin is a tool that allows for easy manipulation and organization of data in a table
format. This can include sorting, searching, pagination, and other features. For example, a website displaying a
large amount of data in a table format could use a jQuery Data Table plugin to allow users to sort and search
through the data easily.

35. What is the purpose of JQuery's serialize() method?

The jQuery serialize() method converts form data into a string format that can be easily sent to a server via an
AJAX request.

36. Explain how CSS classes can be manipulated in HTML using jQuery.
jQuery allows for the manipulation of CSS classes in HTML through the use of the addClass(), removeClass(),
and toggleClass() methods. The addClass() method is used to add a CSS class to an HTML element, while the
removeClass() method is used to remove a CSS class from an HTML element.

37. State some different types of jQuery methods.

Some different types of jQuery methods include:

 Event methods: such as click(), hover(), and focus()


 Traversing methods: such as children(), parent(), and siblings()
 DOM manipulation methods: such as append(), prepend(), and replaceWith()
 CSS manipulation methods: such as addClass(), removeClass(), and CSS()
 Animation methods: such as animate(), fadeIn(), and slideUp().

38. Why are Ajax methods preferred in jQuery?

jQuery Ajax methods are simple, offer cross-browser support, send GET and POST requests and load XML,
JSON, Scripts or HTML.

39. How is parent() method in jQuery different from parents() method?

The parent() function travels only a single level in the DOM tree, whereas parents() searches through the entire
DOM tree.

40. What is jquery.min.js?

It is a compressed version of jquery.js as shorter variable names are used to preserve bandwidth. It functions
precisely similar to jquery.js. The compressed version is used to increase the efficiency of web pages.

41. What is a content distribution network?

A content distribution network or CDN is an extensive distributed system of servers deployed across the
Internet. Its primary objective is to offer highly available as well as high-performance content to end-users.

42. Ajax functions are generally asked as a part of jQuery interview questions. List some of
them.

1. .ajaxStop()- when all requests are complete, this registers the handler to be called.
2. .ajaxStart()- when the first Ajax request begins, this registers the handler to be called.
3. .ajaxSuccess()- when an ajax request is completed, this registers the handler to be called.

43. If you want to check if an element is empty or not, which methods can be used?

We can use the '.empt' selector or '$.trim()' function to check if an element is empty.

44. How is 'this' different from '$(this)' in jQuery?

We use $(this) to use jQuery methods, which refers to the DOM element.

45. What is a prop() in jQuery? How is it different from Attr()?


The prop() method is used to obtain the value of the first element property, and Attr() is used to extract the
value of the first element's attribute.

46. What is the advantage of method chaining in jQuery?

Multiple jQuery commands on a particular element can be executed in one go with chaining. It helps in
implementing various actions on an element rather than one after the other.

47. Tell something about the finish method in jQuery.

The .finish() method stops all queued animations and place all the elements in their final state.

48. Explain the operation of the jQuery connect() method.

The jQuery connect() method creates a connection to a remote server using the WebSockets protocol. It allows
for real-time communication between the client and server, enabling the ability to push data from the server to
the client in real-time.

49. Distinguish between jquery.min.js and jquery.js.

jquery.min.js is a minified version of the jQuery library, which has been compressed to reduce its file size.

50. Explain the benefits of using a CDN for the jQuery files.

Using a Content Delivery Network (CDN) for the jQuery files can provide several benefits, such as faster load
times for users, as the files are served from a location closer to the user's location.

51. Can you describe the various methods for extracting a query text using regular
expressions?

There are several methods for extracting a query text using regular expressions, such as using the match() or
exec() methods to search for a specific pattern in a string or using the search() method to find the index of the
first occurrence of a particular pattern in a string.

52. Explain the use of the event.preventDefault() method.

The event.preventDefault() method is used to prevent the default action of an event from occurring.

53. What are the benefits of Using jQquery instead of javascript in an ASP.NET web
application?

Some benefits of using jQuery instead of JavaScript in an ASP.NET web application include built-in cross-
browser compatibility support, a large library of pre-built functions, and a simpler and more consistent syntax.

54. What is event.stopPropagation()?

The event.stopPropagation() method stops an event from propagating to parent elements.

55. Is it possible to pause or postpone the execution of the document.ready for a period of
time?
Yes, it is possible to pause or postpone the execution of the document—ready event for a period of time by
using the setTimeout() function. The setTimeout() function takes two arguments: a function to execute and a
time delay in milliseconds.

You can also use the setTimeout() function to wrap the entire document. Ready event to delay its execution.

For example:

56. Would you still favor jQuery in a case when things can be done simply using javascript?

Whether to favor jQuery or JavaScript depends on the developer's specific use case and skillset. jQuery can
simplify complex tasks and provide cross-browser compatibility, but in some cases, it may be simpler and more
efficient to use plain JavaScript.

57. How to perform jQuery AJAX requests?

jQuery provides several methods for performing AJAX requests, the most commonly used one being the
$.ajax() method. This method allows you to send HTTP requests to a server and handle the response without
having to refresh the entire page.

Here's an example of how to use the $.ajax() method to make a GET request to a server:

58. What does the following code do?

$( "div#firstDiv, div.firstDiv, ol#items > [name$='firstDiv']" )

The code is a jQuery selector that selects multiple elements from the DOM (Document Object Model).
The code selects

 the first div element with an id of "firstDiv"


 all div elements with a class of "firstDiv"
 all elements with a name attribute that ends with "firstDiv" and are children of an ol element with an id of
"items".

59. Write a jQuery code to create and delete cookies from the browser.

Here is an example of how to create a cookie using jQuery:

To delete a cookie, you can set its expiration date to a past date:

60. Can you explain the difference between jQuery.get() and jQuery.ajax()?

Both methods allow you to send an HTTP request to a server and handle the response, but they have some key
differences:

 $.get() is a shorthand method for performing a GET request using $.ajax(). It is a simpler method and is used for
quick and simple requests, such as retrieving data from a server. The basic syntax for $.get() is $.get(url, data,
callback).
 $.ajax() is a more powerful and flexible method for performing AJAX requests. It can be used to perform any
type of HTTP request (GET, POST, PUT, etc.). Here's an example of how to use $.get() and $.ajax() to make a GET
request to a server:

61. Write a code snippet for preventing the default behavior of the submit button for
performing another event.
Code snippet that demonstrates how to prevent the default behavior of a submit button and perform another
event using jQuery:

It's also possible to prevent the default behavior of the submit button by returning false from the submit event
handler:

62. Which of the two lines of code below is more efficient and why?

document.getElementById("interviewBit"); OR $("#interviewBit");

The first line of code uses the native JavaScript method document.getElementById(), which is considered to be
more efficient than the jQuery method $() because it is a native JavaScript method and it doesn't have to go
through the additional layers of abstraction that jQuery uses.

The second line of code uses the jQuery method $() which is a shorthand for jQuery(). The $() function is a
wrapper for the jQuery() function, which is used to perform DOM manipulation, event handling, and animation.
jQuery uses document.getElementById() internally to get the element, but it also adds the overhead of the
jQuery library and its additional layers of abstraction.

63. How do you disable elements in Jquery Using "attr"?

To disable an element using jQuery's attr() method, you can set the "disabled" attribute to "true" on the element.
Here's an example of how to disable a button element with the ID "myButton":

64. Can you write a jQuery code selector that needs to be used for querying all elements
whose ID ends with string “IB”?

The jQuery code selector that can be used to query all elements whose ID ends with string “IB” is:
$("[id$='IB']")

This selector selects all elements that have an ID attribute that ends with "IB".

65. Explain the .promise() method in jQuery.


The .promise() method in jQuery is used to return a promise that is resolved when all of the elements in the set
have completed a specific action. For example, when all animations on the set of elements have completed. The
returned promise object can be used to attach callbacks that will be executed when the promise is fulfilled or
rejected.

66. Write a jQquery code snippet to sort a string array?

Here's an example of how to sort a string array using jQuery:

67. Can you provide an example of chaining using a code snippet?

Chaining is a technique in jQuery that allows you to perform multiple actions on a set of elements using a single
line of code. Here's an example of how to use chaining to fade out an element, change its text, and then fade it
back in:

You might also like