Ajax Jump Start
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
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Ajax Jump Start
Similar to Ajax Jump Start (20)
More from Haim Michael
More from Haim Michael (20)
Recently uploaded
Recently uploaded (20)
Ajax Jump Start
- 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. ● 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. ● 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. ● 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. ● 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. ● 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. ● 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. <?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. <!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. <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. ● 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. © 2013 Haim Michael LifeMichael.com Simple Ajax Demo
- 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