Ajax

1,865 views
1,770 views

Published on

Published in: Self Improvement
2 Comments
0 Likes
Statistics
Notes
  • This helped me in better understanding of ajax. A presentation worth watching.

    [Comment posted from http://blog.amanjain.com/]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here



  • [Comment posted from http://blog.amanjain.com/]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,865
On SlideShare
0
From Embeds
0
Number of Embeds
1,288
Actions
Shares
0
Downloads
8
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax

  1. 1. Brief Introduction
  2. 2. Request to Response Image from: http://tinyurl.com/ajaxFlow
  3. 3. What should you know? •Must be familiar with JavaScript. •Any server side scripting language such as PHP.
  4. 4. 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
  5. 5. Fundamental • Ajax comprises of three key components } The DOM •CSS •(X)HTML •JavaScript Document Object Model Image from: http://tinyurl.com/domTree
  6. 6. How to? • Initialize the request • Configure the connection • Tell it, what to do when? (on state changes) • Send the request
  7. 7. 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()
  8. 8. 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 }
  9. 9. 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); }
  10. 10. 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
  11. 11. 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.”; ?>  
  12. 12. 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>”; ?>
  13. 13. 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 } }
  14. 14. Properties & Description of XMLHttpRequest
  15. 15. 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  
  16. 16. 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
  17. 17. Question ?
  18. 18. 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
  19. 19. Thanks !

×