AJAX

SEMINAR REPORT

ON

AJAX



SUBMITTED BY,

Mr.Padwale Kailas R.
Mr.Thorat Yogesh A.
Mr.Gaikwad Deepak S.

T.Y.B.Tech.

Department of Computer Science & Engineering,
Shri Guru Gobind Singhji Institute of Engineering & Technology,
Vishnupuri, Nanded-431602


Academic Year:2006-2007

GUIDED BY

Miss. P.C.BorlePawar
CERTIFICATEThis is to certify that, Mr.Padwale Kailas R. Mr.Thorat Yogesh A. Mr.Gaikwad Deepak S.has successfully completed the Seminar Titled “AJAX”Towards the partial fulfillment of the Third Year degree course in Computer Science & Engg. in the academic year 2006-2007. Date:Prof. R.K.Chavan Miss. P.C.BorlepawarHead, Computer Science & Engg. Seminar Guide Prof. Dr.T.R. Sontakke Principal S.G.G.S. I .E & T, Nanded.Department of Computer Science & Engineering,Shri Guru Gobind Singhji Institute of Engineering & Techology,Vishnupuri, Nanded-431602


ACKNOWLEDGEMENT



We take this opportunity to express my sincere gratitude to all people who have contributed towards the successful completion of my seminar.

We would like to extend my deepest and heartfelt gratitude to my seminar guide Miss.P.C.Borlepawar and acknowledge his able guidance and constant encouragement, which went a long way ensuring my success.

We sincerely acknowledge the invaluable support and guidance extended to me by Prof. R.K.Chavan Head of Computer Science & Engineering department for nurturing a congenial yet competitive environment in the department.

At last we would like to thank all the staff members who directly or indirectly helped me time to time.





Mr.Padwale Kailas R.
Mr.Thorat Yogesh A.
Mr.Gaikwad Deepak S.

T.Y.(C.S.E.)B.Tech.


Department of Computer Science & Engineering,
Shri Guru Gobind Singhji Institute of Engineering & Techology,
Vishnupuri, Nanded-431602







Abstract


AJAX is the buzz-word of the moment to web developers. It's a buzz-word that is hotly debated from many angles, but it has stuck as a buzz-word because it encapsulates something that is new from a user's perspective. The functionally that is newly available to all web users is "in-page replacement" - the ability for a web page to change using data from a web server without totally redrawing itself. This functionality has been around in Mozilla and Internet Explorer for a while, but it is only recently that Safari and Konqueror users have been able to join in.
Ajax, which stands for Asynchronous JavaScript and XML, is transforming the Web and Internet-based applications forever. The initial user interaction model of the Web is based on page-oriented HyperText Markup Language (HTML). It is designed to display text and graphic information easily in a web browser. Its simple publication and viewing model has helped fuel the explosive adoption of the World Wide Web into the global phenomenon we know today. But this growth has users wanting more; they want web applications to provide desktop-like user experiences, and HTML's page-oriented model falls short.
Ajax substantially improves the end user experience for web-based applications and provides a new user interaction model. In more technical terms, Ajax is a development technique in which Web pages act more like desktop applications because the page does not have to be reloaded on each user input. Instead of repeated page refreshes, small amounts of data are exchanged with the server behind the scenes and the application remains usable by the end-user.
Ajax technology has emerged as a critical technology for launching the Web's next generation, often referred to as Web 2.0. Ajax is increasing end user productivity and enabling new classes of collaboratory applications. In short, Ajax is redefining the Web at a rapid pace, thus requiring every organization with a Web presence or Internet-based business applications to develop a cohesive Ajax strategy.

INDEX



Section 1 Introduction to Ajax

1.1 History & justification for Ajax style Programming…………… 5
1.2 How does Ajax help us?................................................................... 5
1.3 What is Ajax?................................................................................... 6
1.4 How does Ajax work?...................................................................... 6
1.5 Traditional Web Interaction……………………………………... 7
1.6 Working with Ajax……………………………………………….. 7
1.7 Why Ajax?........................................................................................ 7

Section 2 Ajax Applications

2.1 Google Suggest…………………………………………………..... 8
2.2 Gmail Chat………………………………………………………... 9
2.3 Google Maps………………………………………………………. 10
2.4 Google Calendar…………………………………………………... 11
2.5 Yahoo! Portal………………………………………………………12

Section 3 Ajax Programming

3.1 Introduction to Ajax programming………………………………13
3.2 Putting Browser Events to work…………………………………. 14
3.3 Writing Ajax Application………………………………………… 15
3.4 Creating XMLHttpRequest Object ………………………………17
3.5 Getting Interactive with Server-Side Scripting…………………. 20
3.6 Choosing a server-side scripting language ………………………20

Section 4 Advantages & Disadvantages

4.1 Advantages…………………………………………………………21
4.1.1 Bandwidth utilization…………………………………….. 21
4.1.2 User interface………………………………………………21
4.1.3 Separation of Data, Format, Style, and Function………. 21
4.2 Disadvantages……………………………………………………... 22
4.2.1 Browser integration………………………………………. 22
4.2.2 Response-time concerns………………….…………..…… 23
4.2.3 Search Engine Optimization…….……………………….. 23
4.2.4 JavaScript reliability………………………………………23

Section 5 FAQs………………………………………………………………..25

Section 6 Conclusion………………………………………………………….27

Section 7 References………………………………………………………….28


Section 1 : Introduction to Ajax

1.1 History & justification for Ajax style Programming


Making Web applications look and feel like desktop applications is what
Ajax is all about. Although Web development is getting more and more popular, users still have to click a button, wait until a new page loads, click another button, wait until a new page loads and so on. That’s where Ajax comes in. With Ajax, we communicate with the server behind the scenes, grab the data we want and display it instantly in a Web page — no page refreshes needed, no flickering in the browser, no waiting.

Thus, Web applications start to look like desktop applications. With today’s faster connections, receiving data from the server is usually a snap, so Web software can have the same look and feel of software on the user’s desktop.
And that, is going to be the future of Web programming — now the applications in our browser can look and work just like the applications installed on our computer.

The technology for Ajax has been around since 1998, and a handful of applications (such as Microsoft’s Outlook Web Access) have already put it to use.
But Ajax didn’t really catch on until early 2005, when a couple of high-profile
Web applications (such as Google Suggest and Google Maps) put it to work, and Jesse James Garrett wrote his article coining the term Ajax and so putting everything under one roof.

1.2 How Does Ajax help us?

With Ajax, Web applications finally start feeling like desktop applications to the users. That’s because Ajax enables our Web applications to work behind the scenes, getting data as they need it, and displaying that data as we want. And as more and more people get fast Internet connections, working behind the scenes to access data is going to become all the rage. Soon, it will be impossible to distinguish dedicated desktop software from software that’s actually on the Internet, far from the user’s machine.
1.3 What is Ajax ?

The name Ajax is shorthand for Asynchronous JavaScript and XML, and it is made up of several components:
v Browser-based presentation using HTML and Cascading Style Sheets (CSS).
v Data stored in XML format and fetched from the server.
v Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.
v JavaScript to make everything happen.

JavaScript is the scripting language that nearly all browsers support, which
will let us fetch data behind the scenes, and XML is the popular language
that lets us store data in an easy format.

1.4 How Does Ajax Work?

1). In the browser, we write code in JavaScript that can fetch data from the
server as needed.
2). When more data is needed from the server, the JavaScript uses a special
item supported by browsers, the XMLHttpRequest object, to send a
request to the server behind the scenes — without causing a page
refresh. The JavaScript in the browser does not have to stop everything to wait
for that data to come back from the server. It can wait for the data in the
background and spring into action when the data does appear (that’s
called asynchronous data retrieval).
3). The data that comes back from the server can be XML or just plain text. The JavaScript code in the browser can read that data and put it to work immediately.
This is how Ajax works — it uses JavaScript in the browser and the XMLHttpRequest object to communicate with the server without page refreshes, and handles the XML (or other text) data sent back from the server.



1.5 Traditional Web Interaction




1.6 Working Of Ajax



1.7 Why Ajax?

§ It enables building Rich Internet Applications (RIA),
§ Allows dynamic interaction on the Web,
§ Improves performance,
§ Real-time updates,
§ No plug-ins required.


Section 2: Applications of AJAX.

2.1 Google Suggest - Searching in real time with live searches.

One of the truly cool things we can do with Ajax is live searching, where we
get search results instantly, as we enter the term we are searching for. For
example, take a look at http://www.google.com/webhp?complete=1
&hl=en, the page which appears in Figure 2-1. As we enter a term to search
for, Ajax contacts Google behind the scenes, and we see a drop-down menu
that displays common search terms from Google that might match what
we are typing. If we want to select one of those terms, just click it in the
menu.

Figure 2-1-


2.2 Gmail Chat

Because Ajax excels at updating Web pages without refreshing the displayed
page, it’s a great choice for Web-based chat programs, where many users can
chat together at the same time. Take a look at Gmail Chat, for example, which is shown in Figure 2-2. Here, we just enter out text and click the Submit button to send that text to the server. All the while, we can see everyone else currently chatting — no page refresh needed.

Figure 2-2.









2.3 Google Maps

One of the most famous Ajax application is Google Maps, at http://maps.
google.com, which we can see at work in Figure 2-3, zooming in on National Highway no. 4, Pune. The location for that marker is passed to the browser from the server using Ajax techniques, and the Ajax code in the browser positions the marker accordingly.

Figure 2-3










2.4 Google Calendar

This is another application by Google which uses Ajax programming. Here, we can use the web based calendar like a desktop calendar application. We can add, modify, delete events without refreshing the page. This makes the web page look like a desktop application.

Figure 2-4










2.5 Yahoo!
Yahoo! also uses Ajax to make its portal look like a desktop application. It provides rich user interface.

Figure 2-5















Section 3: Ajax Programming:

Ajax Programming is based on Java Script. Ajax applications often respond to user actions — button clicks, mouse double clicks, page loads, and so on. The script can know when to respond to something that has happened with the help of browser events.

3.2 Putting browser events to work.

To make any of the browser events in Table 3-1 happen, we need to drop
them in a Web page’s HTML. For example, what if we want to change the
color of a Web page to pink when the user clicks that page. We can use the
events in Table 3-1 as attributes in various HTML elements; for example, the
Web page itself is represented with the element, so we can use the
onmousedown attribute in the tag with a little JavaScript to turn the
page pink. We can execute JavaScript simply by assigning
it to an event attribute such as the onmousedown attribute without having to
place that JavaScript in a element; such scripts are called inline
scripts (the text of an inline script must be enclosed in quotes, as here):









3.3 Writing Some Ajax

To illustrate Ajax, the following code asks the user to click a button, fetches data from the server using Ajax techniques, and displays that data in the same Web page as the button — without refreshing the page.





Figure 3-1

When we click that button, the JavaScript in the page fetches some new text
and replaces the original text in the application with this new version, as we see in Figure 3-2. No screen flicker, no page fetch, no fuss, no muss. Of course, we can display data like this using simple JavaScript, but the difference here is that when we use Ajax, we’re able to fetch the data from a Web server.


Figure 3-2




3.4 Creating the XMLHttpRequest object

This example application is going to need an XMLHttpRequest object to start, so it begins with the code that will create that object; this code is outside any function, so it runs immediately as the page loads. We start everything by creating a variable for this object, XMLHttpRequestObject like this:



This variable is initialized to the value false so that the script can check
later whether the variable was indeed created. Besides the false value,
JavaScript also supports a value named true — these two are Boolean
values that we can assign to variables. The Netscape (version 7.0 and later),
Apple Safari (version 1.2 and later), and Firefox browsers let us create
XMLHttpRequest objects directly with code, like this:



The XMLHttpRequest object is usually part of the browser’s window object, so to check whether XMLHttpRequest is ready to use, we can use this if statement to check if XMLHttpRequest objects which, again, we can access as window.XMLHttpRequest are available.


If XMLHttpRequest is there and available, we can create the XMLHttpRequest object in this way:












3.5 Getting Interactive with Server-Side Scripting

We can download static text files behind the scenes by using Ajax methods, but we can also connect to server-side applications. And doing that opens all kinds of possibilities because we can send data to those server-side applications and get their responses behind the scenes.
This is where the real power of Ajax comes in. We can create an application
that watches what the user is doing, and the application can get data from the server as needed. Virtually all Ajax applications connect to some kind of
server program.

3.5 Choosing a server-side scripting language

We can use different server-side scripting languages like PHP and JavaServer Pages (JSP). Among the Ajax examples we will see on the Web that connect to server-side scripts, PHP is the most popular choice. Using some PHP scripts and Ajax we can handle XML data and send data to the server to configure the response we get back from the server.
Thousands of Web servers support PHP, so if we want to sign up for one, they are easy to find. Most of the servers support PHP today.







Section 4: Advantages & Disadvantages
4.1 Advantages
v Bandwidth utilization
By generating the HTML locally within the browser, and only bringing down JavaScript calls and the actual data, Ajax web pages can appear to load relatively quickly since the payload coming down is much smaller in size. An example of this technique is a large result set where multiple pages of data exist. With Ajax, the HTML of the page, e.g., a table control and related TD and TR tags can be produced locally in the browser and not brought down with the first page of the document.
In addition to "load on demand" of contents, some web based applications load stubs of event handlers and then load the functions on the fly. This technique significantly cuts down the bandwidth consumption for web applications that have complex logic and functionality.

v User interface
The most obvious reason for using Ajax is an improvement to the user experience. Pages using Ajax behave more like a standalone application than a typical web page. Clicking on links that cause the entire page to refresh feels like a "heavy" operation. With Ajax, the page often can be updated dynamically, allowing a faster response to the user's interaction. While the full potential of Ajax has yet to be determined, some believe it will prove to be an important technology, helping making the web even more interactive and popular than it currently is.

v Separation of Data, Format, Style, and Function
A less specific benefit of the AJAX approach is that it tends to encourage programmers to clearly separate the methods and formats used for the different aspects of information delivery via the web. Although AJAX can appear to be a jumble of languages and techniques, and programmers are free to adopt and adapt whatever works for them, they are generally propelled by the development motif itself to adopt separation between:
(1) The raw data or content to be delivered - which is normally embedded in XML and sometimes derived from a server-side database.
(2) The format or structure of the webpage - which is almost always built in HTML (or better, XHTML) and is then reflected and made available to dynamic manipulation in the DOM
(3) The style elements of the webpage - everything from fonts to picture placement - are derived by reference to embedded or referenced CSS; and
(4) The functionality of the web page is provided by a combination of
(A) Javascript on the client browser (also called DHTML),
(B) Standard HTTP and XMLHttp for client-to-server communication, and
(C) server-side scripting and/or programs utilizing any suitable language preferred by the programmer to receive the client's specific requests and respond appropriately.

4.2 Disadvantages

v Browser integration
The dynamically created page does not register itself with the browser history engine, so triggering the "Back" function of the users' browser might not bring the desired result.
Developers have implemented various solutions to this problem. These solutions can involve using invisible IFRAMEs to invoke changes that populate the history used by a browser's back button. Google Maps, for example, performs searches in an invisible IFRAME and then pulls results back into an element on the visible web page.
Another issue is that dynamic web page updates make it difficult for a user to bookmark a particular state of the application. Solutions to this problem exist, many of which use the URL fragment identifier (the portion of a URL after the '#') to keep track of, and allow users to return to, the application in a given state. This is possible because many browsers allow JavaScript to update the fragment identifier of the URL dynamically, so that Ajax applications can maintain it as the user changes the application's state. This solution also improves back-button support. It is, however, not a complete solution.
v Response-time concerns
Network latency — or the interval between user request and server response needs to be considered carefully during Ajax development. Without clear feedback to the user, smart preloading of data and proper handling of the XMLHttpRequest object, users might experience delay in the interface of the web application, something which users might not expect or understand. Additionally, when an entire page is rendered there is a brief moment of re-adjustment for the eye when the content changes. The lack of this re-adjustment with smaller portions of the screen changing makes the latency more apparent. The use of visual feedback (such as throbbers) to alert the user of background activity and/or preloading of content and data are often suggested solutions to these latency issues.
In general the potential impact of latency has not been "solved" by any of the open source Ajax toolkits and frameworks available today, such as the effect of latency variance over time.

v Search Engine Optimization
Websites that use Ajax to load data which should be indexed by search engines must be careful to provide equivalent data at a public, linked URL and in a format that the search engine can read, as search engines do not generally execute the JavaScript code required for Ajax functionality. This problem is not specific to Ajax, as the same issue occurs with sites that provide dynamic data as a full-page refresh in response to, eg, a form submit (the general problem is sometimes called the hidden web).

v Javascript reliability
Ajax relies on Javascript, which may be implemented differently by different browsers or versions of a particular browser. Because of this, sites that use Javascript may need to be tested in multiple browsers to check for compatibility issues. It's not uncommon to see a Javascript code written twice, a part for IE, a part for Mozilla compatibles.

Section 5 : FAQs

FAQs

Q. Did Google invent Ajax? Did Adaptive Path help build Google’s Ajax applications?
A. Google did not invent Ajax. Google’s recent products are simply the highest-profile examples of Ajax applications.

Q. Is anyone selling Ajax components or trademarking the name? Where can I download it?
A. Ajax isn’t something we can download. It’s an approach — a way of thinking about the architecture of web applications using certain technologies.

Q. Is Ajax just another name for XMLHttpRequest?
A. No. XMLHttpRequest is only part of the Ajax equation. XMLHttpRequest is the technical component that makes the asynchronous server communication possible; Ajax is our name for the overall approach described in the article, which relies not only on XMLHttpRequest, but on CSS, DOM, and other technologies.

Q. Techniques for asynchronous server communication have been around for years. What makes Ajax a “new” approach?
A. What’s new is the prominent use of these techniques in real-world applications to change the fundamental interaction model of the Web. Ajax is taking hold now because these technologies and the industry’s understanding of how to deploy them most effectively have taken time to develop.

Q. Is Ajax a technology platform or is it an architectural style?
A. It’s both. Ajax is a set of technologies being used together in a particular way.

Q. What kinds of applications is Ajax best suited for?
A. We don’t know yet. Because this is a relatively new approach, our understanding of where Ajax can best be applied is still in its infancy. Sometimes the traditional web application model is the most appropriate solution to a problem.
Q. Does this mean Ajax is anti-Flash?
A. Not at all. There have been supporters of Flash technology since years. As Ajax matures, we expect that sometimes Ajax will be the better solution to a particular problem, and sometimes Flash will be the better solution. We’re also interested in exploring ways the technologies can be mixed (as in the case of Flickr.com, which uses both).

Q. Does Ajax have significant accessibility or browser compatibility limitations? Do Ajax applications break the back button? Is Ajax compatible with REST? Are there security considerations with Ajax development? Can Ajax applications be made to work for users who have JavaScript turned off?
A. The answer to all of these questions is “maybe”. Many developers are already working on ways to address these concerns. We think there’s more work to be done to determine all the limitations of Ajax, and we expect the Ajax development community to uncover more issues like these along the way.

Q. Some of the Google examples we cite don’t use XML at all. Do I have to use XML and/or XSLT in an Ajax application?
A. No. XML is the most fully-developed means of getting data in and out of an Ajax client, but there’s no reason we couldn’t accomplish the same effects using a technology like JavaScript Object Notation or any similar means of structuring data for interchange.

Q. Are Ajax applications easier to develop than traditional web applications?
A. Not necessarily. Ajax applications inevitably involve running complex JavaScript code on the client. Making that complex code efficient and bug-free is not a task to be taken lightly, and better development tools and frameworks will be needed to help us meet that challenge.

Q. Do Ajax applications always deliver a better experience than traditional web applications?
A. Not necessarily. Ajax gives interaction designers more flexibility. However, the more power we have, the more caution we must use in exercising it. We must be careful to use Ajax to enhance the user experience of our applications, not degrade it.
Section 6 : Conclusion

Conclusion

Ajax, which stands for Asynchronous JavaScript and XML, is transforming the Web and Internet-based applications forever. The initial user interaction model of the Web is based on page-oriented HyperText Markup Language (HTML).

It is designed to display text and graphic information easily in a web browser. Its simple publication and viewing model has helped fuel the explosive adoption of the World Wide Web into the global phenomenon we know today.
In short, Ajax is redefining the Web at a rapid pace, thus requiring every organization with a Web presence or Internet-based business applications to develop a cohesive Ajax strategy.


































Section 7 : References

References

1. Ajax: A New Approach to Web Applications. Adaptive Path.
2. HTTPRequest-enabled RS. microsoft.public.scripting.remote newsgroup.
3. ARSCIF: A Framework for Asynchronous Remote–Script Callback Invocation.
4. Cutting Edge: Script Callbacks in ASP.NET. MSDN Magazine.
5. Uniform Resource Identifiers (URI): Generic Syntax. The Internet Society.
6. Remote Scripting with AJAX, Part 2. O'Reilly XML.com.





















Bibliography


Web Sites:

www.nttdocomo.com

www.webopedia.com

www.imodelink.com

www.anywhereyougo.com

www.eurotechnology.com

Search Sites:

www.google.com

www.yahoo.com

www.webopedia.com