Ajax Jump Start
13
Click here to load reader
-
Upload
haim-michael -
Category
Technology
-
view
559 -
download
0
description
Short jump start for learning Ajax. The lecture explains this topic and goes through a code sample.
Transcript of Ajax Jump Start
© 2013 Haim Michael
Ajax Jump Start
Haim MichaelDecember 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
Li fe M
ic hae l .c o
m
AJAX
© 2013 Haim Michael
Table of ContentLi fe M
ic hae l .c o
m● Introduction to Ajax● The Synchronous Model● Partial Screen Update● The Asynchronous Model● Simple Ajax Demo● Questions & Answers
© 2013 Haim Michael
Introduction to Ajax● 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.
Li fe M
ic hae l .c o
m
© 2013 Haim Michael
The Synchronous Model● 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.
Li fe M
ic hae l .c o
m
© 2013 Haim Michael
Partial Screen Update● Implementing ajax allows a partial screen update. Using
ajax we can update those user interface elements that
contain new information only.
Li fe M
ic hae l .c o
m
© 2013 Haim Michael
The Asynchronous Model● 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.
Li fe M
ic hae l .c o
m
© 2013 Haim Michael
The Asynchronous Model● 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.
Li fe M
ic hae l .c o
m
© 2013 Haim Michael
Simple Ajax Demo Li fe M
ic hae l .c o
m
<?phpfunction check($username) { $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
ajaxdemo.php
© 2013 Haim Michael
Simple Ajax Demo Li fe M
ic hae l .c o
m
<!DOCTYPE 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></head>
ajaxdemo.html
© 2013 Haim Michael
Simple Ajax Demo Li fe M
ic hae l .c o
m
<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
Simple Ajax Demo Li fe M
ic hae l .c o
m● 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
Simple Ajax Demo Li fe M
ic hae l .c o
m
© 2013 Haim Michael
Questions & Answers● 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.
Li fe M
ic hae l .c o
m
