Ajax Interview Questions
Ajax
Ajax is a group of interrelated web development methods used on the client-side to create interactive web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data are usually retrieved using the XMLHttpRequest object
XMLHttpRequest (XHR): is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script. The data might be received from the server as XML text or as plain text. Data from the response can be used directly to alter the DOM of the currently active document in the browser window without loading a new web page document. The response data can also be evaluated by client-side scripting
XMLHttpRequest its standard object for safari and others and its ActiveXObject for IE
XMLHttpRequest provides two methods:
1. Open: create a connection.
2. Send: send a request to the server.
Data furnished by the server will be found in the attributes of the XMLHttpRequest object:
1. responseXml for an XML file or
2. responseText for a plain text.
How it works:
new ActiveXObject (Microsoft.XMLHTTP)
This constructor is for Internet Explorer.
new XMLHttpRequest ()
This constructor is for any other browser including Firefox.
http.onreadystatechange
An anonymous function is assigned to the event indicator.
http.readyState == 4
The 4 state means for the response is ready and sent by the server.
http.status == 200
This status means ok, otherwise some error code is returned, 404 for example.
http.open (“POST”, “data.xml”, true);
POST or GET
URL of the script to execute.
true for asynchronous (false for synchronous).
JSON (JavaScript Object Notation): is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects. Despite its relationship to JavaScript, it is language-independent, with parsers available for most languages.
Asynchronous and Synchronous: Synchronous – Script stops and waits for the server to send back a reply before continuing. There are some situations where Synchronous Ajax is mandatory.
In standard Web applications, the interaction between the customer and the server is synchronous. This means that one has to happen after the other. If a customer clicks a link, the request is sent to the server, which then sends the results back.
Because of the danger of a request getting lost and hanging the browser, synchronous JavaScript isn’t recommended for anything outside of (on before)unload event handlers, but if you need to hear back from the server before you can allow the user to navigate away from the page, synchronous JavaScript isn’t just your best option.
Asynchronous – Where the script allows the page to continue to be processed and will handle the reply if and when it arrives. If anything goes wrong in the request and/or transfer of the file, your program still has the ability to recognize the problem and recover from it.
Processing asynchronously avoids the delay while the retrieval from the server is taking place because your visitor can continue to interact with the web page and the requested information will be processed with the response updating the page as and when it arrives.
Different states of Ajax:
0. Initialized
1. loading
2. loaded
3. Some interactive with the server (Complete Data not available)
4. Complete
JQuery: is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. JQuery emphasizes the interaction between JavaScript and HTML. JQuery contains all the common DOM, event, effects, and Ajax functions in a single JavaScript file. Advantages of JQuery Ability to keep the code simple, clear, readable and reusable.
1. How do you select an item using css class or ID and get the value by use of JQuery?
$(‘#MyId’).val () for ID and for class $(‘.My Class’).val () and for value
2. Disable/enable an element in JQuery?
// Disable #x
$(“#x”).attr (“disabled”, “disabled”);
// Enable #x
$(“#x”).removeAttr (“disabled”);
3. What do Dollar ($) sign significance in jQuery?
Dollar Sign is nonetheless an alias for JQuery. You can write jQuery syntax using $ sign or jQuery.
This can also be called Selector ($).
This can be called as an object for identifying target elements on a page that allows easily identifying and also grabbing
Elements required.
To collect a group of elements, we use the simple syntax $(selector) or jQuery (selector).
4. Does document.ready () function similar to onload ()? (or) Explain the importance of document.ready ()? (or) Why jQuery script is faster?
JavaScript Operations on the page elements are performed outside of the Document Markup (DOM) that creates them. This is because of waiting until DOM elements of the page are fully loaded before those operations execute. The onload handler for the window object is used for this purpose, executing statements after the entire page is fully loaded.
Browser delays calling onload till DOM tree is created and then all images/other external resources are fully loaded.
JQuery waits until DOM tree is ready before executing scripts. JQuery uses this approach using Document.Ready. This makes running scripts fast. JQuery triggers execution of code once the DOM tree is loaded, but not external image resources has loaded. Hence script execution need not wait till the page is loaded. The code execution happens before page is loaded hence jQuery code is faster. We can use this technique multiple times within the same HTML document.
To summarize the differences
This is a jQuery plugin that is used to bind a function to another function. It is more of assigning a handler for another function. Connect is used to execute a function whenever a function from another object or plugin is executed. We can connect to an event of a DOM element too using this function. In the sense same connect function can be used for both DOM elements and for the functions.
6. What are jQuery Selectors? Explain them?
$ can also be called as jQuery selector. Selectors are the most important part of the jQuery; we can say that heart of jQuery.
$(Selector Expression)
Or
JQuery (Selector Expression)
7. What is the significance of jQuery.NoConflict?
If we are referring any other script or JavaScript libraries files along with jQuery you may get conflicts in the namespace. Sometimes if we use jQuery with any other libraries, we may get clash between two libraries and we encounter situations like neither of the functionality works. Important thing to keep in mind is, when we call .noConflict () jQuery will return $() to its previous owner .So we need to use jQuery () instead of $() function.
8. Five function in jQuery?
Ajax is a group of interrelated web development methods used on the client-side to create interactive web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data are usually retrieved using the XMLHttpRequest object
XMLHttpRequest (XHR): is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script. The data might be received from the server as XML text or as plain text. Data from the response can be used directly to alter the DOM of the currently active document in the browser window without loading a new web page document. The response data can also be evaluated by client-side scripting
XMLHttpRequest its standard object for safari and others and its ActiveXObject for IE
XMLHttpRequest provides two methods:
1. Open: create a connection.
2. Send: send a request to the server.
Data furnished by the server will be found in the attributes of the XMLHttpRequest object:
1. responseXml for an XML file or
2. responseText for a plain text.
How it works:
new ActiveXObject (Microsoft.XMLHTTP)
This constructor is for Internet Explorer.
new XMLHttpRequest ()
This constructor is for any other browser including Firefox.
http.onreadystatechange
An anonymous function is assigned to the event indicator.
http.readyState == 4
The 4 state means for the response is ready and sent by the server.
http.status == 200
This status means ok, otherwise some error code is returned, 404 for example.
http.open (“POST”, “data.xml”, true);
POST or GET
URL of the script to execute.
true for asynchronous (false for synchronous).
JSON (JavaScript Object Notation): is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects. Despite its relationship to JavaScript, it is language-independent, with parsers available for most languages.
Asynchronous and Synchronous: Synchronous – Script stops and waits for the server to send back a reply before continuing. There are some situations where Synchronous Ajax is mandatory.
In standard Web applications, the interaction between the customer and the server is synchronous. This means that one has to happen after the other. If a customer clicks a link, the request is sent to the server, which then sends the results back.
Because of the danger of a request getting lost and hanging the browser, synchronous JavaScript isn’t recommended for anything outside of (on before)unload event handlers, but if you need to hear back from the server before you can allow the user to navigate away from the page, synchronous JavaScript isn’t just your best option.
Asynchronous – Where the script allows the page to continue to be processed and will handle the reply if and when it arrives. If anything goes wrong in the request and/or transfer of the file, your program still has the ability to recognize the problem and recover from it.
Processing asynchronously avoids the delay while the retrieval from the server is taking place because your visitor can continue to interact with the web page and the requested information will be processed with the response updating the page as and when it arrives.
Different states of Ajax:
0. Initialized
1. loading
2. loaded
3. Some interactive with the server (Complete Data not available)
4. Complete
JQuery: is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. JQuery emphasizes the interaction between JavaScript and HTML. JQuery contains all the common DOM, event, effects, and Ajax functions in a single JavaScript file. Advantages of JQuery Ability to keep the code simple, clear, readable and reusable.
1. How do you select an item using css class or ID and get the value by use of JQuery?
$(‘#MyId’).val () for ID and for class $(‘.My Class’).val () and for value
2. Disable/enable an element in JQuery?
// Disable #x
$(“#x”).attr (“disabled”, “disabled”);
// Enable #x
$(“#x”).removeAttr (“disabled”);
3. What do Dollar ($) sign significance in jQuery?
Dollar Sign is nonetheless an alias for JQuery. You can write jQuery syntax using $ sign or jQuery.
This can also be called Selector ($).
This can be called as an object for identifying target elements on a page that allows easily identifying and also grabbing
Elements required.
To collect a group of elements, we use the simple syntax $(selector) or jQuery (selector).
4. Does document.ready () function similar to onload ()? (or) Explain the importance of document.ready ()? (or) Why jQuery script is faster?
JavaScript Operations on the page elements are performed outside of the Document Markup (DOM) that creates them. This is because of waiting until DOM elements of the page are fully loaded before those operations execute. The onload handler for the window object is used for this purpose, executing statements after the entire page is fully loaded.
Browser delays calling onload till DOM tree is created and then all images/other external resources are fully loaded.
JQuery waits until DOM tree is ready before executing scripts. JQuery uses this approach using Document.Ready. This makes running scripts fast. JQuery triggers execution of code once the DOM tree is loaded, but not external image resources has loaded. Hence script execution need not wait till the page is loaded. The code execution happens before page is loaded hence jQuery code is faster. We can use this technique multiple times within the same HTML document.
To summarize the differences
- First of all Document.ready() function is called as soon as DOM is loaded but body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.
- We can have as many document.ready () functions in a page but onload function is limited on one time.
This is a jQuery plugin that is used to bind a function to another function. It is more of assigning a handler for another function. Connect is used to execute a function whenever a function from another object or plugin is executed. We can connect to an event of a DOM element too using this function. In the sense same connect function can be used for both DOM elements and for the functions.
6. What are jQuery Selectors? Explain them?
$ can also be called as jQuery selector. Selectors are the most important part of the jQuery; we can say that heart of jQuery.
- We can select single (using id selectors) or multiple elements using class or element selectors
- Selectors find DOM Elements to manipulate based on CSS Selector syntax
- Selectors can find the elements by ID, class, Element Name and hierarchical positioning
- Selectors can return sequence of DOM elements, and we can use methods or logic on every matched element.
$(Selector Expression)
Or
JQuery (Selector Expression)
7. What is the significance of jQuery.NoConflict?
If we are referring any other script or JavaScript libraries files along with jQuery you may get conflicts in the namespace. Sometimes if we use jQuery with any other libraries, we may get clash between two libraries and we encounter situations like neither of the functionality works. Important thing to keep in mind is, when we call .noConflict () jQuery will return $() to its previous owner .So we need to use jQuery () instead of $() function.
8. Five function in jQuery?
- html() -> to fill the value in Innerhtml
- val() -> to get the value of an element
- $ajax -> Perform an asynchronous HTTP (Ajax) request
- append() -> to concatenate element
- css () -> to add css to a particular element
- load() -> to load a file in to an innerhtml