Ajax Jump Start


Published on

Short jump start for learning Ajax. The lecture explains this topic and goes through a code sample.

Published in: Technology
  • 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

No notes for slide

Ajax Jump Start

  1. 1. Haim Michael December 20th, 2013 All logos, trade marks and brand names used in this presentation belong to the respective owners. You can watch the video at http://youtu.be/VYLL5xWc1Jc AJAX © 2013 Haim Michael LifeMichael.com Ajax Jump Start
  2. 2. ● Introduction to Ajax ● The Synchronous Model ● Partial Screen Update ● The Asynchronous Model ● Simple Ajax Demo ● Questions & Answers © 2013 Haim Michael LifeMichael.com Table of Content
  3. 3. ● Ajax is an umbrella term used to describe the usage of technologies such as JavaScript, Document Object Model (DOM) and XML in the creation of interactive smooth web applications instead of refreshing ones when the page changes. © 2013 Haim Michael LifeMichael.com Introduction to Ajax
  4. 4. ● In the beginning, websites included simple HTML web pages, that were displayed in a synchronous way. ● Each time the user enters data and presses send he needs to wait till he gets the respond from the server. ● The server has no way to initiate updates. That leads to low productivity and inefficient web applications. © 2013 Haim Michael LifeMichael.com The Synchronous Model
  5. 5. ● Implementing ajax allows a partial screen update. Using ajax we can update those user interface elements that contain new information only. © 2013 Haim Michael LifeMichael.com Partial Screen Update
  6. 6. ● Ajax introduces the concept of asynchronous web applications model. ● The server can either leave a notification when ready and the client will pick it up, or alternatively, the client can poll the server at regular intervals in order to get the updated data. © 2013 Haim Michael LifeMichael.com The Asynchronous Model
  7. 7. ● The user can continue with using the application while the client requests from the server continue in the background. ● When the required data is ready the browser will update the related user interface parts only. © 2013 Haim Michael LifeMichael.com The Asynchronous Model
  8. 8. <?php function check($username) ajaxdemo.php { $users = array( 'david', 'michael', 'dan', 'tamar', 'jane'); if (in_array($username, $users)) { return "<font color='red'>username exists</font>"; } else { return "..."; } } if(isset($_GET['username'])) { echo check(trim($_GET['username'])); } ?> PHP Jump Start © 2013 Haim Michael LifeMichael.com Simple Ajax Demo
  9. 9. <!DOCTYPE html> ajaxdemo.html <head> <title>Simple Ajax Sample</title> <script> Var request = new XMLHttpRequest(); function check_username(username) { request.abort(); request.open("GET", "http://www.lifemichael.com/ajaxdemo.php? username="+username, true); request.onreadystatechange= function() { if (request.readyState == 4) { document.getElementById('msg').innerHTML = request.responseText; } }; request.send(null); } </script> © 2013 Haim Michael </head> LifeMichael.com Simple Ajax Demo
  10. 10. <body> <h1>Registration Form</h1> <form action="somefile.php" method="get"> Username: <input name="username" type="text" onkeyup="check_username(this.value)" /> <br> <div id='msg'></div> <input type="submit"> </form> </body> </html> http://lifemichael.com/ajaxdemo.html © 2013 Haim Michael LifeMichael.com Simple Ajax Demo
  11. 11. ● The readyState property defines the XmlHttpRequest state. Its possible values include the following: 0 Uninitialized 1 Loading 2 Loaded 3 Interactive 4 Complete © 2013 Haim Michael LifeMichael.com Simple Ajax Demo
  12. 12. © 2013 Haim Michael LifeMichael.com Simple Ajax Demo
  13. 13. ● Two courses you might find interesting include Software Engineering in PHP more info Android 4.4 Java Applications Development more info HTML5 Cross Platform Mobile Applications more info ● If you enjoyed my lecture please leave me a comment at http://speakerpedia.com/speakers/life-michael. Thanks for your time! Haim. © 2013 Haim Michael LifeMichael.com Questions & Answers