Your SlideShare is downloading. ×
PowerPoint Presentation
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

PowerPoint Presentation


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. AJAX Live 
  • 2. We appreciate
  • 3. Overview Recalling the web technological terms. The need for AJAX Introducing AJAX Constituent stages in AJAX AJAX Engine setup Building AJAX application Commercial AJAX Frameworks and Toolkits AJAX Gotcha
  • 4. Recalling the web technological terms HTML The World Wide Web is constructed from many millions of individual pages, and those pages are written in a language called HTML. The purpose of this language is to display the content in the browser. Cascading Style Sheets Normal files with HTML understandable style syntax that results colorful display of the content in the browser. JavaScript Scripting code that is embedded in the HTML to make the normal HTML pages more dynamic. Server script Script at the server side that provides results to the clients requests. EX: PHP,ASP,JSP,ASP.NET
  • 5. Framework A Framework in software development is defined as the support structure in which other projects can be developed and organized. Library A library is defined as a collection of related functions and subroutines used to develop software. They are not independent programs. Toolkits A toolkit is generally used in reference to graphical user interface (GUI) toolkits. Basically, a library that is mainly focused on creating a GUI.. Object An object can be thought of a single package contains set of properties,which contains and classify the data,set of methods with which objects can perform actions on the data.
  • 6. The need for AJAX
  • 7. Introducing AJAX Ajax allows you to add to your web application interfaces some of this functionality more commonly seen in desktop applications and often referred to as a rich user experience. To achieve this, Ajax builds an extra layer of processing between the web page and the server. This layer is commonly referred as AJAX Engine (or) AJAX Framework The updating of page elements to reflect the revised information received from the server is also looked after by Ajax, happening dynamically while the page continues to be used.
  • 8. Constituent stages in AJAX XMLHTTPRequest Object Heart of the AJAX Engine and it is responsible to carry the HTTP request to the server asynchronously. Note The XMLHTTPRequest object can generally only make calls to URLs within the same domain as the calling page and cannot directly call a remote server. Talking with the Server XMLHTTPRequest talks with the server with its appropriate methods and properties asynchronously at the backside. Server Response As per the Server script is concerned the request from the XMLHTTPRequest is just another HTTP request. Dealing with the Server Response Once after the AJAX Engine gets notified about the sucessful execution. It modifies the data according to the functionality and keeps in place.
  • 9. AJAX Engine setup XMLHTTPRequest Object Properties and Methods Properties Description Determines which event handler will be called when onreadystatechange the object's readyState property changes Integer reporting the status of the request: 0 = uninitialized readystate 1 = loading 2 = loaded 3 = interactive 4 = completed responseText Data returned by the server in text string form responseXML Data returned by the server expressed as the document object status HTTP status code returned by server statusText HTTP reason phrase returned by server
  • 10. Methods Description abort() Stops the current request GetAllResponseHeaders Returns all headers as a string () getresponseHeader(x) Returns the value of header x as a string specifies the HTTP method (for example, GET or POST), open('method','URL','a') the target URL, and whether the request should be handled asynchronously (If yes, a='True'the default; if no, a='false'.) send(content) HTTP status code returned by server setRequestHeader('x','y') HTTP reason phrase returned by server
  • 11. send() Method Once the XMLHTTPRequest object is prepared with the open() method, it is possible to send the request with the send() method. If the request uses GET method ,then we can use send with a single argument null objectInstance.send(null); If the request uses POST method ,we must feed the content type and the values. objectInstance.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); objectInstance.send(var1=value1&var2=value2);
  • 12. Creating the XMLHTTPRequest Object with Cross Browser solution We can provide the solution for the Cross-Browsers using two ways 1. Using Object Detection function getXMLHTTPRequest() { var request = false; try { request = new XMLHttpRequest(); /* e.g. Firefox */ } catch(err1) { try { vrequest = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */ } catch(err2) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */ } catch(err3) { request = false; } } } return request; }
  • 13. 2. Using Browser Detection function getXMLHTTPRequest() { var request = false; if(window.XMLHTTPRequest) { request = new XMLHTTPRequest(); } else { if(window.ActiveXObject) { try { request = new ActiveXObject("Msml2.XMLHTTP"); } catch(err1) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch(err2) { request = false; } } } } return request; }
  • 14. Building AJAX application To-Do List 1. An HTML document forming the basis for the application 2. Javascript routines to create an instance of the XMLHTTPRequest object, construct and send asynchronous server calls 3. A server-side routine to configure and return the required information 4. A callback function to deal with the returned data and use it in the application
  • 15. AJAX Frameworks and Toolkits AJAX Java Frameworks Echo2 Tacos SWATO -Shift Web Application To WebORB AJAX .NET Frameworks AJAX Engine ATLAS Bitkraft MagicAjax AJAX PHP Frameworks AjaxAC AJAX AGENT Cajax Flexible Ajax
  • 16. AJAX Frameworks and Toolkits AJAX Toolkits AJAXLib CPAINT Dojo Prototype Sajax AJAX Flash Frameworks Flex Framework:FABridge
  • 17. AJAX Gotchas Back Button. Entertaining the Users. Don't use AJAX unnecessarily. Less Security. Vigorous testing on different platforms. Ajax Won't Cure a Bad Design. Permission Denied Errors
  • 18. Summary / Take home The combined effect of the issues just described, is to offer a much inferior user experience like desktop applications. Adopt Ajax for usability, not just to strut your stuff. Be careful about conserving resources in the server system, the browser system, and the connection between them. Avoid much animations so that the user can focus on the important things. The functions made available by libraries, greatly simplify some of the trickier programming tasks while developing Ajax applications.
  • 19. Resources Maxkiesler Manageability DHTMLgoodies Free programming resources Econsultant Ajaxian
  • 20. Books
  • 21. Special Thanks CommVault Systems (India) Pvt. Ltd. CommVault is a Storage Management, Backup and Disaster Recovery company incorporated in USA with its Global Development Centre in Hyderabad, AP.
  • 22. About us Charter Promote, Develop and Showcase Open Source software. Legal Registered “not for profit” Society under A.P. Societies Reg Act, 2001. Management Governed by Society By-Laws. Led by 7-member board of directors.
  • 23. Contact us website mailing list forum (software --> twincling) IRC #twincling helpline +91-99496 50605 +91-99499 91585 more info Mr. Kumar S. N. - Public Relations & Strategic Alliances