Ajax and Web Services

         Mark Pruett

          Dominion




1
Ajax started as an acronym:

    Asynchronous Javascript and XML




2
Web Services




3
REST

    Representational State Transfer




4
SOAP

    Simple Object Access Protocol




5
Question:

    Are news feeds web services?




6
A Simple Ajax / Web Service Example




7
Program Specification
    quot;Write an application that reads the answer to
    the question, quot;What's the meaning of ...
Meaning of Life, the Universe,
          and Everything:

                 42




9
Store the value 42 in a text file:

     MeaningOfLifeTheUniverseAndEverything.txt




10
#!/usr/bin/perl
     use strict;

     my $ANSWERS_DIR = quot;/var/www/htmlquot;;

     # Get the question.
     my $quest...
<HTML>
     <HEAD>
     <TITLE>Question</TITLE>
     <SCRIPT language=quot;Javascriptquot;>
     function get_answer () {
...
13
14
A Corporate Information Architecture Diagram




15
The Evolution of Ajax Use
       Send back a chunk of HTML – dump into DIV tag
     !


       Send back delimited text – ...
Trade-Off #0

     Ajax vs. Flex vs. Flash vs. Silverlight




17
Trade-Off #1

       Toolkits




18
Toolkits:
         prototype
     !


         Dojo
     !


         GWT (Google)
     !


         Atlas (Microsoft)
   ...
Internet Explorer – Error on Page




20
Internet Explorer – Script Error Dialog




21
Trade-Off #2

     SOAP vs. REST




22
SOAP

     Simple Object Access Protocol




23
A SOAP Envelope for Google Search API
     <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
     <SOAP-ENV:Envelope
...
Javascript Ajax SOAP Search (the hard way)
     function search () {
       var query = document.getElementById(quot;txtSe...
REST

     Representational State Transfer




26
REST

         Uses HTTP GET and POST
     !


         Also uses HTTP PUT and DELETE
     !




27
REST
     HTTP Method   HTTP Status Codes   REST Web Service Operation


     GET           200 OK              Retrieve a...
Trade-Off #3

     Asynchronous vs. Synchronous




29
Trade-Off #4

     XML vs. JSON vs. CSV




30
XML
     <person>
       <firstName>John</firstName>
       <lastName>Smith</lastName>
       <address>
         <city>New...
XML


     If you want the XMLHttpRequest responseXML property

     make sure your server uses the proper response header...
JSON
     {
         quot;firstNamequot;: quot;Johnquot;,
         quot;lastNamequot;: quot;Smithquot;,
         quot;addr...
JSON
     var my_json;
     ...
     my_json = eval (quot;(quot; + http_request.responseText + quot;)quot;);
     ...
    ...
CSV
     quot;Johnquot;,quot;Smithquot;,quot;21 2nd Streetquot;,quot;New York, NYquot;,10021,
     quot;212 732-1234quot;,...
Trade-Off #5

     XMLHttpRequest vs. The Script Tag Hack
                      or
           What To Do About Proxies



36
The Cross-Domain Problem




37
Apache ProxyPass
     ProxyPass          pattern   substitution
     ProxyPassReverse   pattern   substitution


     Prox...
Apache ProxyPass
     Let's say your application is running on http://www.example.com. With
     these two proxy rules in ...
A CGI Script as Proxy
     #!/usr/bin/perl
     #---------------------------------------------------------
     # A simple...
The Javascript SCRIPT tag hack
     <script language=quot;Javascriptquot; src=quot;http://random.server/somescript.jsquot;...
A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content
     // The YPipesJSON constructor
     function YPipesJSON...
A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content



             http://pipes.yahoo.com/pipes/pipe.run?
    ...
A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content
     ...
     <script language=quot;Javascriptquot; src=quo...
A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content




45
Conclusion(s)




46
Upcoming SlideShare
Loading in...5
×

Os Pruett

2,088

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,088
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Os Pruett"

  1. 1. Ajax and Web Services Mark Pruett Dominion 1
  2. 2. Ajax started as an acronym: Asynchronous Javascript and XML 2
  3. 3. Web Services 3
  4. 4. REST Representational State Transfer 4
  5. 5. SOAP Simple Object Access Protocol 5
  6. 6. Question: Are news feeds web services? 6
  7. 7. A Simple Ajax / Web Service Example 7
  8. 8. Program Specification quot;Write an application that reads the answer to the question, quot;What's the meaning of life, the universe, and everythingquot;, stored on our server, and displays it in the user's web browser.quot; 8
  9. 9. Meaning of Life, the Universe, and Everything: 42 9
  10. 10. Store the value 42 in a text file: MeaningOfLifeTheUniverseAndEverything.txt 10
  11. 11. #!/usr/bin/perl use strict; my $ANSWERS_DIR = quot;/var/www/htmlquot;; # Get the question. my $question; my @parts = split (quot;&quot;, $ENV{quot;QUERY_STRINGquot;}); foreach my $lrval (@parts) { if ($lrval =~ /^question=(.+)$/) { $question = $1; $question =~ s/%([dA-Fa-f]{2})/pack (quot;Cquot;, hex ($1))/eg ; } } # Get the answer. my $answer = get_answer_to ($question); # Return the answer. print quot;Content-type: text/htmlnnquot;; print quot;$answernquot;; sub get_answer_to { my ($question) = @_; my $answer = quot;I didn't understand the question ($question).quot;; if ($question eq quot;What is the meaning of life, the universe, and everything?quot;) { open (my $IFILE, quot;< $ANSWERS_DIR/MeaningOfLifeTheUniverseAndEverything.txtquot;); $answer = <$IFILE>; close $IFILE; } return $answer; } 11
  12. 12. <HTML> <HEAD> <TITLE>Question</TITLE> <SCRIPT language=quot;Javascriptquot;> function get_answer () { var xmlhttp = create_xmlhttp (); var url = quot;/cgi-bin/svc/answers.cgi?quot;; var parms = quot;question=What%20is%20the%20meaning%20of%20life,quot; + quot;%20the%20universe,%20and%20everything?quot;; xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) { var span = document.getElementById (quot;spanAnswerquot;); span.innerHTML = xmlhttp.responseText; } } xmlhttp.open(quot;GETquot;, url + parms, true); xmlhttp.send (null); } function create_xmlhttp () { // 25 lines omitted... } </SCRIPT> <BODY> <form id=quot;frmQuestionquot;> What is the meaning of life, the universe, and everything? <input type=quot;buttonquot; value=quot;Get Answerquot; onclick=quot;get_answer();quot;> <span id=quot;spanAnswerquot;> </span> </form> </BODY> </HTML> 12
  13. 13. 13
  14. 14. 14
  15. 15. A Corporate Information Architecture Diagram 15
  16. 16. The Evolution of Ajax Use Send back a chunk of HTML – dump into DIV tag ! Send back delimited text – parse it and dynamically ! update the page Send back XML – parse dynamically ! Some people move to JSON ! 16
  17. 17. Trade-Off #0 Ajax vs. Flex vs. Flash vs. Silverlight 17
  18. 18. Trade-Off #1 Toolkits 18
  19. 19. Toolkits: prototype ! Dojo ! GWT (Google) ! Atlas (Microsoft) ! Rico ! Zimbra ! DWR ! many, many, more ! 19
  20. 20. Internet Explorer – Error on Page 20
  21. 21. Internet Explorer – Script Error Dialog 21
  22. 22. Trade-Off #2 SOAP vs. REST 22
  23. 23. SOAP Simple Object Access Protocol 23
  24. 24. A SOAP Envelope for Google Search API <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <SOAP-ENV:Envelope xmlns:SOAP-ENV=quot;http://schemas.xmlsoap.org/soap/envelope/quot; xmlns:xsi=quot;http://www.w3.org/1999/XMLSchema-instancequot; xmlns:xsd=quot;http://www.w3.org/1999/XMLSchemaquot;> <SOAP-ENV:Body> <ns1:doGoogleSearch xmlns:ns1=quot;urn:GoogleSearchquot;> <key xsi:type=quot;xsd:stringquot;>YOUR_GOOGLE_KEY</key>' <q xsi:type=quot;xsd:stringquot;>ajax javascript</q> <start xsi:type=quot;xsd:intquot;>0</start> <maxResults xsi:type=quot;xsd:intquot;>5</maxResults> <filter xsi:type=quot;xsd:booleanquot;>true</filter> <restrict xsi:type=quot;xsd:stringquot;></restrict> <safeSearch xsi:type=quot;xsd:booleanquot;>false</safeSearch> <lr xsi:type=quot;xsd:stringquot;></lr> <ie xsi:type=quot;xsd:stringquot;>latin1</ie> <oe xsi:type=quot;xsd:stringquot;>latin1</oe> </ns1:doGoogleSearch> </SOAP-ENV:Body></SOAP-ENV:Envelope> 24
  25. 25. Javascript Ajax SOAP Search (the hard way) function search () { var query = document.getElementById(quot;txtSearchquot;).value; var soap_env = '<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>' + quot;<SOAP-ENV:Envelopequot; ... + '<SOAP-ENV:Body>' + '<ns1:doGoogleSearch xmlns:ns1=quot;urn:GoogleSearchquot;>' + '<key xsi:type=quot;xsd:stringquot;>MY_GOOGLE_KEY</key>' + '<q xsi:type=quot;xsd:stringquot;>' + query + '</q>' ... + '</ns1:doGoogleSearch>' + '</SOAP-ENV:Body></SOAP-ENV:Envelope>'; var ajax = new Ajax (quot;/gsearchquot;, soap_env, quot;POSTquot;, function () { if (ajax.req.status == 200) { google2html (quot;divOutputquot;, ajax.req.responseXML); } } ); // Google's SOAP server requires this header. ajax.setRequestHeader(quot;Content-Typequot;, quot;text/xmlquot;); // Send the request to the SOAP server. ajax.request (); } 25
  26. 26. REST Representational State Transfer 26
  27. 27. REST Uses HTTP GET and POST ! Also uses HTTP PUT and DELETE ! 27
  28. 28. REST HTTP Method HTTP Status Codes REST Web Service Operation GET 200 OK Retrieve a representation of a 410 Gone resource from the server. PUT 200 OK Create a new resource on the server. 400 Bad Request POST 200 OK Update an existing resource. 410 Gone DELETE 200 OK Delete and existing service. 204 No Content 28
  29. 29. Trade-Off #3 Asynchronous vs. Synchronous 29
  30. 30. Trade-Off #4 XML vs. JSON vs. CSV 30
  31. 31. XML <person> <firstName>John</firstName> <lastName>Smith</lastName> <address> <city>New York, NY</city> <zipCode>10021</zipCode> <streetAddress>21 2nd Street</streetAddress> </address> <phoneNumbers> <number>212 732-1234</number> <number>646 123-4567</number> </phoneNumbers> </person> 31
  32. 32. XML If you want the XMLHttpRequest responseXML property make sure your server uses the proper response header: Content-type: text/xml 32
  33. 33. JSON { quot;firstNamequot;: quot;Johnquot;, quot;lastNamequot;: quot;Smithquot;, quot;addressquot;: { quot;cityquot;: quot;New York, NYquot;, quot;zipCodequot;: 10021, quot;streetAddressquot;: quot;21 2nd Streetquot; }, quot;phoneNumbersquot;: [ quot;212 732-1234quot;, quot;646 123-4567quot; ] } 33
  34. 34. JSON var my_json; ... my_json = eval (quot;(quot; + http_request.responseText + quot;)quot;); ... alert (my_json.firstName + quot; quot; + my_json.lastName); 34
  35. 35. CSV quot;Johnquot;,quot;Smithquot;,quot;21 2nd Streetquot;,quot;New York, NYquot;,10021, quot;212 732-1234quot;,quot;646 123-4567quot; 35
  36. 36. Trade-Off #5 XMLHttpRequest vs. The Script Tag Hack or What To Do About Proxies 36
  37. 37. The Cross-Domain Problem 37
  38. 38. Apache ProxyPass ProxyPass pattern substitution ProxyPassReverse pattern substitution ProxyPass /ysearch/ http://api.search.yahoo.com/WebSearchService/V1/ ProxyPassReverse /ysearch/ http://api.search.yahoo.com/WebSearchService/V1/ 38
  39. 39. Apache ProxyPass Let's say your application is running on http://www.example.com. With these two proxy rules in place, any request to: http://www.example.com/ysearch/ is automatically redirected to: http://api.search.yahoo.com/WebSearchService/V1/ 39
  40. 40. A CGI Script as Proxy #!/usr/bin/perl #--------------------------------------------------------- # A simple, specific, proxy as a standalone server script. #--------------------------------------------------------- use strict; use LWP::Simple; # Constants my $REAL_URL = quot;http://api.search.yahoo.com/WebSearchService/V1/webSearchquot;; my $APPID = quot;Perl+API+install+testquot;; # Append the Yahoo! Search appid to the parameter string. my $parameters = $ENV{QUERY_STRING} . quot;&appid=$APPIDquot;; # Retrieve data from the Yahoo! server using the Perl LWP module. my $data = get quot;$REAL_URL?$parametersquot;; # Output the HTTP header followed by the retrieved XML. # Anything a server CGI script sends to standard output # is sent back to the browser. print quot;Content-type: text/xmlnnquot;; print $data; 40
  41. 41. The Javascript SCRIPT tag hack <script language=quot;Javascriptquot; src=quot;http://random.server/somescript.jsquot;> 41
  42. 42. A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content // The YPipesJSON constructor function YPipesJSON (title, ypipes_url, div_name, obj_name) { this.title = title; this.url = ypipes_url + quot;&_callback=quot; + obj_name + quot;.jsonHandlerquot;; this.div_name = div_name; } // The requestJSON method: builds script tag - launches our request to the server. YPipesJSON.prototype.requestJSON = function () { var head = document.getElementsByTagName(quot;headquot;).item(0); var script = document.createElement (quot;scriptquot;); script.src = this.url; head.appendChild (script); } // The jsonHandler method: this is our callback function. // It's called when the JSON is returned to our browser from Yahoo!. YPipesJSON.prototype.jsonHandler = function (json) { var div = document.getElementById (this.div_name); var desc_limit = 200; var html = quot;<b>quot; + this.title + quot;</b><br>nquot;;; for (var i=0; i < json.count; i++) { html += quot;<a href='quot; + json.value.items[i].link + quot;'>quot;; // Some formatting code deleted... } html += desc + quot;<p>nquot;; } div.innerHTML = html; } 42
  43. 43. A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content http://pipes.yahoo.com/pipes/pipe.run? textinput1=linux &_id=lnmGDou72xGK6WDrZYQMOQ &_run=1 &_render=json &_callback=yp1.jsonHandler 43
  44. 44. A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content ... <script language=quot;Javascriptquot; src=quot;ypipes_json.jsquot;></script> <script> var yp1; function init () { var url; url = quot;http://pipes.yahoo.com/pipes/pipe.run?quot; + quot;textinput1=linuxquot; + quot;&_id=lnmGDou72xGK6WDrZYQMOQquot; + quot;&_run=1quot; + quot;&_render=jsonquot;; yp1 = new YPipesJSON (quot;O'Reilly on Linuxquot;, url, quot;target1quot;, quot;yp1quot;); yp1.requestJSON (); } </script> </head> <body onload=quot;init();quot;> <h3>Yahoo! Pipes JSON Script Tag Example</h3> <div id=quot;target1quot;> Loading... </div> </body> </html> 44
  45. 45. A Script Tag Hack JS Object for “Badging” Yahoo! Pipes Content 45
  46. 46. Conclusion(s) 46

×