Interview Questions AJAX Jquery
Interview Questions AJAX Jquery
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.
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
4) What are the real web applications of AJAX currently running in the market?
Twitter
Facebook
Gmail
Javatpoint
Youtube
Synchronous request blocks the user until a response is retrieved whereas asynchronous doesn't block the user.
Synchronous Request
Asynchronous Request
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
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?
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. }
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
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.
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.
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:
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.
jQuery is used mainly to add animation effects, call functions on events, apply dynamic or static CSS, and
manipulate purposes.
Yes, all elements can be selected using jQuery using $('*') available in a DOM.
$('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.
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.
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”);
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.
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().
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.
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.
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.
15. Does jQuery work for both HTML and XML documents?
Yes, jQuery can work with both HTML and XML documents.
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.
The $() function is an alias for the jQuery() function. It is used to select elements from the DOM and perform
various operations.
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.
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.
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.
The CSS () method in jQuery is used to retrieve or set the value of a CSS property for the selected elements.
Events in jQuery are actions or occurrences in the browser, such as a user clicking a button or hovering over an
element.
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
}
jQuery.length is a property that returns the number of elements in the selected jQuery object.
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.
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.
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.
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.
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.
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.
jQuery Ajax methods are simple, offer cross-browser support, send GET and POST requests and load XML,
JSON, Scripts or HTML.
The parent() function travels only a single level in the DOM tree, whereas parents() searches through the entire
DOM tree.
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.
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.
We use $(this) to use jQuery methods, which refers to the DOM element.
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.
The .finish() method stops all queued animations and place all the elements in their final state.
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.
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.
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.
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.
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:
The code is a jQuery selector that selects multiple elements from the DOM (Document Object Model).
The code selects
59. Write a jQuery code to create and delete cookies from the browser.
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.
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".
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: