Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Education
  • Be the first to comment


  2. 2. OUTLOOK <ul><li>INTRODUCTION </li></ul><ul><li>ABOUT </li></ul><ul><li>HTML </li></ul><ul><li>XHTML </li></ul><ul><li>CSS </li></ul><ul><li>JAVASCRIPT </li></ul><ul><li>WHAT IS AJAX ? </li></ul><ul><li>HOW AJAX WORKS ? </li></ul><ul><li>EXAMPLE </li></ul><ul><li>OUTPUT </li></ul><ul><li>FLOW CHART OF AJAX </li></ul><ul><li>AJAX SERVER </li></ul><ul><li>DRAWBACKS </li></ul><ul><li>CONCLUSION </li></ul>
  3. 3. INTRODUCTION <ul><li>A JAX is about updating parts of a web page, without reloading the whole page. </li></ul><ul><li>Before to continue about AJAX we should have a basic understanding of the following: </li></ul><ul><li>HTML / XHTML </li></ul><ul><li>CSS </li></ul><ul><li>JavaScript / DOM </li></ul>
  4. 4. <ul><li>HTML: HTML defines the structure and layout of a Web document by using a variety of tags and attributes. The structure of an HTML </li></ul><ul><li><html><head><body></body></HTML>. </li></ul><ul><li>XHTML: Extensible Hypertext Markup Language and which is a application of XML </li></ul><ul><li>CSS : &quot;Cascading Style Sheet&quot; are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. </li></ul><ul><li>JAVASCRIPT: JavaScript is an object-oriented[4] scripting language used to enable programmatic access to objects within both the client application and other applications and it is mainly used for client-side JavaScript </li></ul>
  5. 5. What is AJAX <ul><li>What is AJAX? </li></ul><ul><li>AJAX = Asynchronous JavaScript and XML. </li></ul><ul><li>AJAX is a technique for creating fast and dynamic web pages. </li></ul><ul><li>AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. </li></ul><ul><li>Ex of AJAX: Google Maps, Gmail, Youtube, and Facebook tabs. </li></ul><ul><li>AJAX applications are browser- and platform-independent! </li></ul>
  6. 6. How AJAX Works
  7. 7. <html> <head> <script type=&quot;text/javascript&quot;> function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();;GET&quot;,url,false); xmlhttp.send(null); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);;GET&quot;,url,false); xmlhttp.send(); } document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body> <div id=&quot;test&quot;> <h2>Let AJAX change this text</h2> </div> <button type=&quot;button&quot; onclick=&quot;loadXMLDoc('test1.txt')&quot;>Click Me</button> <button type=&quot;button&quot; onclick=&quot;loadXMLDoc('test2.txt')&quot;>Click Me</button> </body> </html>
  8. 8. OUTPUT <ul><li>Let AJAX change this text Here the first button output shown in following slide,as well 2 nd button </li></ul>CLICK ME CLICK ME
  9. 9. <ul><li>AJAX is not a new programming language. </li></ul><ul><li>AJAX is a technique for creating fast and dynamic web pages. </li></ul>CLICK ME
  10. 10. <ul><li>AJAX is based on internet standards, and uses a combination of: </li></ul><ul><li>* XMLHttpRequest object </li></ul><ul><li>* JavaScript/DOM </li></ul><ul><li>* CSS </li></ul><ul><li>* XML </li></ul>CLICK ME
  12. 12. AJAX SERVER <ul><li>There is no such thing as an AJAX server. </li></ul><ul><li>XMLHttpRequest Object can Request any Data </li></ul><ul><li>With the XMLHttpRequest object, you can request any web resource from a server. </li></ul><ul><li>You can request TXT files, HTML files, XML files, pictures or any data. </li></ul>
  13. 13. DRAW BACKS <ul><li>Ajax interfaces are often harder to develop when compared to static pages. </li></ul><ul><li>Pages dynamically created using successive Ajax requests do not automatically register themselves with the browser's history engine. </li></ul><ul><li>Dynamic web page updates also make it difficult for a user to bookmark a particular state of the application. </li></ul>
  14. 14. CONCLUSION <ul><li>AJAX allows us to build new and improved ways of interacting with a Web page. </li></ul><ul><li>As a developers we need to remember that the product is not about the technologies. </li></ul><ul><li>It's about the users and how they interact with the product. </li></ul>
  15. 15. THANK ”U”