1. What is the difference between JavaScript and AJAX ?
JavaScript is most commonly used as a client side scripting language. This means that JavaScript code is written into an HTML page. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it’s up to the browser to do something with it.
AJAX is “Asynchronous Java Script and XML”.Mainly used if we need to refresh a part of a HTML page but not the total page.For example take an example of Country/State.I have a Country list box in my page and when i select a specific country the corresponding states should be populated in the States list box in the same page.In this situation we can uset the “AJAX” to send the request on back end to get the States list.
As we are sending the request in back end and we are not waiting for the response(after sending the request you can continue with another operations on the page) we can say it as Asynchronous call.Using Java Script( onChange event of the country box) we will send the request(using the XMLHTTPRequest object) to any back end process to handle the request and then the response we will get as an XML, using DOM we will parse the XML and populate the data whatever we want.
2. Explain AJAX? How it is implemented.
AJAX, stands for Asynchronous JavaScript and XML, is a technology that explores the browsers features to perform asynchronous requests programatically.
AJAX can be used to build more interactive web pages and increase the user experience. AJAX enables web pages to access new data from server side, without refresh its previous content, reducing the amount of data transfered from server side on each client side request.
AJAX is based in the combined use of some technologies, which there are in web scene since many time:
- ECMAScript language, usually JavaScript, used in AJAX to execute the requests. These requests are based on a special client side interface able to perform asynchronous requests, usually the W3C XMLHttpRequest interface.
- XSLT (Extended Style Sheet Tranformation) optionally used in AJAX to transform responses in a data centrict format (ex: SOAP), to a document centric format (ex: XHTML).
- DOM (Document Object Model) used in AJAX to access web page object’s tree and apply the response to it.
- Also XHTML, CSS, DHTML used in AJAX to present the web pages, at the same way we have been doing..
3. Can you call a Java Method from JavaScript ?
Direct Web Remoting is an open source Java library which allows for easy integration of AJAX into your web site. It allows you to call Java methods directly from Javascript. Some other frame works also have its own implementatioin of this feature.
4. You made a request to server using AJAX. In which format do you receive the data from the Server ?
Once the AJAX request is successfully fired, will get the response either in HTML,XML or JSON(Java Script Object Notation).
HTML response
<div class=”book”>
<h3>JavaScript, the Definitive Guide</h3>
<p class=”moreInfo”>By David Flanagan, O’Reilly</p>
<img src=”/images/cover_defguide.jpg” />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
In the JavaScript responseText will be added as below.
document.getElementById(‘writeroot’).innerHTML = req.responseText;
XML response
<books>
<book>
<title>JavaScript, the Definitive Guide</title>
<publisher>O’Reilly</publisher>
<author>David Flanagan</author>
<cover src=”/images/cover_defguide.jpg” />
<blurb>Lorem ipsum dolor sit amet, consectetuer .</blurb>
</book>
</books>
JavaScript will handle the above XML response as below
var books = req.responseXML.getElementsByTagName(‘book’);
for (var i=0;i<books.length;i++){
var x = document.createElement(‘div’);
x.className = ‘book’;
var y = document.createElement(‘h3’);
y.appendChild(document.createTextNode(getNodeValue(books[i],’title’)));
x.appendChild(y);
var z = document.createElement(‘p’);
z.className = ‘moreInfo’;
z.appendChild(document.createTextNode(‘By ‘ + getNodeValue(books[i],’author’) + ‘, ‘ + getNodeValue(books[i],’publisher’)));
x.appendChild(z);
var a = document.createElement(‘img’);
a.src = books[i].getElementsByTagName(‘cover’)[0].getAttribute(‘src’);
x.appendChild(a);
var b = document.createElement(‘p’);
b.appendChild(document.createTextNode(getNodeValue(books[i],’blurb’)));
x.appendChild(b);
document.getElementById(‘writeroot’).appendChild(x);
}
JSON Response
JSON means JavaScript Object Notation. Server deliver a bit of text (String,) whic can be interpreted as a JavaScript object.
Once it has arrived we use the eval() method to convert the string into real Javascript object.
{“books”:[{“book”:
{
“title”:”JavaScript, the Definitive Guide”,
“publisher”:”O’Reilly”,
“author”:”David Flanagan”,
“cover”:”/images/cover_defguide.jpg”,
“blurb”:”Lorem ipsum dolor sit amet, consectetuer adipiscing elit.”
}
}]}
JavaScript will handle the above JSON response as below
var data = eval(‘(‘ + req.responseText + ‘)’);
for (var i=0;i<data.books.length;i++){
var x = document.createElement(‘div’);
x.className = ‘book’;
var y = document.createElement(‘h3’);
y.appendChild(document.createTextNode(data.books[i].book.title));
x.appendChild(y);
var z = document.createElement(‘p’);
z.className = ‘moreInfo’;
z.appendChild(document.createTextNode(‘By ‘ + data.books[i].book.author + ‘, ‘ + data.books[i].book.publisher));
x.appendChild(z);
var a = document.createElement(‘img’);
a.src = data.books[i].book.cover;
x.appendChild(a);
var b = document.createElement(‘p’);
b.appendChild(document.createTextNode(data.books[i].book.blurb));
x.appendChild(b);
document.getElementById(‘writeroot’).appendChild(x);
}
5. Is AJAX is a browser compatible ?
Not totally. Most browsers offer a native XMLHttpRequest JavaScript object, while another one (Internet Explorer) require you to get it as an ActiveX object. Once you have the object, you’re out of the realm of browser differences.
Internet Explorer 5.5 and up, Opera 7.6 and up, Netscape 7.1 and up, Firefox 1.0 and up, Safari 1.2 and up, among others will support AJAX.
6. What is the XMLHttpRequest object ?
XMLHttpRequest (XHR) is an API that can be used by JavaScript, and other web browser scripting languages to transfer XML and other text data to and from a web server using HTTP, by establishing an independent communication channel between a web page’s Client-Side and Server-Side.
The data returned from XMLHttpRequest calls will often be provided by back-end databases. Besides XML, XMLHttpRequest can be used to fetch data in other formats such as HTML, JSON or plain text.
XMLHttpRequest is an important part of the Ajax web development technique, and it is used by many websites to implement responsive and dynamic web applications. Examples of web applications that make use of XMLHttpRequest include Google’s Gmail service, Meebo, Google Maps.
XMLHttpRequest allows to make the requests and receive the responses.To do this object uses the following methods and properties
open(): Sets up a new request to a server.
send(): Sends a request to a server.
abort(): Bails out of the current request.
readyState: Provides the current HTML ready state.
responseText: The text that the server sends back to respond to a request.
7. What are the uses of AJAX drag and drop fature ?
Using this feature, user can reorder the items in the web page layout. Google Personalized page is best example for this. Frame works like DWR, GWT, AjaxTags…etc will provide this feature.
8. What are the different frameworks available in AJAX ?
Following are the popular AJAX frame works for server side java support.
DWR:(Direct Web Remoting):is a way of calling Java code on the server directly from Javascript in the browser. DWR consists of two main parts: JavaScript running in the user’s browser to communicate with the server and dynamically update the webpage, and a Java Servlet running on the server that processes requests and sends responses back to the browser.
GWT:Google Web Toolkit (GWT) is a Java software development framework that makes writing AJAX applications like Google Maps
AjaxTags:The AJAX Tag Library is a set of JSP tags that simplify the use of Asynchronous JavaScript and XML (AJAX) technology in JavaServer Pages. This tag library fills that need by not forcing J2EE developers to write the necessary JavaScript to implement an AJAX-capable web form.
AJAX4JSF:Ajax4jsf fully leverages the benefits of the JavaServer Faces framework including lifecycle, validation, and conversion facilities, along with management of static and dynamic resources.
JSON-RPC-Java:JSON-RPC-Java is a dynamic JSON-RPC implementation in Java. It allows you to transparently call server-side Java code from JavaScript with an included lightweight JSON-RPC JavaScript client. It is designed to run in a Servlet container such as Tomcat and can be used with JBoss and other J2EE Application servers to allow calling of plain Java or EJB methods from within a JavaScript DHTML web application.
AjaxAnywhere:AjaxAnywhere is designed to turn any set of existing JSP components into AJAX-aware components without complex JavaScript coding. ZK:ZK is an event-driven, XUL-based, AJAX-embedded, all Java framework to enable rich user interfaces for Web applications.
Echo 2: Echo2 is the next-generation of the Echo Web Framework, a platform for developing web-based applications that approach the capabilities of rich clients.
Zimbra:Zimbra is an open source server and client technology for AJAX based messaging and collaboration.
9. What is Mashups in AJAX ?
A Website or Web application that seamlessly combines content from more than one source into an integrated experience. Content used in mashups is typically sourced from a third party via a public interface or API. Other methods of sourcing content for mashups include Web feeds (e.g., RSS or Atom) and Javascript. With Google, Yahoo, Amazon and all opening their APIs, developers can now incorporate those services into their own, creating richer, deeper and more functional applications than ever before.
10. What is comet in AJAX ?
Comet applications can deliver data to the client at any time, not only in response to user input. The data is delivered over a single, previously-opened connection. This approach reduces the latency for data delivery significantly.
Comet describes applications where the server keeps pushing – or streaming – data to the client, instead of having the browser keep polling the server for fresh content.The architecture relies on a view of data which is event driven on both sides of the HTTP connection. Some applications, such as chat applications, stock tickers, or score boards require more immediate notifications of updates to the client.
A short list of example applications includes:
GMail’s GTalk integration
Jot Live
Renkoo
cgi:irc
Meebo
11. How do you integrate AJAX into the website ?
There are different frameworks available like DWR, GWT, AjaxTags, JSON-RPC-Java..etc. Using these frameworks we can embed the AJAX features drop down, comet etc..into our WebApplications.
12. Explain architecture of AJAX ?
13. How data binding is handled in AJAX ?
Databinding is a technique, using this we can bind a specific property of an object to GUI elements.This feature has advantages including the reduction of code in the GUI. Each AJAX frame work has it own implementation of this feature.
14. What is Dataset in AJAX ?
Traditional paging has been around ever since developers started to build dynamic Web applications. Anytime a large set of data is to be displayed, paging is used to show the user one subset of data at a time. The user navigates from one data set, or page, to another using the Next or Previous button.
Several variations of traditional paging are in use today. Some show the user First, Previous, Next, and Last buttons, some use numbers, and others employ a combination of the two. The paging concept helps both the user and the server efficiently deal with large sets of data.
The recent popularity of Ajax has changed the way developers design and build Web applications, however. Ajax gives you the ability to build Web applications that look and behave more like traditional desktop applications. Several open-source and commercial JavaScript/Ajax frameworks and libraries make the Ajax model even easier to implement by providing ready-to-use widgets. Developers can use these widgets to add rich features and functionality to Web applications without a lot of effort.
15. How can you communicate data changes between server and client using AJAX ?
The Ajax uses the XMLHttpRequest object to send HTTP requests and exchanging data between Web browsers and servers. The JavaScript code running in a Web page can use XMLHttpRequest to submit the request parameters to a server-side script such as a Servlet or a JSP page. The invoked Servlet/JSP sends back a response containing data that is typically used to update the content viewed by the user without refreshing the whole page. This approach has both performance and usability advantages since the network traffic is reduced and the Web UI behaves almost like a desktop GUI.
16. What is JSON in AJAX ?
JSON (JavaScript Object Notation) is a lightweight computer data interchange format. It is a text-based, human-readable format for representing objects and other data structures and is mainly used to transmit such structured data over a network connection (in a process called serialization).JSON finds its main application in Ajax web application programming, as a simple alternative to using XML for asynchronously transmitting structured information between client and server.
17. Tell me some powerful features of AJAX.
18. How asynchronous process is handled by AJAX.
19. Do you know how gmail.com is using AJAX. How it is useful.
20. Is the server or the client in control in AJAX
21. How to use HTTP GET and POST for AJAX calls ?
Usually only the GET method is used while creating Ajax apps.
But there are several occasions when POST is necessary when creating a ajax request. POST request are considered more secure than GET request
Using GET method
var http = new XMLHttpRequest();
http.open(“GET”, url+”?”+params, true);
http.send(null);
Using POST method
var passData = ‘age=’+escape(age)+’&name=’+escape(name)+’&job=’+escape(job);
http.open(“POST”, url, true);
http.send(passData);
Some http headers must be set along with any POST request.
http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http.setRequestHeader(“Content-length”, params.length);
http.setRequestHeader(“Connection”, “close”);
21. Explain how did you use AJAX in your previous project
22. How to integrate AJAX with Struts.
Filed under: AJAX | 2 Comments »
Think Tank 