AJAX SUBMITTED BY MURTHY.CH.VSN  & J.RATNA PRASANTH
OUTLOOK INTRODUCTION ABOUT HTML XHTML CSS JAVASCRIPT WHAT IS AJAX ? HOW AJAX WORKS ? EXAMPLE OUTPUT FLOW CHART OF AJAX AJAX SERVER DRAWBACKS CONCLUSION
INTRODUCTION A JAX is about updating parts of a web page, without reloading the whole page. Before to continue about AJAX we should have a basic understanding of the following: HTML / XHTML CSS JavaScript / DOM
HTML:  HTML defines the structure and layout of a Web document by using a variety of tags and attributes. The  structure of an HTML <html><head><body></body></HTML>. XHTML: Extensible Hypertext Markup Language and which is a application of XML 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. 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
What is AJAX What is AJAX? AJAX = Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.  Ex of  AJAX: Google Maps, Gmail, Youtube, and Facebook tabs. AJAX applications are browser- and platform-independent!
How AJAX Works
<html> <head> <script type=&quot;text/javascript&quot;> function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); xmlhttp.open(&quot;GET&quot;,url,false); xmlhttp.send(null); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); xmlhttp.open(&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>
OUTPUT Let AJAX change this text  Here the first button output shown in following slide,as well 2 nd  button CLICK ME CLICK ME
AJAX is not a new programming language. AJAX is a technique for creating fast and dynamic web pages. CLICK ME
AJAX is based on internet standards, and uses a combination of: * XMLHttpRequest object * JavaScript/DOM * CSS * XML CLICK ME
FLOWCHART OF AJAX
AJAX SERVER There is no such thing as an AJAX server. XMLHttpRequest Object can Request any Data With the XMLHttpRequest object, you can request any web resource from a server. You can request TXT files, HTML files, XML files, pictures or any data.
DRAW BACKS Ajax interfaces are often harder to develop when compared to static pages. Pages dynamically created using successive Ajax requests do not automatically register themselves with the browser's history engine. Dynamic web page updates also make it difficult for a user to bookmark a particular state of the application.
CONCLUSION AJAX allows us to build new and improved ways of interacting with a Web page. As a developers we need to remember that the product is not about the technologies. It's about the users and how they interact with the product.
THANK  ”U”

Ajaxppt

  • 1.
    AJAX SUBMITTED BYMURTHY.CH.VSN & J.RATNA PRASANTH
  • 2.
    OUTLOOK INTRODUCTION ABOUTHTML XHTML CSS JAVASCRIPT WHAT IS AJAX ? HOW AJAX WORKS ? EXAMPLE OUTPUT FLOW CHART OF AJAX AJAX SERVER DRAWBACKS CONCLUSION
  • 3.
    INTRODUCTION A JAXis about updating parts of a web page, without reloading the whole page. Before to continue about AJAX we should have a basic understanding of the following: HTML / XHTML CSS JavaScript / DOM
  • 4.
    HTML: HTMLdefines the structure and layout of a Web document by using a variety of tags and attributes. The structure of an HTML <html><head><body></body></HTML>. XHTML: Extensible Hypertext Markup Language and which is a application of XML 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. 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
  • 5.
    What is AJAXWhat is AJAX? AJAX = Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. Ex of AJAX: Google Maps, Gmail, Youtube, and Facebook tabs. AJAX applications are browser- and platform-independent!
  • 6.
  • 7.
    <html> <head> <scripttype=&quot;text/javascript&quot;> function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); xmlhttp.open(&quot;GET&quot;,url,false); xmlhttp.send(null); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); xmlhttp.open(&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.
    OUTPUT Let AJAXchange this text Here the first button output shown in following slide,as well 2 nd button CLICK ME CLICK ME
  • 9.
    AJAX is nota new programming language. AJAX is a technique for creating fast and dynamic web pages. CLICK ME
  • 10.
    AJAX is basedon internet standards, and uses a combination of: * XMLHttpRequest object * JavaScript/DOM * CSS * XML CLICK ME
  • 11.
  • 12.
    AJAX SERVER Thereis no such thing as an AJAX server. XMLHttpRequest Object can Request any Data With the XMLHttpRequest object, you can request any web resource from a server. You can request TXT files, HTML files, XML files, pictures or any data.
  • 13.
    DRAW BACKS Ajaxinterfaces are often harder to develop when compared to static pages. Pages dynamically created using successive Ajax requests do not automatically register themselves with the browser's history engine. Dynamic web page updates also make it difficult for a user to bookmark a particular state of the application.
  • 14.
    CONCLUSION AJAX allowsus to build new and improved ways of interacting with a Web page. As a developers we need to remember that the product is not about the technologies. It's about the users and how they interact with the product.
  • 15.