2. Brief Introduction

3. Request to Response
Image from:
http://tinyurl.com/ajaxFlow

4. What should you know?
•Must be familiar with JavaScript.
•Any server side scripting language such as PHP.

5. Ajax Definition
• Ajax doesn't exist
• Ajax = Asynchronous JavaScript + XML
In simple terms:
It is a technique that allows the client to
retrieve more data from the server without
reloading the whole page

6. Fundamental
• Ajax comprises of three key components
} The DOM
•CSS
•(X)HTML
•JavaScript Document Object Model
Image from:
http://tinyurl.com/domTree

7. How to?
• Initialize the request
• Configure the connection
• Tell it, what to do when? (on state changes)
• Send the request

8. How to: Initializing the request
• ourAjaxObject = new XMLHttpRequest();
• XMLHttpRequest: DOM API that can be used by web browser scripting languages
to transfer XML & other text data between a web server & a browser. - wikipedia
function getAjaxObject()
{ try {return new XMLHttpRequest(); } catch (err)
{ try {return new ActiveXObject(quot;Msxml2.XMLHTTPquot;); } catch (err)
{ try{ return new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } catch (err)
{return false;}
}
}
}
• ourAjaxObject = getAjaxObject()

9. How to: Configure the connection
•The Ajax Workflow
•What request method to use GET/POST
•Where to go
•Whether or not to go there asynchronously
•ajaxObject = getAjaxObject()
•ourAjaxObject.open(method, url, true);
•ourAjaxObject.open(method, url, false);
•URL:
•url = ‘./getData.php’
•parameters = ‘name=aman&place=pune&contact=mail@amanjain.com’
•If(method=‘GET’){url = url+”?”+parameters }

10. How to: Overview
• function getAjaxObject()
{ try {return new XMLHttpRequest(); } catch (err)
{ try {return new ActiveXObject(quot;Msxml2.XMLHTTPquot;); } catch (err)
{ try{ return new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } catch (err)
{return false;}
}
}
}
• ourAjaxObject = getAjaxObject()
•If(ourAjaxObject != false){
method = “GET”;
url = “./getData.php”;
parameters = ‘name=aman&place=pune&contact=mail@amanjain.com’;
If(method==“GET”){url = url+”?”+parameters; parameters=null; }
ourAjaxObject.open(method, url, true); }

11. How to: Tell it, what to do when? -part I
•onreadystatechange is a event handler for an event that fires at every
state change
•Possible readyState values are:
•0 = uninitialized (unsent)
•1 = opened
•2 = headers received
•3 = loading
•4 = complete
•ourAjaxObject.onreadystatechange = callMe ;
•ourAjaxObject.send(parameters);
i.e. parameters will be null if method is GET

12. Backend: Replying with plain text
<?php
$name = $_GET[‘name’];
$place = $_GET[‘place’];
$contact = $_GET[‘contact’];
echo “hi! $name. Nice to meet you at $place will mail
you the further details at $contact.”;
?>

13. Backend: Replying XML
<?php
$name = $_GET[‘name’];
$place = $_GET[‘place’];
$contact = $_GET[‘contact’];
header('Content-Type: text/xml'); //setting the header
echo ‘<?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>’;
echo quot;n<root>”;
echo quot;nt<name>$name</name>”;
echo quot;nt<place>$place</place>”;
echo quot;nt<contact>$contact</contact>”;
echo quot;n</root>”;
?>

14. How to: Tell it, what to do when? -part II
•function callMe()
{
if(ourAjaxObject.readyState == 4 )
{
alert(“we are receiving the data”);
dataReceived = ourAjaxObject.responseText //for plain text, JSON
// OR dataReceived = ourAjaxObject.responseXML, for XML
}
}

15. Properties & Description of XMLHttpRequest

16. Methods & Description of XMLHttpRequest
METHOD DESCRIPTION
abort() Stops the current request
getAllResponseHeaders() Returns all headers (name and value) as a string
getResponseHeader(quot;<name>quot;) Returns the value of the specified header
Open(method,url,true/false) Opens a connection and retrieves response
from the specified URL.
send(content) Transmits request
setRequestHeader(quot;<name>quot;, quot;<value>quot;) Assigns values to the specified header

17. J avascript Libraries (e.g. jQuery)
jQuery is a lightweight JavaScript library that emphasizes interaction
between JavaScript and HTML. –wikipedia
Method:
<script type=quot;text/javascriptquot; src=quot;/path/to/jQuery.jsquot;></script>
dataReceived = $.ajax({
type:quot;POSTquot;
url:quot;./getData.phpquot;,
data:quot;name=aman&place=pune&contact=mail@amanjain.comquot;,
async: false }).responseText; // OR responseXML

18. Question ?

19. Wanna ping me ?
My blog: http://blog.amanjain.com
My email: mail@amanjain.com
My Twitter handle :@amanjain
(http://twitter.com/amanjain)
Download this doc: http://amanjain.com/docs/ajax.pdf
Most Important
Learn something new everyday at:
http://PHPCamp.net

20. Thanks !