ajax
TRANSCRIPT
Brief Introduction
Request to Response
Image from:http://tinyurl.com/ajaxFlow
What should you know?
•Must be familiar with JavaScript.•Any server side scripting language such as PHP.
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
Fundamental
• Ajax comprises of three key components•CSS•(X)HTML•JavaScript
} The DOMDocument Object Model
Image from:http://tinyurl.com/domTree
How to?
• Initialize the request• Configure the connection• Tell it, what to do when? (on state changes)• Send the request
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("Msxml2.XMLHTTP"); } catch (err)
{ try{ return new ActiveXObject("Microsoft.XMLHTTP"); } catch (err){return false;}
} }
}• ourAjaxObject = getAjaxObject()
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&[email protected]’•If(method=‘GET’){url = url+”?”+parameters }
How to: Overview• function getAjaxObject() { try {return new XMLHttpRequest(); } catch (err) { try {return new ActiveXObject("Msxml2.XMLHTTP"); } catch (err)
{ try{ return new ActiveXObject("Microsoft.XMLHTTP"); } catch (err){return false;}
} }
}• ourAjaxObject = getAjaxObject()•If(ourAjaxObject != false){
method = “GET”;url = “./getData.php”;parameters = ‘name=aman&place=pune&[email protected]’;If(method==“GET”){url = url+”?”+parameters; parameters=null; }ourAjaxObject.open(method, url, true); }
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
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.”;
?>
Backend: Replying XML<?php
$name = $_GET[‘name’];$place = $_GET[‘place’];$contact = $_GET[‘contact’];header('Content-Type: text/xml'); //setting the headerecho ‘<?xml version="1.0" encoding="utf-8"?>’;echo "\n<root>”;echo "\n\t<name>$name</name>”;echo "\n\t<place>$place</place>”;echo "\n\t<contact>$contact</contact>”;echo "\n</root>”;
?>
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
} }
Properties & Description of XMLHttpRequest
Methods & Description of XMLHttpRequest METHOD DESCRIPTIONabort() Stops the current requestgetAllResponseHeaders() Returns all headers (name and value) as a stringgetResponseHeader("<name>") Returns the value of the specified headerOpen(method,url,true/false) Opens a connection and retrieves response
from the specified URL.send(content) Transmits requestsetRequestHeader("<name>", "<value>") Assigns values to the specified header
jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. –wikipedia
Method:<script type="text/javascript" src="/path/to/jQuery.js"></script>dataReceived = $.ajax({
type:"POST"url:"./getData.php",data:"name=aman&place=pune&[email protected]",async: false }).responseText; // OR responseXML
J avascript Libraries (e.g. jQuery)
Question ?
My blog: http://blog.amanjain.com
My email: [email protected] Twitter handle :@amanjain (http://twitter.com/amanjain)
Download this doc: http://amanjain.com/docs/ajax.pdf
Most ImportantLearn something new everyday at:
http://PHPCamp.net
Wanna ping me ?
Thanks !