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.
Upcoming SlideShare
GWT training session 3
GWT training session 3
Loading in …3
×
1 of 13

Ajax Jump Start

0

Share

Download to read offline

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

More information about the Java course I deliver can be found at java.course.lifemichael.com

More information about the PHP course I deliver can be found at php.course.lifemichael.com

More information about the FED course I deliver can be found at fed.course.lifemichael.com

More information about the Scala course I deliver can be found at scala.course.lifemichael.com

More information about the Android course I deliver can be found at android.course.lifemichael.com

More information about the Kotlin course I deliver can be found at kotlin.course.lifemichael.com

More information about the Swift course I deliver can be found at swift.course.lifemichael.com

More information about the C++ course I deliver can be found at cpp.course.lifemichael.com

More information about the Go course I deliver can be found at go.course.lifemichael.com

More information about the CSS course I deliver can be found at css.course.lifemichael.com

More information about the C# course I deliver can be found at csharp.course.lifemichael.com

More information about the Python course I deliver can be found at python.course.lifemichael.com

More information about the Angular course I deliver can be found at angular.course.lifemichael.com

More information about the Node.js course I deliver can be found at nodejs.course.lifemichael.com

More information about the Fullstack Development course I deliver can be found at fullstack.course.lifemichael.com

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

×