Published on

its a basic ajax introduction.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. AJAX - Mahesh Shitole - Associate Software Engineer - Knowledge Quest Infotech
  2. 2. What is AJAX? <ul><li>AJAX stands for Asynchronous Java Script and XML . </li></ul><ul><li>AJAX is a type of programming made popular in </li></ul><ul><li>2005 by Google. </li></ul><ul><li>Ajax is not a new programming language, but a new </li></ul><ul><li>way to use existing standards . </li></ul><ul><li>It is a web development technique for creating </li></ul><ul><li>better, faster, and more interactive web </li></ul><ul><li>applications. </li></ul><ul><li>AJAX is based on JavaScript and HTTP requests . </li></ul>
  3. 3. Technologies used by AJAX : - <ul><li>XHTML(Extended-HTML) and CSS(Cascaded Style Sheet) </li></ul><ul><li>DOM(Document Object Model) </li></ul><ul><li>XML(Extensible Markup Language) </li></ul><ul><li>XMLHttpRequest </li></ul><ul><li>JavaScript </li></ul>
  4. 4. Uses of AJAX : - <ul><li>Real-time form data validation. </li></ul><ul><li>Auto completion. </li></ul><ul><li>Load on demand. </li></ul><ul><li>Partial submit. </li></ul><ul><li>Saving Time. </li></ul>
  5. 5. Classic Web Application Architecture user interface Web server Server-side logic and data Browser client Server-side system HTTP request HTML + CSS data
  6. 6. AJAX Architecture user interface Web and/or XML server Server-side logic and data Brower client Server-side system HTTP request XML data AJAX engine JavaScript call HTML + CSS data
  7. 8. Implementation of AJAX <html> <body> <form name = “myForm”> Name:<input type=“text”name=“username”/> Time:<input type=“text” name=“time”/> </form> </body> </html>
  8. 9. <ul><li>About XMLHttpRequest : </li></ul><ul><li>With this object javascript directely connect to the Web Server. </li></ul><ul><li>Without Reloading the web page javascript can </li></ul><ul><li>can trade data with web server. </li></ul><ul><li>Its implementaion is different from browser to browser. </li></ul><ul><li>It is supported in all web browsers like Firefox, Opera 8.0+, Safari except internet explorer. </li></ul><ul><li>In internet explorer ActiveXObject is used like </li></ul><ul><li>XMLHttpRequest. </li></ul>
  9. 10. Properties of XMLHttpRequest OnReadyStateChange ReadyState ResponseText stores your function that will process the response from a server. holds the status of the server's response. It is always changing State Description 0 The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete data sent back from the server can be retrieved from this property
  10. 11. Updated Ajax Application <html> <body> <script type=&quot;text/javascript&quot;> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer 6.0+
  11. 12. try { xmlHttp=new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch (e) { // Internet Explorer 5.5+ try { xmlHttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch (e) { alert(&quot;Your browser does not support AJAX!&quot;); return false; } } } // end of outer catch
  12. 13. } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open(&quot;GET&quot;,&quot;time.asp&quot;,true); xmlHttp.send(null); } </script>
  13. 14. <form name=&quot;myForm&quot;> Name: <input type=&quot;text“ onkeyup=&quot;ajaxFunction();” name=&quot;username&quot; /> Time: <input type=&quot;text“ name=&quot;time&quot; /> </form> </body> </html>
  14. 15. <% response.expires=-1 response.write(time) %> Server Side Code <ul><li>The Expires property sets how long (in minutes) a </li></ul><ul><li>page will be cached on a browser before it expires. </li></ul><ul><li>Response.Expires=-1 indicates that the page will </li></ul><ul><li>never be cached. </li></ul>
  15. 16. Advantages of AJAX : - <ul><li>The XMLHttpRequest object is supported in Internet Explorer 5.0+ , Safari 1.2 , Mozilla 1.0/ Firefox , Opera 8+ and Netscape 7 . </li></ul><ul><li>Not only JavaScript but also other languages like VBScript , ASP.net , PHP scripting languages used for implementing an AJAX application. </li></ul><ul><li>Using AJAX, a web application can request only the content that needs to be updated, thus reducing bandwidth usage . </li></ul>
  16. 17. <ul><li>Because only sections of pages need to be </li></ul><ul><li>reloaded, Ajax allows for much more </li></ul><ul><li>responsive web applications, giving users the </li></ul><ul><li>feeling that changes are happening </li></ul><ul><li>instantaneously. </li></ul><ul><li>The use of AJAX can reduce the connections </li></ul><ul><li>to the server , since scripts and style sheets </li></ul><ul><li>only have to requested once . </li></ul><ul><li>The AJAX technique makes Internet </li></ul><ul><li>applications smaller , faster and </li></ul><ul><li>more user-friendly . </li></ul><ul><li>AJAX is a browser technology independent of </li></ul><ul><li>web server software. </li></ul>
  17. 18. Disadvantages of AJAX : - <ul><li>Dynamically created pages do not register </li></ul><ul><li>themselves with the browsers history engine, so </li></ul><ul><li>clicking the browsers “back” button would not </li></ul><ul><li>return the user to an earlier state of the Ajax- </li></ul><ul><li>enabled page, but would instead return them to the </li></ul><ul><li>last page visited before it . </li></ul><ul><li>Internet Explorer uses an ActiveXObject , while other </li></ul><ul><li>browsers uses the built-in JavaScript object called </li></ul><ul><li>XMLHttpRequest . </li></ul>
  18. 19. Thank You